Web前端笔试、面试题及答案——CSS篇(3)

21、对浏览器内核的理解？

浏览器主要分成两部分：渲染引擎和 JS 引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户以及其他它所需要编辑、显示网络的应用程序都需要内核。
JS引擎：解析和执行JavaScript 来实现网页的动态效果；最开始渲染引擎和 JS 并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只渲染引擎。

22、常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。
Presto内核：Opera7及以上。
Webkit内核：Safari,Chrome等。
EdgeHTML内核：Microsoft Edge。

23、对WEB标准以及W3C的理解与认识？

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构、表现和行为。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由万维网联盟（外语缩写： W3C）起草和发布，也有一些是其他标准组织制订的标准，比如ECMA的ECMAScript标准。

24、CSS中可以被继承的属性有哪些？

字体系列(font-*)：font-family,font-size,font-weight,font-stretch,font-size-adjust；
列表相关(list-style-*)：list-style,list-style-image,list-style-position,list-style-type,list-style-color；
文本系列：text-indent,text-align,text-transform,line-height,word-spacing,letter-spacing,direction,color；
元素可见性：visibility
表格布局：caption-side,border-callapse,border-spacing,table-layout,empty-cells；
光标属性：cursor；
页面样式：page,page-break-inside,windows,orphans;
声音属性：speak,speak-punctuation,speak-numeral,speak-header,speech-rate,pitch,pitch-range;

25、下列代码中div的高宽为多少？

<div style="height: 50px;background-color: #ff0;">
     <span style="width: 50px;height: 80px;background-color: #0ff;"></span>
 </div>

div的高50px，宽100%，因为span为行内元素，无法设置高宽，当其添加样式display：block;后可设置高宽。

26、什么是重绘和重排

repaint(重绘)：repaint发生更改时，元素的外观会发生改变，且在没有改变布局的情况下发生，如改变outline，visibility，background，color不会影响到dom结构渲染。
reflow(渲染、重排)：与repaint的区别就是他会影响dom的结构渲染，同时会触发repaint，会改变自身以及父元素，比如display:none就会产生reflow。

27、浮动元素重叠情况？

行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上。
块级元素与浮动元素发生重叠，边框、背景显示在浮动元素之下，内容会显示在浮动元素之上。

28、CSS提高性能的方法有哪些？

避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字。
避免！important，可以选择其他选择器

29、浏览器是怎样解析CSS选择器的？

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

30、元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

31、transform、translate、transition 分别是什么属性？

transform 是指变换、变形，是 css3 的一个属性，和 width，height 属性一样；
translate 是 transform 的属性值，是指元素进行 2D(3D)维度上位移或范围变换;
transition 是指过渡效果，往往理解成简单的动画，需要有触发条件。