瀏覽器渲染過程
不同的瀏覽器渲染過程實際上並不相同，但是依舊存在相一致的部分，大致過程如下所示：
1.瀏覽器解析HTML文檔的源碼，然後構造出一個DOM樹，DOM樹的構建過程是一個深度遍歷的過程，當前節點的所有子節點都構建好以後才會去構建當前節點的下一個兄弟節點。
2.接下來，瀏覽器開始對CSS文件內容進行解析，一般來說，瀏覽器會先查找內聯樣式，然後是CSS文件中定義的樣式，最後再是瀏覽器默認的樣式，構建CSSRule Tree。
3.接著根據CSSRule Tree和DOMTree構建出RenderTree，DOM樹的節點並不是所有的都會放進RenderTree中，比如header標籤、display:none的標籤等。
4.構建出RenderTree後，瀏覽器已經能知道頁面中有哪些節點、各節點的CSS樣式以及它們的從屬關係，從而去計算出每個節點在屏幕中的位置。最後按照計算出的位置，調用系統的API，把各節點繪製到屏幕上。
上訴過程是逐步完成的，為了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現到屏幕上，並不會等到所有的html都解析完成之後再去構建和佈局render樹，而是解析完一部分就渲染一部分內容。
reflow和repaint
迴流(reflow)：如果改變了影響元素佈局信息的CSS樣式，比如width、height、left、top等，該元素的位置信息就會發生變化，也可能會導致整個頁面其他元素的位置信息都發生變化，所以渲染引擎需要重新執行layout過程，重新計算每個元素的位置。reflow是在瀏覽器下一幀繪製的時候，進行重新佈局，如果修改了元素的佈局樣式後，立馬去獲取offsetTop、scrollTop等屬性，那麼渲染引擎就會強制進行重新佈局過程，以保證在JS中獲取到正確的offsetTop、scrollTop等屬性值。
重繪(repaint)：改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性時，屏幕的一部分需要重繪，但是元素的幾何尺寸不會變化。
display:none的標籤不會被加入RenderTree，也不會觸發reflow，visibility:hidden的標籤會被加入到RenderTree，不會觸發reflow，只會觸發repaint。
減少reflow/repaint
1.如果需要頻繁的修改DOM樣式，儘量通過預先定義好的css的clsss，然後修改DOM的className。
2.不要把DOM節點的屬性值放在一個循環裡當成循環裡的變量
3.為需要添加動畫的HTML元素，添加上"宋體">屬性值，這樣修改該元素的css是不會引起reflow。
4.不要使用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為單位的寬高時，會帶來非常大的計算困擾，如下：
這個地方想要的肯定是50%，但是實際的大小趣事50%+ 2px，這多出的2px就很讓人無奈，於是為了不破壞這個50%的寬度，往往得再內嵌一層元素用來設置border，就成了下面這樣：
這種解決方式顯然不太科學，至少導致了HTML結構的臃腫，而box-sizing屬性的出現就解決了這個問題，它就是用來改變元素寬高的計算方式。box-sizing屬性有兩個常用的取值content-box和border-box，如果值為content-box(默認)，則實際寬度為上面所說的計算方式：實際寬高=border + padding +width/height。如為border-box則是另一種計算方式，其實際寬高就是設置的width/height。
瀏覽器選擇哪個盒模型，主要是看瀏覽器處於標準模式還是怪異模式，在<doctypedtd>標籤裡有DTD聲明，如果有DTD聲明，瀏覽器處於標準模式，沒有DTD聲明，瀏覽器處於怪異模式，處於怪異模式的瀏覽器按照自身的解析方式去解析，IE6會選擇IE盒模型，其他現代瀏覽器都會採用W3C標準盒模型。IE6以下版本的瀏覽器沒有遵循W3C標準，無論頁面有沒有DTD聲明，它都是按照IE盒模型解析代碼。/<doctypedtd>
margin屬性
margin:%|px，margin的值如果為%，其是根據父元素的寬度來計算的，包括margin-top和margin-bottom，其值也是相對於父元素的寬度。並且內聯元素的margin-top/bottom是不允許設置的。
margin的合併
- margin在水平方向上不會合並
- margin在垂直方向會合並，其值為兩者最大值
- 元素設置有margin-top、margin-bottom且為空內容，其margin上下也會重疊，其值為兩者最大值
- 父元素如果沒有padding、border等屬性時，其子元素的margin上下方向會和父元素的margin進行重疊
margin設置負值
- 位於普通文檔流中元素，負值相當於將元素向負值方向移動覆蓋，但是隻會覆蓋顏色，不會覆蓋文字。
- 對於"微軟雅黑">元素，負值會完全覆蓋前一個元素，會影響後面元素一起移動
- 對於"微軟雅黑">元素，元素脫離了普通文檔流，對其他元素沒有影響
- 對於float元素，可以通過負值進行覆蓋，最常見的應用是三列布局。
padding屬性
- 值如果為%，也是根據父元素寬度來計算的
- padding不存在合併的情況
- padding也不存在負值情況
Float屬性
- float元素會脫離正常文檔流，然後向左或向右平移，一直平移到碰到容器邊框或者另一個float元素
- 浮動元素會根據上一個元素的類型判斷位置，如果上一個是float元素，則跟隨他浮動，放置不下就擠到下一行展示
- 如果上一個是標準流元素，則浮動元素的相對垂直高度不變，頂部和上一個底部對齊
清除浮動
- 父元素添加overflow:hidden，會隱藏子元素超出容器部分，且IE6不支持
- 浮動元素後面添加clear:both，會添加額外的無意義的標籤
- 父元素變成float元素
- 使用偽類:after，代碼如下：
content是在父容器的後面添加一個空白字符，height:0是讓這個空白字符不顯示出來，display:block;clear:both是確保這個空白字符是非浮動的獨立區塊。zoom:1是IE6獨有的屬性，作用是激活父元素的hasLayout屬性，讓父元素擁有自己的佈局，其他瀏覽器會直接忽略該屬性。
BFC原理
BFC即塊級格式化上下文，它屬於普通文檔流，具有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可以包含浮動元素(清除浮動)
- BFC可以阻止元素被浮動元素覆蓋，可以用來實現兩列自適應佈局。
層疊水平
一個DOM元素，在不考慮層疊上下文的情況下，會按照層疊水平決定元素在Z軸上的顯示順序，通俗來講，不同的DOM元素組合在一起發生層疊的時候，它們的顯示順序會遵循層疊水平的規則，而z-index是用來調整某個元素顯示順序。
7階層疊水平
如果兩個元素層疊水平相同的時候，這個時候就要遵循下面兩個準則：1後來居上原則2誰z-index大，誰在上原則一個頁面中往往不止一個層疊上下文，在同一個層疊上下文中按照層疊水平的規則來堆疊元素，正常情況下，一共有三種大的類型創建層疊上下文：1默認創建層疊上下文，HTML根元素屬於根層疊上下文元素2需要配合z-index觸發創建層疊上下文3不需要配合z-index觸發創建層疊上下文
需要z-index創建層疊上下文
1.含有position屬性的元素
2.flex項（父元素diaplay為flex|inline-flex）注意是子元素，不是父元素創建層疊上下文這兩種情況下，需要設置具體的z-index值，不能設置z-index為auto，這也就是z-index:auto和z-index:0的一點細微差別
不需要z-index創建層疊上下文
這種情況下，基本上都是由CSS3中新增的屬性來觸發的，常見的有：
- 元素的opacity< 1
- 元素的以下屬性不為none：transform，filter，mask等等
閱讀更多 渡一教育web前端開發 的文章
