一、说一下Css的盒子模型？
HTML中所有元素都可以看成是一个盒子
盒子的组成：content、padding、border、margin
盒子的类型：
- 标准盒模型：margin+border+padding+content -- box-sizing：content-box（默认）
- IE盒模型：margin+content（border+padding） -- box-sizing：border-box
二、Css选择器的优先级？
Css的特性：继承性、层叠性、优先级
不同级别下：
内联样式 > id选择器 > 类选择器、伪类选择器 > 元素选择器 > 通配符选择器 > 浏览器自定义
相同级别内：
同一级别中后书写 > 先书写的
css的引入方式不同 => 优先级的不同 => 内部引入 > 外部 >导入引入
三、隐藏元素的方法有哪些？
- display：none（元素在页面消失，不占据空间）
- opacity：0（透明度为0，占据空间）
- visibility：hidden （元素消失，占据空间）
- position：absolute
四、px和rem的区别是什么？
px是像素，显示器上呈现画面的像素，绝对单位长度
rem是相对单位，相对于html根节点的font-size的值
五、重绘和重排有什么区别？
- 重排（回流）：布局引擎会根据所有样式计算出盒模型在页面的位置和大小
- 重绘：计算好盒模型的位置、大小和其他一些属性，浏览器根据每个盒模型特性进行绘制
对DOM的大小、位置修改 => 重排
对DOM的样式修改 => 重绘
六、让一个元素水平垂直居中的方式有哪些？
- 定位 + margin
- 定位 + transform
left:0
right:0
transform:translate(-50%,-50%)- display
display:flex
justify-content:center
align-items:center- grid布局
- table局部
七、Css哪些属性可以继承，哪些不可以？
- 字体属性：font
- 文本属性：line-height
- 元素的可见性：visibility：hidden
- 表格布局的属性：border-spacing
- 列表的属性：list-style
- 声音的样式属性
八、有没有用过预处理器？
预处理语言增加了变量、函数、混入等强大的功能
SASS LESS
- 支持样式嵌套
- 支持定义变量 -- @global：#eee;
