[TOC] ## 前言 摘录css专题的全部面试题，题目来源于 网络、博客、亲身经历等。部分题目存在不准确的情况，希望大家多加纠正。 ## 重排&&重绘 首先理解两个概念 ： - dom树 ：节点的树状结构 - 渲染树 ：节点如何展示 原理首先要了解css图层的概念，浏览器在渲染一个页面时，会将页面分为很多个图层，图层有大有小，每个图层上有一个或多个节点。在渲染DOM的时候，浏览器所做的工作实际上是： 1. 获取DOM后分割为多个图层 2. 对每个图层的节点计算样式结果（Recalculate style–样式重计算） 3. 为每个节点生成图形和位置（Layout–回流和重布局） 4. 将每个节点绘制填充到图层位图中（Paint Setup和Paint–重绘） 5. 图层作为纹理上传至GPU 6. 复合多个图层到页面上生成最终屏幕图像（Composite Layers–图层重组） 然后理解整个过程：  当DOM元素影响了元素的几何属性（例如宽和高），浏览器需要重新计算元素的几何属性，同样其它元素的几何属性也会和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为“重排”。 完成重排后，浏览器会重新绘制受影响的部分到屏幕上中，该过程称为“重绘”。 ## 布局实现侧边栏距离屏幕顶部200px，距离左侧主体内容10px 首先能确定的是，其方案肯定是屏幕固定位置，但是现在又要求与主体内容的向左位置关系，可能不会马上想出其方案。其实冷静下来，发现这种布局技巧在我们实际开发中最常见不过了，在单一位置关系不能满足的时候，我们可以使用其他的位置关系来进行修正。比如我们常用的水平居中垂直居中布局，很多都是利用margin-left:-w/2类似的来修正的。那么这题也不例外： 我们假设侧边栏宽度为200px,主体内容宽度为1000px，那么实际需要的样式代码只需这样既可： ~~~ .side{ position:fixed; top:200px; left:50%; margin-left:510px} ~~~ ## position的值， relative和absolute分别是相对于谁进行定位的 | 定位 |描述 | |---|---| | absolute | 生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。 | | fixed | 老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位 | | relative | 生成相对定位的元素，相对于其在普通流中的位置进行定位| | static | 默认值。没有定位，元素出现在正常的流中 | | sticky | 生成粘性定位的元素，容器的位置根据正常文档流计算得出 | ## 样式的解析顺序：从右向左 样式的解析是从右边向左的，这样效率更高，我们通过一个图来解释这个问题。  从图中可以看到如果从右边到左边，其产生的复杂度，节点数，样式可复用性都比左边的好。 ## 加了# 的不一定比不加的查询效率高 作为常识我们都知道id选择器同等情况下肯定比类效率高。然后有些前端开发者也默认的认为下面的方式中，上面的比下面的效率高。其实不然，在解析过程中 #paran .a{}意味着css解析器要先找到#parent再找到他下面的.a所在节点。而后者可以直接定位到.a{}因此哪一种方式更优，显而易见。 ``` #id .a{ } .a{ } ```