定位与装饰
子绝父相与页面细节：定位四式、z-index、基线对齐、圆角阴影过渡，再到 SEO 三大标签与 ico 图标，项目开工前的最后一块拼图。
定位
如果说浮动能实现元素在同一行显示
那么定位就可以实现元素在某个块的任意位置显示
挺具灵活性 （像那些小标签 小按钮 或者跟随窗口移动的小广告 就可以用定位的形式展示）
功能：
- 解决盒子与盒子之间的层叠问题（定位之后元素层级最高，可以层叠在其他盒子上）
- 可以让盒子始终固定在屏幕中的某个位置
标准流就一般是静态定位 不能通过方位属性进行移动
此外重点在于相对定位和绝对定位
以下 4 个为属性值 需要用属性名 position 去使用他们
此外 要让显示在什么位置 就需要设置偏移值
相对定位
根据自己原本的位置进行移动
position: relative;
虽然移动了 但是原本所在的位置不会被其他元素填充
（没有脱标）
通常用于小范围的移动
对于这样一个 div 会显示在段落中间 没问题
给它加上相对定位
有点不符合常规思维的一点是 它的移动是相反的
right 向左移 left 向右 top 向下 而 bottom 向上 完全颠倒
可以试着这样理解 right 是加了右填充 ……
或者用绘图的坐标来去理解
本身网页这样东西的布局就是 y 轴朝下 x 轴朝右
所以 left 为 x++ 那么就是向右
top 为 y++ 所以向下
看自己怎么去理解吧
然后就这种 4 个方位都设置了情况而言
也并不是想象中的 先向……再向……
可以看到 图中的效果是 向右下移动了
那就是 top 和 left 起了作用
对——当 left 和 right 同时设置时 只有 left 会起作用
当 top 和 bottom 同时设置时 只有 top 起作用
如果只设置了相对定位而不去设置偏移 是没有任何问题的
当然 后面也会有很多这种技巧
绝对定位
以非静态定位的父元素为参照 在其中进行定位
如果没有父标签 那就以整个网页为参照（也就是 body）
position: absolute;
它与相对就不同了 一旦设置就会脱离标准流 其他元素会填充它原本的位置
然后根据第一句话（以父元素为标准）应该就能想到——
如果在某个不需要调整位置的 div 中设置一个小元素
div 是该小元素的父元素咯 如果 div 不去定位 那么就会以整个网页为基准
与预期不符 要想达到预期效果 就得给父元素 div 加上一个定位 然后又因为设置一个相对定位没有什么影响 那么——可想而知 可以先给父标签加个相对定位
so—— 子绝父相（相夫（父）教（绝）子）
具体用法：
可以理解为 right 就是在父元素的右边开始移动 right:4px 从右边界向左移 4 像素 right:-4px 从右边界向右移 4 像素
同理 bottom:50px 从下边界向上移 50 像素
到这里又成了左负右正了……
所以
还是以 padding 来理解比较好
居中
一旦加了绝对定位 就会脱标
从而使得 margin:0 auto 失效
那么想要绝对定位的元素居中该怎么做？
让它移动到 body 的 50% 位置会怎么样？
left: 50%;
确实移动了 50% 但是移动了离边界 50% 的一段距离
那么再向左移一点距离（盒子宽度的一半）就行了
margin-left: -150px;
垂直方向同理
top: 50%;
margin-top: -150px;
但是 这样每次都得自己去计算……而且 一旦盒子像素为单数 求一半？？
肯定有简便方法
transform: translate(-50%, -50%);
这段代码就是使元素移动自己宽高的一半
那么居中就成了
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
此外 绝对定位后的元素展示的是行内块的效果
即不加宽高 则大小由内容撑开
固定定位
网页里的内容一般会随滚动条滚动而显示或消失
但有些内容 希望一直显示在页面中
像标头栏 右侧的导航栏（类似于 excel 固定最左最上行列的效果）
再或者那种页面两边的广告
这些都得用到固定定位
position: fixed;
同样 它也是脱标的 浮在其他元素之上
如果想让该元素固定在左上角
那么就设置
left: 0;
top: 0;
比如用这个功能做一个简单的跳转到置顶
元素层级关系
不同布局方式元素的层级关系：
标准流 < 浮动 < 定位
不同定位之间的层级关系：
相对、绝对、固定默认层级相同
此时 HTML 中写在下面的元素层级更高，会覆盖上面的元素（后来者居上）
如果有时候希望某元素在最上面 而不想改书写的位置
就可以自己改变定位元素的层级
z-index: 数字;
属性名：z-index
属性值：数字
（数字越大，层级越高）
可以写 999 也可以写 1
默认都在 0 层 一般写个 1 就已经比其他元素要高了
一定要配合定位才能生效
装饰
基线
浏览器文字类型元素排版中存在用于对齐的基线（baseline）
（从有效内容开始划线）
在排版时 往往会出现行内块和文字、行内块和行内对不齐的问题
这是因为浏览器会默认将他们当成文字处理 而文字是按基线对齐的
要解决这个问题就可以使用
vertical-align: middle;
不用记太多
当遇到了图片啊 表单中的 input 啊
对不齐的情况时
想想是不是因为基线问题
如果是——想顶端对齐 就设置 vertical-align:top;
想居中 就设置 vertical-align:middle;
还有一个场景 让图片居中于 div 块
可以用 div 设置相对定位 img 设置绝对定位 然后 left50%+top50%+transform:translate(-50%,-50%)
也可以就之前一样设置 margin:0 auto; 先水平居中 在设置 margin-top 移到合适位置
现在还可以利用行内块等同文字处理 利用基线
光标类型
鼠标放在某些元素上
希望展示一些特殊的效果
属性名：cursor
所以 这些都是可以设置的
眼见不一定为实
边框圆角
做出来的 div 盒子都是方方正正的 太约束了
如果让盒子四个角变得圆润，增加页面细节，说不定可以提升用户体验
属性名：border-radius
常见取值：数字+px 、百分比
原理：
依旧是从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
| border-radius: 10px; | border-radius:10px 20px 40px 80px; |
利用这种方式 还可以将 div 元素变成圆形
border-radius: 100px;
或者直接 50%
overflow 溢出部分显示
如果文本超过了给出的盒子的大小
那么超过的那部分就需要我们去进行一个处理
属性名：overflow
一二很容易理解
三和四不常见到
他们有个区别就是 如果内容超过了 auto 和 scroll 都会显示滚动条 盒子大小不变
如果没超过 scroll 仍然会显示滚动条 而 auto 不会
而且 auto 会隐藏下方的滚动条
显示隐藏
将鼠标放在某链接上时 会显示一些原本没显示的东西
让某元素本身在屏幕中不可见。如：鼠标 :hover 之后元素隐藏
常见属性：
- visibility：hidden
- display：none
区别：
- visibility：hidden 隐藏元素本身，并且在网页中 占位置
- display：none 隐藏元素本身，并且在网页中 不占位置
注意点：
经常会通过 display 属性完成元素的显示隐藏切换
display：none；（隐藏）、display：block；（显示）
因为不占位置的特点 往往第二种用的更多
注意是：
.xiangqing 默认隐藏
.yingchang 被触发
而后 .xiangqing 变为显示
元素透明
让某元素整体（包括内容）一起变透明
属性名：opacity
属性值：0~1 之间的数字
- 0 表示完全透明
- 1 表示完全不透明
opacity 会让元素整体透明，包括里面的内容，如：文字、子元素等……
css 中很少用到 多与 js 结合使用
边框合并
让相邻表格边框进行合并，得到细线边框效果
border-collapse: collapse;
绘三角形
在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成。
原理：利用盒子边框完成
- 设置一个盒子
-
设置四周不同颜色的边框
-
将盒子宽高设置为 0，仅保留边框
- 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明
还可以通过调整不同边框的宽度，可以调整三角形的形态
div {
/* width: 100px;
height: 100px; */
width: 0;
height: 0;
/* background-color: pink; */
/* transparent: 透明 */
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid orange;
}
选择器再拓展
链接伪类选择器
常用于选中超链接的不同状态
语法：
➢ 注意点：
如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
其中 :hover 伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态
焦点伪类选择器
用于选中元素获取焦点时状态，常用于表单控件
使得表单控件获取焦点时默认会显示外部轮廓线
属性选择器
通过元素上的 HTML 属性来选择元素，常用于选择 input 标签
/* text:背景色是粉色; password背景色是skyblue */
input[type='text'] {
background-color: pink;
}
input[type="password"] {
background-color: skyblue;
}
/* input:nth-child(1) {} */
</head>
<body>
<input type="text">
<input type="password">
</body>
阴影与过渡
文字阴影
给文字添加阴影效果，吸引用户
属性名：text-shadow
阴影可以叠加设置，每组阴影取值之间以逗号隔开
盒子阴影
给盒子添加阴影效果，体现页面细节
属性名：box-shadow
box-shadow: 5px 10px 20px 10px bisque inset;
如果是外阴影 不需要写 outset 直接缺省
box-shadow: 5px 10px 20px 10px bisque;
过渡
让元素的样式慢慢的变化，常配合 hover 使用，增强网页交互体验
属性名：transition
通常与 hover 一起用 不是加在 hover 上 而是谁要变 加在谁上
比如这里宽变化 想要一秒的过渡时间 写上 transition:width 1s
再加上高也要变 两者用逗号隔开
同理 颜色等等属性都可以添加过渡效果
如果比较多 不想一个一个写 就直接给 all 加
transition: all 1s;
注意点：
- 过渡需要：默认状态 和 hover 状态样式不同，才能有过渡效果
- transition 属性给需要过渡的元素本身加
- transition 属性设置在不同状态中，效果不同的
- ① 给默认状态设置，鼠标移入移出都有过渡效果
- ② 给 hover 状态设置，鼠标移入有过渡效果，移出没有过渡效果
前置认知
网页与网站
网页：相当于是每页纸
例如：淘宝的主页、淘宝的登录页、淘宝的商品页等
网站：相当于一本书籍 提供特定服务的一组网页集合
例如：百度、淘宝、京东
用户翻阅的时候，看的是每页纸上的内容
由多页纸整合在一起，就是完整的一本书籍了
骨架结构标签
<!DOCTYPE html>
文档类型声明，告诉浏览器该网页的 HTML 版本
这个就是告知是 html 5
它需要写在页面的第一行，不属于 HTML 标签
<html lang="en">
标志网页使用的语言（默认英文）
lang=language en=english
改成中文就 <html lang="zh-CN">
（这就是为什么打开自己的网站会显示要不要翻译成中文）
作用：帮助搜索引擎归类 + 浏览器翻译
``
标识网页使用的字符编码
保存和打开的字符编码需要统一设置，否则可能会出现 乱码
- UTF-8：万国码，国际化的字符编码，收录了全球语言被认证了的文字
- GB2312：6000+ 汉字
- GBK：20000+ 汉字
一般就用 utf8 就行
``
解决 ie 浏览器兼容性（ie 兼容性很差 基本被 edge 替代了）
``
做移动端网页时必需 就是将页面与实际屏幕大小适配
SEO
什么是 seo
search engine optimization
搜索引擎优化
就是说 搜索了一个关键词后 会有很多结果 这些结果是有先后顺序显示在结果栏的 如果想让自己的网站在某搜索结果中靠前 就得用到这个 seo
最简单的方式就是钞能力（竞价排名）
然后将网页做成 html 后缀是有利于提升 seo 排名的
然后在细节上 使标签语义化（在合适地方放合适标签）
比如说标题别用 div 用 h
关于关键字的内容 放在 strong 里面去
使网页结构更清晰
有些公司还有专门岗位去做 seo 优化
但再怎么优化都不可能优化到钞能力前面……
SEO 三大标签
title 网页标题标签、description 网页描述标签、keywords 网页关键词标签
这里面的东西不能瞎写
比如京东还把网站放进标题里了 但这些东西一般不是前端所要考虑的
语义化标签
在 HTML5 新版本中，推出了一些有语义的布局标签，可以增强网页的语义化
显示特点和 div 一致，但是比 div 多了不同的语义
ico 图标
我们自己的网页左上角只是一个 e
怎么让它显示一个图标呢
需要一个 .ico 后缀的图标
利用 link 去链接它
这个 .ico 一般放在根目录 而不是在 images 目录里
小 tips：
.ico 图标不知道怎么来？要偷哪个网站的 就在它网址后面加上 /favicon.ico 回车一下 就可以看到该网站的图标 右键另存为 就是自己的了
详情：https://www.shejitang.com/ui/84360.html
不用背那么长一串 直接快捷键
link:f 回车
版心
在之前的案例已经有过这个版心的概念
不外乎就是呈现在网页中间的东西
给它取个类 统一控制一下
一般命名为：container、wrapper、w
常设定为：
书写顺序
之前有提到过
不同的 CSS 书写顺序会影响浏览器的渲染性能
所以通常使用专业的书写顺序习惯
在选择器中
推荐用类 + 后代 .xx .yy zz……
但不是层级越多越好，一个选择器中的类选择器的个数推荐 不要超过 3 个
附件
- web前端.docx
💬 评论