【CSS基礎】CSS常見概念

瀏覽器渲染過程

不一樣的瀏覽器渲染過程實際上並不相同，可是依舊存在相一致的部分，大體過程以下所示：

1. 瀏覽器解析HTML文檔的源碼，而後構造出一個DOM樹，DOM樹的構建過程是一個深度遍歷的過程，當前節點的全部子節點都構建好之後纔會去構建當前節點的下一個兄弟節點。
2. 接下來，瀏覽器開始對CSS文件內容進行解析，通常來講，瀏覽器會先查找內聯樣式，而後是CSS文件中定義的樣式，最後再是瀏覽器默認的樣式，構建CSS Rule Tree。
3. 接着根據CSS Rule Tree和DOM Tree構建出Render Tree，DOM樹的節點並非全部的都會放進Render Tree中，好比header標籤、display:none的標籤等。
4. 構建出Render Tree後，瀏覽器已經能知道頁面中有哪些節點、各節點的CSS樣式以及它們的從屬關係，從而去計算出每一個節點在屏幕中的位置。最後按照計算出的位置，調用系統的API，把各節點繪製到屏幕上。

上訴過程是逐步完成的，爲了更好的用戶體驗，渲染引擎將會盡量早的將內容呈現到屏幕上，並不會等到全部的html都解析完成以後再去構建和佈局render樹，而是解析完一部分就渲染一部份內容。

reflow和repaint

迴流(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。

減小reflow/repaint

1. 若是須要頻繁的修改DOM樣式，儘可能經過預先定義好的css的clsss，而後修改DOM的className。
2. 不要把DOM節點的屬性值放在一個循環裏當成循環裏的變量
3. 爲須要添加動畫的HTML元素，添加上position:absolute/fixed屬性值，這樣修改該元素的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爲單位的寬高時，會帶來很是大的計算困擾，以下：

.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。

瀏覽器選擇哪一個盒模型，主要是看瀏覽器處於標準模式仍是怪異模式，在<DOCTYPE DTD="">標籤裏有DTD聲明，若是有DTD聲明，瀏覽器處於標準模式，沒有DTD聲明，瀏覽器處於怪異模式，處於怪異模式的瀏覽器按照自身的解析方式去解析，IE6會選擇IE盒模型，其餘現代瀏覽器都會採用W3C標準盒模型。IE6如下版本的瀏覽器沒有遵循W3C標準，不管頁面有沒有DTD聲明，它都是按照IE盒模型解析代碼。

margin屬性

margin:% | px，margin的值若是爲%，其是根據父元素的寬度來計算的，包括margin-top和margin-bottom，其值也是相對於父元素的寬度。而且內聯元素的margin-top/bottom是不容許設置的。

margin的合併

• margin在水平方向上不會合並
• margin在垂直方向會合並，其值爲二者最大值
• 元素設置有margin-top、margin-bottom且爲空內容，其margin上下也會重疊，其值爲二者最大值
• 父元素若是沒有padding、border等屬性時，其子元素的margin上下方向會和父元素的margin進行重疊

margin設置負值

• 位於普通文檔流中元素，負值至關於將元素向負值方向移動覆蓋，可是隻會覆蓋顏色，不會覆蓋文字。
• 對於position:relative元素，負值會徹底覆蓋前一個元素，會影響後面元素一塊兒移動
• 對於position:absolute元素，元素脫離了普通文檔流，對其餘元素沒有影響
• 對於float元素，能夠經過負值進行覆蓋，最多見的應用是三列布局。

padding屬性

• 值若是爲%，也是根據父元素寬度來計算的
• padding不存在合併的狀況
• padding也不存在負值狀況

Float屬性

• 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理解爲一個封閉的大箱子，箱子內部的元素不管如何翻江倒海都不會影響到外部。

觸發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等等