CSS 文檔流 和 盒模型

CSS第二彈 概念簡介！

十分關鍵！

幾個重要概念：

• 文檔流 Normal Flow
• 塊、內聯、內聯塊
• margin合併
• 兩種盒模型（border-box用的更多）

---

1.文檔流方向

流動方向

• inline元素從左到右，到達最右邊纔會換行
• block元素從上到下，每個都另起一行
• inline-block也是從左到右，可是元素不會由於有邊界而截斷

寬度

• inline寬度爲內部元素之和，不能用width指定
• block默認自動計算寬度，通常爲一行長，可用width指定
• inline-block結合前二者特色，可用width

高度

• inline高度由line-height間接肯定，跟height無關
• block高度由內部文檔流元素決定，能夠設height
• inline-block跟block相似，能夠設置height

注意：可用display:inline-block;指定元素類型，沒有絕對的元素類型

---

2. overflow溢出

當內容大於容器時，

等內容寬度或高度大於容器的，會溢出

故用overflow屬性來設置是否顯示滾動條

.rainbow {
  overflow: auto;
  height: 200px;
  border: 2px solid;
}
複製代碼

• auto:自動設置（本圖形有溢出，故自動設置爲scroll）

  

• scroll: 滾動

• hidden: 隱藏溢出部分

• visible：直接顯示溢出的部分

注意：overflow可設置爲 overflow-x 和 overflow-y

---

3. 脫離文檔流

block高度由內部文檔流元素決定，能夠設置height

可是有些元素能夠不在文檔流中

使用以下屬性，會脫離文檔流:

• float
• position:absolute/fixed

---

4. 盒模型

CSS 盒模型有兩種，一種是 content-box 一種是 border-box。content-box 的寬度 width 表示內容區的寬度，不包含 padding 和 border；border-box 的寬度 width 表示內容區 + padding + border 的總和。通常優先使用後者。

---

5. margin合併

通常上下margin會合並

• 父子margin合併
• 兄弟margin合併

之因此設計合併是爲了方便，不用以目標寬度除以2

解決辦法：

1.父子合併

• 用padding/border擋住
• 用overflow：hidden擋住
• 用display：flex

2.兄弟合併

• 用inline-block