前端基礎（二）

CSS

z-index（層疊上下文）

• CSS2.1時代
  
  當元素髮生層疊的時候，其覆蓋關係遵循下面2個準則：【張鑫旭】

• 誰大誰上：當具有明顯的層疊水平標示的時候，如識別的z-indx值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個。通俗講就是官大的壓死官小的。

• 後來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處於後面的元素會覆蓋前面的元素。

盒模型

• 標準模型：width/height = content
• IE模型：width/height = content + border + padding

改變盒模型

• box-sizing：用來改變計算盒子高度/寬度的默認盒子模型
  1. 關鍵字值: box-sizing: content-box; box-sizing: border-box; 2.全局值: box-sizing: inherit; box-sizing: initial; box-sizing: unset;
  注意： border-box的誕生，主要就是解決content-box的最大缺點。border-box意味着子容器的padding和border的厚度都算在50%之內，這樣，你可以隨意的修改padding和border的厚度值，根本不用擔心父容器被撐爆。

BFC(塊格式化上下文)

• 解決普通文檔流塊元素的外邊距摺疊問題
• BFC清除浮動
• 阻止普通文檔流元素被浮動元素覆蓋
• 自適應兩欄佈局

如何觸發BFC

1. 根元素或包含根元素的元素
2. 浮動元素（元素的 float 不是 none）
3. 絕對定位元素（元素的 position 爲 absolute 或 fixed）
4. 行內塊元素（元素的 display 爲 inline-block）
5. 表格單元格（元素的 display爲 table-cell，HTML表格單元格默認爲該值）
6. 表格標題（元素的 display 爲 table-caption，HTML表格標題默認爲該值）
7. 匿名錶格單元格元素（元素的 display爲 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
8. overflow 值不爲 visible 的塊元素
9. display 值爲 flow-root 的元素
10. contain 值爲 layout、content或 strict 的元素
11. 彈性元素（display爲 flex 或 inline-flex元素的直接子元素）
12. 網格元素（display爲 grid 或 inline-grid 元素的直接子元素）
13. 多列容器（元素的 column-count 或 column-width 不爲 auto，包括 column-count 爲 1）
14. column-span 爲 all 的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中（標準變更，Chrome bug）。

選擇器優先級

• !important > 行內樣式 > #id > .class > tag > * > 繼承 > 默認
• 選擇器 從右往左 解析