前端CSS常考问题总结

CSS盒模型

CSS选择器的优先级

隐藏元素的方法

px和rem的区别是什么?

重绘重排有什么区别?

重排（回流）：

重绘：

浏览器的渲染机制:

浏览器如何解析CSS？

元素水平垂直居中的方式

CSS的哪些属性哪些可以继承

CSS预处理器

预处理器作用：

盒子塌陷

现象：

原因：

解决方案：

伪类和伪元素

伪类：

伪元素：

css3新特性

CSS3 边框

CSS3 背景

CSS3 文本效果

CSS3 字体

CSS3 2D 转换

用flex实现九宫格

CSS盒模型

在HTML页面中的所有元素都可以看成是一个盒子

盒子的组成：内容content、内边距padding、边框border、外边距margin

盒模型的类型：

标准盒模型 margin + border + padding + content
IE盒模型 margin + content(border + padding)

标准盒模型

IE盒模型

控制盒模型的模式：

box-sizing: ①content-box（默认值，标准盒模型） ②border-box（IE盒模型）

CSS选择器的优先级

CSS的特性：

继承性、层叠性、优先级

优先级：

写CSS样式的时候，会给同一个元素添加多个样式，此时谁的权重高就显示谁的样式

添加样式的方式：

标签、类/伪类/属性、全局选择器、行内样式、id、!important

优先级顺序：

!important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器

隐藏元素的方法

display:none; ——元素在页面上消失，不占据空间
opacity:0; ——设置了元素的透明度为0，元素不可见，但仍然占据空间位置
visibility:hidden; ——让元素消失，占据空间位置，一种不可见的状态
position:absolute;——定位
clip-path——裁剪

px和rem的区别是什么?

px（像素）：

绝对单位长度，显示器上给我们呈现画面的像素，每个像素大小一样

rem：

相对单位，相对于html根节点的font-size的值
默认html根节点font-size=16px, 1rem = 16px;
直接给html节点的font-size:62.5%; 1rem = 10px; （16px*62.5%=10px）

重绘重排有什么区别?

重排（回流）：

布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小
对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排

重绘：

计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制
对DOM的样式进行修改，如color等，浏览器不需要重新计算几何属性时，直接修改绘制元素的新样式，就是重绘

浏览器的渲染机制:

浏览器如何解析CSS？

CSS选择器的解析是从右向左解析的。
若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点)，而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS解析完毕后,需要将解析的结果与DOM Tree的内容-起进行分析建立一棵Render Tree，最终用来进行绘图。
在建立Render Tree时(WebKit 中的「Attachment」过程)，浏览器就要为每个DOM Tree中的元素根据CSS的解析结果(Style Rules)来确定生成怎样的Render Tree

元素水平垂直居中的方式

1.定位+margin

.father{
            width: 400px;
            height: 400px;
            border: 1px solid;
            position: relative;
        }
.son{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: red;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

2.定位+transform

.father{
            width: 400px;
            height: 400px;
            border: 1px solid;
            position: relative;
        }
.son{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: blue;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

3.flex布局

.father{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 400px;
            height: 400px;
            border: 1px solid;
        }
.son{
            width: 200px;
            height: 200px;
            background-color: green;
        }

4.grid布局

5.table布局