CSS之面试题总结

1.CSS 的解析顺序

css 选择器匹配元素是逆向解析

• 因为所有样式规则可能数量很大，而且绝大多数不会匹配到当前的 DOM 元素（因为数量很大所以一般会建立规则索引树），所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。
• 如果正向解析，例如「div div p em」，我们首先就要检查当前元素到 html 的整条路径，找到最上层的 div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次才能确定匹配与否，效率很低。
• 逆向匹配则不同，如果当前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除。只有在匹配时，才会不断向上找父节点进行验证。

所以为了减少查找时间，尽量不要直接使用标签选择器。

2.红色区域的大小是多少？

.box {
   
    width: 200px;
    height: 200px;
    padding: 20px;
    margin: 20px;
    background: red;
    border: 20px solid yellow;
    box-sizing: border-box;
}

答案是120px+(20*2)px=160px

3.水平垂直居中

• 16种水平居中垂直居中的方法

4.如何实现一个最大的正方形

• 用padding-bottom撑开边距就可以了。

 section {
   
    width:100%;
    padding-bottom: 100%;
    background: #333;
}

5.css 如何开启 gpu 加速

• 请参考网易云社区的文章:CSS动画的性能分析和浏览器GPU加速

6.position的值， relative和absolute分别是相对于谁进行定位的？

• absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

• fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

• relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

• static 默认值。没有定位，元素出现在正常的流中

• sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

7.CSS中link 和@import的区别是？

• link属于HTML标签，而@import是CSS提供的;

• 页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;

• import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

• link方式的样式的权重 高于@import的权重.

8.行高的构成

• 行高是由 line-box 组成的
• line-b