【前端八股文(一)，CSS】

前端八股文

一、CSS

1. CSS盒模型
   在HTML页面中的所有元素都可以看做一个盒子
   盒子的组成：内容content、内边距padding、边框border、外边距margin
   盒模型类型：
   标准盒模型：margin + border + padding + content
   IE盒模型：margin + content（border + padding）
   控制盒模型的模式：box-sizing:content-box（默认值，标准盒模型）、border-box（IE盒模型）
2. CSS选择器优先级
   CSS特性：继承性、层叠性、优先级
   优先级：写CSS样式的时候，会给同一个元素添加多个样式，此时谁的权重高就显示谁的样式
   权重：！important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器
3. 隐藏元素的方法
   display：none
   元素在页面上消失，不占据空间
   opacity：0
   设置元素透明度为0，元素不可见，但仍占据空间位置
   visibility：hidden
   让元素消失，占据空间位置，元素不可见
   position：absolute
   clip-path
4. px和rem的区别
   px是像素，显示器上呈现画面的像素，每个像素的大小是一样的，绝对单位长度
   rem，相对单位，相对于html根节点的font-size的值，直接给html节点的font-size：62.5%；
   1rem = 10px （16px*62.5%=10px）
5. 重绘重排有什么区别
   重排（回流）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小
   重绘：计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制
   浏览器的渲染机制
   对DOM的大小、位置进行修改后，浏览器需要重新计算元素的集合属性，就叫重排
   对DOM的样式进行修改,比如color和background-color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，那么这里只触发了重绘
   
6. 让一个元素水平垂直居中的方式
   1.定位+margin
   
   2.定位+transform
   
   3.flex布局
   
   4.grid布局
   5.table布局
7. CSS的哪些属性可以继承？哪些不可以继承？
   CSS的三大特性：继承、层叠、优先级
   子元素可以继承父元素的样式
   1.字体的一些属性：font
   2.文本的一些属性：line-height
   3.元素的可见性：visibility：hidden
   4.表格布局的属性：border-spacing
   5.列表的属性：list-style
   6.页面的样式属性：page
   7.声音的样式属性
8. 有没有用过预处理器？
   预处理语言增加了变量、函数、混入等强大的功能
   SASS LESS