前端八股（CSS部分）

CSS高频问题

CSS盒模型
- 在HTML页面中的所有元素都可以看作一个盒子。
- 盒子的组成：内容content，内边距padding，边框border，外边距margin。
- 盒模型的类型：
  - 标准盒模型：margin + border + padding + content。
  - IE盒模型：margin + content(border + padding)。
- 控制盒模型的模式：box-sizing : content-box (default，标准盒模型), border-box(IE盒模型)。
CSS选择器优先级

CSS的特性：继承性、层叠性、优先级。
优先级：写CSS样式时给同一个元素添加多个样式，此时样式权重高的则优先显示。
选择器：!important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器。

如何隐藏元素
- display: none; （元素直接消失，不占据空间）
- opacity: 0; （透明度为0，占据空间）
- visibility: hidden; （元素消失，占据空间）
- position: absolute;（移除页面）
- clip-path （剪切元素）
px和rem的区别
- px是像素，显示器上呈现画面的像素，大小统一的绝对单位。
- rem是相对单位，相对于HTML根节点的font-size的值。
  - 若设定HTML根结点font-size为62.5%，则1rem = 10px。
  - 16px * 62.5% = 10px。（默认状态下1rem = 16px）
重绘与重排的区别
- 重排（回流）：布局引擎根据所有样式计算盒模型在页面中的位置和大小；对DOM的大小、位置等属性进行修改后需要重新计算几何属性，就叫重排。
- 重绘：计算完成盒模型的位置、大小等属性之后，浏览器会根据每个盒模型的特性在页面上绘制；对DOM的样式进行修改后，浏览器不需要重新计算几何属性直接绘制该元素新样式，就叫重绘。
- 浏览器的渲染机制：
让元素水平垂直的方式
- 定位+margin：子元素设置top: 0; bottom: 0; left: 0; right: 0; margin: auto;
- 定位+transform：子元素设置top: 50%; left: 50%; transform: translate(-50%, -50%);
- flex布局：父元素设置display: flex; justify-content: center; align-items: center;
- table布局：父元素设置display: table-cell; vertical-align: middle;，子元素设置margin: 0 auto;
- grid布局：父元素设置display: grid; justify-items: center;
属性继承
- 子元素可以继承父元素的样式：
  - 字体类属性：font…
  - 文本类属性：text-align, line-height…
  - 元素可见性：visibility: hidden…
  - 表格布局：border-spacing…
  - 列表属性：list-style…
  - 页面样式：page…
  - 声音样式
预处理器
- CSS弊端：样式重复使用，不利于扩展维护。
- 预处理：增加变量、函数、混入等强大功能。类似于宏定义，通过编译器替换变量、函数等。
  - SASS与LESS
  - @global-color: #EEE; box { color: @global-color; }