1 外邊距問題

典理情形一：

• 結構關系：嵌套塊元素的垂直外邊距塌陷

• 問題描述：當父元素沒有padding，margin，border時子元素與父元素直接相鄰、子元素的margin值會傳遞給父元素并且再次與父元素的margin值發生合并最終的結果是正值取兩者中的較大值，負值取絕對值較大的值。

• 表現：父子元素公用一個外邊距

• 解決方法

  • 給父元素設置邊框或內邊距（慎用）

  • 父元素overflow:hidden，改變規則

典型情形二：

• 結構關系：相鄰元素垂直外邊距合并

• 問題描述：當兩個塊級兄弟元素垂直方向上的margin值直接相遇，會發生合并，最終結果是正值取兩者中的較大值，負值取絕對值較大的值

• 表現：兩個外邊距合并成一個

• 解決方法

  • 盡量只定義其中一個的margin值

  • 給其中一個盒子加父元素overflow:hidden，改變渲染規則

• 其他情況同上【簡單帶過如后代元素出現同類問題等】

1.2 總結

• 設問通過對盒模型的實際使用對比出它與快遞盒子的不同之處

• 總結盒子模型占位的計算：width/height + padding + margin

• 提示學生注意實際開發的過程中要明確測量的寬高是內容寬還是包括了padding的占位寬高

• 垂直方向上相遇的margin值出現折疊問題

2、CSS顯示模式

概述：顯示模式是指元素以什么方式顯示，如div默認獨占一行，span默認可以多個在一行排列，了解它們的特點與分類可以更好的布局網頁。HTML元素一般分為塊級元素與行內元素、行內塊元素三大顯示模式。

2.1、元素默認顯示模式與元素特性總結

• 本身屬性為display:block的元素稱為塊級元素

  • 常見塊級元素 div，h1-h6，p，ul，li，dl，dt，ol

• 本身屬性為display:inline的元素稱為行級元素

  • 常見行級元素：span，strong，em，i，a，b

• 本身屬性為display:inline-block的元素稱為行級塊元素

  • 常見行內塊元素：img，input(表單元素后續會講到)

2.2、塊級元素特性總結

• 獨成一行，可以設置寬高

• 在不設置寬度的情況下，塊級元素的寬度是它父級元素內容的寬度

• 在不設置高度的情況下，塊級元素的高度是它本身內容的高度

• 可以設置上下左右的內邊距和外邊距

2.3、行內元素特性總結

• 默認并排，不可以設置寬高，寬高取決于內容

• 行內元素只能容納文本或者其他內聯元素（此處請注意，不要在內聯元素中嵌套塊級元素）

• 行標簽之間有間隙，不可以設置上下外邊距

2.4、行內塊元素特性總結

• 默認并排，可以設置寬高，寬高取決于內容

• 可以設置任意方向的內邊距和外邊距

• 并排時中間有間距

2.5、元素類型轉換

特殊情況下我們需要進行元素的模式轉換，改變默認元素模式使其擁有另一種元素模式的特性，使用display屬性能夠將三者任意轉換。

• display:inline轉換為行內元素 【不常用】

• display:block轉換為塊狀元素 【常用】

• display:inline-block轉換為行內塊狀元素 【比較常用】