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

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

瀏覽器解析HTML文檔的源碼，然后構(gòu)造出一個DOM樹，DOM樹的構(gòu)建過程是一個深度遍歷的過程，當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)都構(gòu)建好以后才會去構(gòu)建當(dāng)前節(jié)點(diǎn)的下一個兄弟節(jié)點(diǎn)。

接下來，瀏覽器開始對CSS文件內(nèi)容進(jìn)行解析，一般來說，瀏覽器會先查找內(nèi)聯(lián)樣式，然后是CSS文件中定義的樣式，最后再是瀏覽器默認(rèn)的樣式，構(gòu)建CSS Rule Tree。

接著根據(jù)CSS Rule Tree和DOM Tree構(gòu)建出Render Tree，DOM樹的節(jié)點(diǎn)并不是所有的都會放進(jìn)Render Tree中，比如header標(biāo)簽、display:none的標(biāo)簽等。

構(gòu)建出Render Tree后，瀏覽器已經(jīng)能知道頁面中有哪些節(jié)點(diǎn)、各節(jié)點(diǎn)的CSS樣式以及它們的從屬關(guān)系，從而去計算出每個節(jié)點(diǎn)在屏幕中的位置。最后按照計算出的位置，調(diào)用系統(tǒng)的API，把各節(jié)點(diǎn)繪制到屏幕上。

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

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

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

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

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

不要把DOM節(jié)點(diǎn)的屬性值放在一個循環(huán)里當(dāng)成循環(huán)里的變量

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

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

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

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

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

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

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

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

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

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

margin在水平方向上不會合并

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

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

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

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

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

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

對于float元素，可以通過負(fù)值進(jìn)行覆蓋，最常見的應(yīng)用是三列布局。

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

padding不存在合并的情況

padding也不存在負(fù)值情況

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

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

如果上一個是標(biāo)準(zhǔn)流元素，則浮動元素的相對垂直高度不變，頂部和上一個底部對齊

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

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

父元素變成float元素

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

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

content是在父容器的后面添加一個空白字符，height:0是讓這個空白字符不顯示出來，display:block;clear:both是確保這個空白字符是非浮動的獨(dú)立區(qū)塊。zoom:1是IE6獨(dú)有的屬性，作用是激活父元素的hasLayout屬性，讓父元素?fù)碛凶约旱牟季郑渌麨g覽器會直接忽略該屬性。

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

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

body根元素

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

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

display為line-block、table-ceils、flex

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

不同的BFC容器下邊距不會發(fā)生重疊

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

BFC可以阻止元素被浮動元素覆蓋，可以用來實(shí)現(xiàn)兩列自適應(yīng)布局。

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

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

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

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

元素的opacity < 1

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