20210202 104道常见经典CSS面试题笔记(31-40)

31 zoom:1清除浮动原理？

清除浮动，触发hasLayout。

zoom属性是ie浏览器的专有属性，它可以设置或检索对象的缩放比例，解决ie下比较奇葩的bug。譬如外边距的重叠，浮动清除，触发ie的hasLayout属性等。
当设置来zoom的值之后，所设置的元素就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值其实也会发生重新渲染，运用这个原理，也解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

zoom属性是ie浏览器专有属性，火狐和老版本的webkit核心的浏览器不支持这个属性，然而，zoom现在已经逐步标准化，出现在CSS3规范草案中。

目前非ie由于不支持这个属性，可以通过css3里面的动画属性scale进行缩放。

32 移动端的布局媒体查询？

假设现在正在用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备，投影和打印媒介都有自己的特点，css就是为文档提供在不同媒介上展示的适配方法

当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规则被应用，当媒体查询返回假，标签上带有媒体查询的样式表仍将被下载，只不过不会被应用。

包含来一个媒体类型和至少使用宽度，高度和颜色等媒体属性来限制样式表范围的表达式。css3加入的媒体查询使得无需修改内容可以使样式应用于某些特定的设备范围。

33 使用css预处理器吗？

SASS和LESS没有本质区别
使用哪个取决团队使用的是哪个
我目前使用的是 LESS

34 css优化，提高性能的方法有哪些？

加载性能

1. css压缩:将写好的css进行打包压缩，可以减少很多体积。
2. css单一样式:将需要下边距和左边距的时候，很多时候选择margin:top 0 bottom 0;但margin-bottom:bottom;margin-left:left;执行效率更高。
3. 减少使用import而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

选择器性能

1. 关键选择器(key selector)，选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)。css选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等。
2. 如果规则拥有id选择器作为其关键选择器，则不要为规则增加标签。过滤无关的规则(这样样式系统就不会浪费时间匹配它们了)。
3. 避免使用通配规则，如*{}计算次数惊人！只对需要用到的元素进行选择。
4. 尽量少的去对标签进行选择，而是用class。
5. 尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最多三层，更多的使用类来关联每一个标签元素。
6. 了解哪些属性是可以通过继承而来的，然后避免这些属性重复指定规则。

渲染性能

1. 慎重使用高性能属性:浮动，定位。
2. 尽量减少页面重排，重绘。
3. 去除空规则：{}。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
4. 属性值为0时，不加单位。
5. 属性值为浮动小数0.**，可以省略小数点之前的0.
6. 标准化各种浏览器前缀，带浏览器前缀的在前，标准属性在后。
7. 不实用@import前缀，它会影响css的加载速度。
8. 选择器优化嵌套，尽量避免层级过深。
9. css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优虐考虑清楚再使用。
10. 正确使用dispaly属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
11. 不滥用web字体，对于中文网站来说webfonts可能很陌生，国外却很流行。webfonts通常体积庞大，而且一些浏览器在下载webfonts时会阻塞页面渲染损伤性能。

可维护性，健壮性

1. 将具有相同属性的样式抽离出来，整合并通过class在页面上进行使用，提高css的可维护性
2. 样式于内容分离，将css代码定义到外部css中。

35 浏览器是怎样解析css选择器的？

样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者因为不匹配而放弃该规则。

采用从左至右的方式读取css规则，那么大多数规则读到最后才会发现是不匹配的，这样做会费时耗能。最后有很多都是无用的。而采取从右至左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃来，避免了许多无效匹配。

36 在网页中应该使用奇数还是偶数的字体？为什么？

1. 偶数字号相对更容易和web设计的其它部分构成比例关系，比如当使用了14px的正文字号，可能会在一些地方使用140.5=7px的margin，在另一些地方使用141.5=21px的标题字号。
2. 浏览器的缘故，低版本的浏览器ie6会把奇数字体强制转化为偶数，即13px渲染为14px。
3. 系统差别，早起的windows里，中易宋体点阵只有12和14，15，16px唯独缺少13px。

37 margin和padding分别适合什么场景使用？

margin是用来隔开元素与元素的间距，paading是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干。
padding用于元素与内容之间的间隔，让内容与元素之间有一段距离。

何时使用margin
需要在border外侧添加空白时。
空白处不需要背景色时。
上下相连的两个盒子之间的空白，需要相互抵消时，如15px+20px的margin，将得到20px的空白。

何时使用padding
需要在border内侧添加空白时。
空白处需要背景色时。
上下相连的两个盒子之间的空白，希望等于两者之和。如15px+20px的padding，将得到35px的空白。

38 抽离样式的模块思路？

把常用的css样式单独做成css文件，通用的和业务相关的分离出来，通用的做成样式模块共享，业务相关的，放进业务相关的库里面做成对应功能的模块。

39 css3的all属性？

all属性实际上是所有css属性的缩写，表示，所有的css属性都怎样怎样，但是，不包括unicode-bidi和direction这两个css属性。支持三个css通用属性值，initial，inherit，unset。

initial是初始值的意思，也就是该元素除了unicode-bidi和direction以外的css属性都使用属性的默认初始值。。

inherit是继承的意思，也就是该元素除了unicode-bidi和direction以外的css属性都继承父元素的属性值。

unset是取消设置的意思，也就是当前浏览器或用户设置css忽略，然后如果是具有继承性的css，如color，则使用继承值，如果没有继承特性的css属性，如background-color，则使用初始值。

40 为什么不建议使用通配符初始化css样式？

常用 *{padding:0;margin:0;} 这样的写法好处是写起来很简单，但是是通配符需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大加强了网站运行的负载，会使网站加载的适合需要很长一段时间，因此一般大型网站都有分层次的一套初始化样式。

处于性能的考虑，并不是所有标签都会有padding和marin，因此对常见具有默认padding和marfin的元素初始化即可，并不需要使用通配符来初始化。