Web前端系列技术之CSS基础（从入门开始）⑤

Web前端系列技术之CSS基础定位+装饰

今天主要介绍的是关于网页的CSS定位和装饰，下面就是CSS非常重要的三个进阶知识点：

十八、CSS定位
十九、装饰
二十、选择器拓展

---

---

十八、CSS定位

网页中常见的布局方式主要分为：标准流、浮动和定位；

1. 标准流：
   块级元素独占一行 → 垂直布局；
   行内元素/行内块元素一行显示多个 → 水平布局；

2. 浮动：
   可以让原本垂直布局的 块级元素变成水平布局；

3. 定位：
   可以让元素自由的摆放在网页的任意位置；
   一般用于 盒子之间的层叠 情况；

1. 定位的基本介绍

① 为了解决盒子与盒子之间的层叠问题（定位之后的元素层级最高，可以层叠在其他盒子上面）；
② 可以让盒子始终固定在屏幕中的某个位置；

2. 定位的基本使用

1. 设置定位方式
   属性名：position；
   常见属性值：

定位方式	属性值
静态定位（相当于未定位）	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

2. 设置偏移值
   偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
   选取的原则一般是就近原则 （离哪边近用哪个）
   
   注意：属性值也可以写成百分比的形式；

3. 静态定位

介绍：是定位属性的默认值，也就是所谓的标准流；
代码段：position：static；
注意点：

1. 静态定位就是之前标准流，不能通过方位属性进行移动；
2. 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定；

4. 相对定位

介绍：属于自恋型定位，相对于自己之前的位置进行移动；
代码段：position：relative；
特点：

1. 需要配合方位属性实现移动；
2. 相对于自己原来位置进行移动；
3. 在页面中占位置 → 没有脱标（脱标：就是脱离标准流的控制）；

应用场景：

1. 配合绝对定位使用，构成子绝父相的定位效果；
2. 用于小范围的移动；

5. 绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动；
代码段：position：absolute；
特点：

1. 需要配合方位属性实现移动；
2. 默认相对于浏览器可视区域进行移动；
3. 在页面中不占位置 → 已经脱标；

应用场景：

1. 配合绝对定位使用，构成子绝父相的定位效果；

注意：绝对定位相对于谁移动？

1. 祖先元素中没有定位 → 默认相对于浏览器进行移动
2. 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动

6. 子绝父相

场景：让子元素相对于父元素进行自由移动；

含义：
• 子元素：绝对定位
• 父元素：相对定位

子绝父相好处：
• 父元素是相对定位，则对网页布局影响最小；

拓展：
场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！

原因：父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局；

案例：
案例①：子绝父相水平居中案例

1. 子绝父相
2. 先让子盒子往右移动父盒子的一半
   • left：50%
3. 再让子盒子往左移动自己的一半
   • 普通做法：margin-left：负的子盒子宽度的一半；
   缺点：子盒子宽度变化后需要重新改代码；
   • 优化做法：transform：translateX(-50%)
   优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码；
   

案例②：子绝父相水平垂直都居中案例

1. 子绝父相
2. 让子盒子往右走大盒子一半
   • left：50%
3. 让子盒子往下走大盒子一半
   • top：50%
4. 让子盒子往左+往上走自己的一半
   • transform：t