前端基礎（CSS相關原理）
一、層疊順序、層疊上下文、層疊等級
層疊順序
層疊順序是瀏覽器渲染顯示的一種規則。
層疊上下文
層疊上下文是對HTML元素的一個三維構想。HTML元素基於其元素屬性按照優先順序佔據這個空間。
- 層疊上下文可以理解爲一個節點在文檔中處於的一個與其他節點的一個層疊關係；
- 節點內部又可以獨立於它的兄弟節點，根據層疊規則產生一個層疊上下文；
- 子級層疊上下文的z-index值只有在父級中才有意義，比如父級的z-index在比其他節點低一級，那子節點無論z-index設置多高都不能變成最上層。
哪些條件會影響當前節點在自己在層疊上下問的位置？
- position 值爲 absolute（絕對定位）或 relative（相對定位）且 z-index 值不爲 auto 的元素；
- position 值爲 fixed（固定定位）或 sticky（粘滯定位）的元素（沾滯定位適配所有移動設備上的瀏覽器，但老的桌面瀏覽器不支持）
- opacity 屬性值小於 1 的元素（參見 the specification for opacity）；
- -webkit-overflow-scrolling 屬性值爲 touch 的元素；
- 以下任意屬性值不爲 none 的元素：
transform
filter
perspective
clip-path
mask / mask-image / mask-border
層疊等級
層疊等級是在同一個層疊上下文按照層疊規則下所產生的層級關係，也就是同一個層疊上下文在z軸的層疊順序。
二、盒模型
CSS的盒模型分爲IE盒模型和W3C標準盒模型。
IE盒模型：
width = 內容寬度 + border + padding
box-sizing：border-box；
W3C標準盒模型：
width = 內容寬度
box-sizing：content-box；
三、格式化上下文（ Formatting Context）
格式化上下文包括塊級格式上下文（Block Formatting Context）、內聯格式上下文（InlineFormatting Context）
頁面上的所有內容都是格式化上下文的一部分，或者是已定義爲以特定方式佈局內容的區域。
塊格式上下文（bfc）將根據塊佈局規則佈局子元素，每個格式上下文都有關於佈局在該上下文中的行爲的特定規則。
塊格式化上下文（Block formatting contexts）
文檔中使用塊佈局規則的最外層元素建立第一個或初始塊格式上下文。這意味着元素塊中的每個元素都是按照正常流程按照塊和內聯佈局規則進行佈局的。參與BFC的元素使用CSS框模型概述的規則，該模型定義了元素的邊距、邊框和填充如何與同一上下文中的其他塊交互。
塊格式化上下文對 浮動定位（ float) 與 清除浮動（ clear) 都很重要。浮動定位和清除浮動時只會應用於同一個BFC內的元素。浮動不會影響其它BFC中元素的佈局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。外邊距摺疊（Margin collapsing）也只會發生在屬於同一BFC的塊級元素之間。
應用場景：
- 解決浮動元素父元素高度坍塌的問題、元素被浮動元素覆蓋
- 外邊距margin合併的問題
- 流佈局功能
如何清楚浮動：
- 浮動元素的父元素設置overflow：hidden或display：flow-root；
- 在父元素後面插入一個空div，使用clear：both；
- 給父元素設置高度；
如何會產生一個塊格式化上下文
- 浮動元素（元素的 float 不是 none）
- 絕對定位元素（元素的 position 爲 absolute 或 fixed or sticky）
- 行內塊元素（元素的 display 爲 inline-block）
- 表格單元格或其他使用display：table-*屬性的元素（元素的 display爲 table-cell，HTML表格單元格默認爲該值）
- 表格標題（元素的 display 爲 table-caption，HTML表格標題默認爲該值）
- 匿名錶格單元格元素（元素的 display爲 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
- overflow 值不爲 visible 的塊元素
- display 值爲 flow-root 的元素 （推薦，將創建一個新的BFC而不會產生其他潛在的問題副作用）
- 彈性元素（display爲 flex 或 inline-flex元素的直接子元素）
- 網格元素（display爲 grid 或 inline-grid 元素的直接子元素）
- 多列容器（元素的 column-count 或 column-width 不爲 auto，包括 column-count 爲 1）
- IE下：zoom:1
行內格式化上下文（Inline formatting contexts）
行內格式上下文存在於其他格式上下文中，可以將其視爲段落的上下文。段落創建了一個內聯格式上下文，其中在文本中使用諸如<strong>、<a>或<span>元素等內容。
盒子模型不完全適用於參與內聯格式上下文的項。在水平書寫模式行中，水平填充、邊框和邊距將應用於元素，並左右推送文本。但是，不會應用元素上下的邊距。將應用垂直填充和邊框，但可能會在內容的上方和下方重疊，因爲在內聯格式上下文中，填充和邊框不會將行框推開。