css总结

1.css盒子模型。

HTML中的每一个元素都可以看作成一个盒子，从内到外分别包含content;padding;border;margin;IE盒子模型，与标准盒子模型相比的区别为IE盒子模型的padding;border;都属于content，例如给一个盒子设置背景颜色，标准盒子中背景颜色会包含padding。控制盒子模型的模式box-sizing:border-box;（IE盒子模型）content-box;(标准盒子模型)。

2.css选择器的优先级。

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

3.隐藏元素的方法有哪些。

display:none; //元素在页面消失，并且不占空间。
opacity:0; //设置元素的透明度为0，占据空间。
visibility:hidden; //让元素消失，但是占据空间位置。
position:absolute; //让元素移出可视空间。

4.px和rem的区别。

px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样的一个绝对单位。
rem，是相对单位，相对于HTML根结点的font-size的值。

5.回流和重绘。

回流：布局引擎回根据所有的样式计算出盒子模型在页面上的大小；
重绘：计算位置大小之后，浏览器会根据每个盒子模型进行特定的绘制；
浏览器的渲染机制：渲染顺序如下图。
当我们对DOM元素的大小位置进行修改后，浏览器会重新计算这些元素的几何属性所以叫回流，也叫重排。
当我们对DOM的样式进行修改时，比如color\background-color，浏览器就不需要计算几何属性了，直接绘制元素的新样式，这就值触发的重绘。

6.让一个元素水平垂直居中的方式有哪几种？

1.定位+margin
	使用子绝父相的方法，设置margin：auto;
2.定位+transform
	使用子绝父相的方法，设置top:50%;letf:50%;transform:translate(-50%,-50%);
3.flex布局
dispaly:flex;
justify-content:center;
align-items:center;

7.css那些属性可以继承？

css的特性：继承性、层叠性、优先级。
子元素可以继承父元素的样式
1.字体属性：font;
2.文本属性：line-height;
3.元素的可见性：display:none;
4.表格布局属性：border-spacing；
5.列表属性：list-style;

8.css预处理器。

css为标记语言，预处理器加入了变量函数等强大的功能。
主流的处理器有sass、less。