摘要：在中主要通過四個部分來描述，分別為。對于元素，負值會完全覆蓋前一個元素，會影響后面元素一起移動對于元素，元素脫離了普通文檔流，對其他元素沒有影響對于元素，可以通過負值進行覆蓋，最常見的應用是三列布局。

不同的瀏覽器渲染過程實際上并不相同，但是依舊存在相一致的部分，大致過程如下所示：

瀏覽器解析HTML文檔的源碼，然后構造出一個DOM樹，DOM樹的構建過程是一個深度遍歷的過程，當前節點的所有子節點都構建好以后才會去構建當前節點的下一個兄弟節點。

接下來，瀏覽器開始對CSS文件內容進行解析，一般來說，瀏覽器會先查找內聯樣式，然后是CSS文件中定義的樣式，最后再是瀏覽器默認的樣式，構建CSS Rule Tree。

接著根據CSS Rule Tree和DOM Tree構建出Render Tree，DOM樹的節點并不是所有的都會放進Render Tree中，比如header標簽、display:none的標簽等。

構建出Render Tree后，瀏覽器已經能知道頁面中有哪些節點、各節點的CSS樣式以及它們的從屬關系，從而去計算出每個節點在屏幕中的位置。最后按照計算出的位置，調用系統的API，把各節點繪制到屏幕上。

上訴過程是逐步完成的，為了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現到屏幕上，并不會等到所有的html都解析完成之后再去構建和布局render樹，而是解析完一部分就渲染一部分內容。

回流(reflow)：如果改變了影響元素布局信息的CSS樣式，比如width、height、left、top等，該元素的位置信息就會發生變化，也可能會導致整個頁面其他元素的位置信息都發生變化，所以渲染引擎需要重新執行layout過程，重新計算每個元素的位置。reflow是在瀏覽器下一幀繪制的時候，進行重新布局，如果修改了元素的布局樣式后，立馬去獲取offsetTop、scrollTop等屬性，那么渲染引擎就會強制進行重新布局過程，以保證在JS中獲取到正確的offsetTop、scrollTop等屬性值。

重繪(repaint)：改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部布局的屬性時，屏幕的一部分需要重繪，但是元素的幾何尺寸不會變化。

display:none的標簽不會被加入Render Tree，也不會觸發reflow，visibility:hidden的標簽會被加入到Render Tree，不會觸發reflow，只會觸發repaint。

如果需要頻繁的修改DOM樣式，盡量通過預先定義好的css的clsss，然后修改DOM的className。

不要把DOM節點的屬性值放在一個循環里當成循環里的變量

為需要添加動畫的HTML元素，添加上position:absolute/fixed屬性值，這樣修改該元素的css是不會引起reflow。

不要使用table布局，因為可能一個很小的改動就會引起整個table的重新布局。

HTML文檔中的每個元素在渲染的時候都會被描述成一個矩形盒子，而盒模型正是用來表示每個元素盒子所占用空間大小的模型，CSS盒模型分為W3C標準盒模型和IE盒模型，IE盒模型就是在IE6以下版本的怪異模式下的盒模型，IE6以及更高版本都遵循標準盒模型。在CSS中主要通過四個部分來描述，分別為margin、border、padding、content。一般來說，IE盒模型的寬高計算方式為：width/height = content + padding + border，W3C標準盒模型的寬高計算方式為：width/height = content。

W3C標準盒模型寬高的計算模式在對于非px為單位的寬高時，會帶來非常大的計算困擾，如下：

.box {
    width:50%;
    border:1px solid #ccc;
}

這個地方想要的肯定是50%，但是實際的大小趣事50% + 2px，這多出的2px就很讓人無奈，于是為了不破壞這個50%的寬度，往往得再內嵌一層元素用來設置border，就成了下面這樣：

.box {
    width:50%;
}
.box .box-inner {
    border:1px solid #ccc;
}

這種解決方式顯然不太科學，至少導致了HTML結構的臃腫，而box-sizing屬性的出現就解決了這個問題，它就是用來改變元素寬高的計算方式。box-sizing屬性有兩個常用的取值content-box和border-box，如果值為content-box(默認)，則實際寬度為上面所說的計算方式：實際寬高 = border + padding + width/height。如為border-box則是另一種計算方式，其實際寬高就是設置的width/height。

