[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{ } ```