瀏覽器選擇哪個盒模型，主要是看瀏覽器處于標準模式還是怪異模式，在標簽里有DTD聲明，如果有DTD聲明，瀏覽器處于標準模式，沒有DTD聲明，瀏覽器處于怪異模式，處于怪異模式的瀏覽器按照自身的解析方式去解析，IE6會選擇IE盒模型，其他現代瀏覽器都會采用W3C標準盒模型。IE6以下版本的瀏覽器沒有遵循W3C標準，無論頁面有沒有DTD聲明，它都是按照IE盒模型解析代碼。

margin:% | px，margin的值如果為%，其是根據父元素的寬度來計算的，包括margin-top和margin-bottom，其值也是相對于父元素的寬度。并且內聯元素的margin-top/bottom是不允許設置的。

margin在水平方向上不會合并

margin在垂直方向會合并，其值為兩者最大值

元素設置有margin-top、margin-bottom且為空內容，其margin上下也會重疊，其值為兩者最大值

父元素如果沒有padding、border等屬性時，其子元素的margin上下方向會和父元素的margin進行重疊

位于普通文檔流中元素，負值相當于將元素向負值方向移動覆蓋，但是只會覆蓋顏色，不會覆蓋文字。

對于position:relative元素，負值會完全覆蓋前一個元素，會影響后面元素一起移動

對于position:absolute元素，元素脫離了普通文檔流，對其他元素沒有影響

對于float元素，可以通過負值進行覆蓋，最常見的應用是三列布局。

值如果為%，也是根據父元素寬度來計算的

padding不存在合并的情況

padding也不存在負值情況

float元素會脫離正常文檔流，然后向左或向右平移，一直平移到碰到容器邊框或者另一個float元素

浮動元素會根據上一個元素的類型判斷位置，如果上一個是float元素，則跟隨他浮動，放置不下就擠到下一行展示

如果上一個是標準流元素，則浮動元素的相對垂直高度不變，頂部和上一個底部對齊

父元素添加overflow:hidden，會隱藏子元素超出容器部分，且IE6不支持

浮動元素后面添加clear:both，會添加額外的無意義的標簽

父元素變成float元素

使用偽類:after，代碼如下：

.wrap:after {
    content:" ",
    display:block;
    height:0;
    clear:both;
}
.wrap {
    zoom:1;
}

content是在父容器的后面添加一個空白字符，height:0是讓這個空白字符不顯示出來，display:block;clear:both是確保這個空白字符是非浮動的獨立區塊。zoom:1是IE6獨有的屬性，作用是激活父元素的hasLayout屬性，讓父元素擁有自己的布局，其他瀏覽器會直接忽略該屬性。

BFC即塊級格式化上下文，它屬于普通文檔流，具有BFC特性的元素可以看作是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且BFC具有普通容器所沒有的一些特性。通俗來說，可以把BFC理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海都不會影響到外部。

只要元素滿足下面任一條件即可觸發BFC特性：

body根元素

浮動元素：float除none以外的值

絕對定位元素：position(absolute、fixed)

display為line-block、table-ceils、flex

overflow除了visible以外的值(hidden、scroll、auto)

不同的BFC容器下邊距不會發生重疊

BFC可以包含浮動元素(清除浮動)

BFC可以阻止元素被浮動元素覆蓋，可以用來實現兩列自適應布局。

一個DOM元素，在不考慮層疊上下文的情況下，會按照層疊水平決定元素在Z軸上的顯示順序，通俗來講，不同的DOM元素組合在一起發生層疊的時候，它們的顯示順序會遵循層疊水平的規則，而z-index是用來調整某個元素顯示順序。

如果兩個元素層疊水平相同的時候，這個時候就要遵循下面兩個準則：
1 后來居上原則
2 誰z-index大，誰在上原則
一個頁面中往往不止一個層疊上下文，在同一個層疊上下文中按照層疊水平的規則來堆疊元素，正常情況下，一共有三種大的類型創建層疊上下文：
1 默認創建層疊上下文，HTML根元素屬于根層疊上下文元素
2 需要配合z-index觸發創建層疊上下文
3 不需要配合z-index觸發創建層疊上下文

1 含有position屬性的元素
2 flex項（父元素diaplay為flex|inline-flex）注意是子元素，不是父元素創建層疊上下文
這兩種情況下，需要設置具體的z-index值，不能設置z-index為auto，這也就是z-index:auto和z-index:0的一點細微差別

這種情況下，基本上都是由CSS3中新增的屬性來觸發的，常見的有：

元素的opacity < 1

元素的以下屬性不為none：transform，filter，mask等等