1 外邊距問題

典理情形一：

• 結(jié)構(gòu)關(guān)系：嵌套塊元素的垂直外邊距塌陷

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

• 表現(xiàn)：父子元素公用一個外邊距

• 解決方法

  • 給父元素設置邊框或內(nèi)邊距（慎用）

  • 父元素overflow:hidden，改變規(guī)則

典型情形二：

• 結(jié)構(gòu)關(guān)系：相鄰元素垂直外邊距合并

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

• 表現(xiàn)：兩個外邊距合并成一個

• 解決方法

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

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

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

1.2 總結(jié)

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

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

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

• 垂直方向上相遇的margin值出現(xiàn)折疊問題

2、CSS顯示模式

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

2.1、元素默認顯示模式與元素特性總結(jié)

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

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

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

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

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

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

2.2、塊級元素特性總結(jié)

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

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

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

• 可以設置上下左右的內(nèi)邊距和外邊距

2.3、行內(nèi)元素特性總結(jié)

• 默認并排，不可以設置寬高，寬高取決于內(nèi)容

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

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

2.4、行內(nèi)塊元素特性總結(jié)

• 默認并排，可以設置寬高，寬高取決于內(nèi)容

• 可以設置任意方向的內(nèi)邊距和外邊距

• 并排時中間有間距

2.5、元素類型轉(zhuǎn)換

特殊情況下我們需要進行元素的模式轉(zhuǎn)換，改變默認元素模式使其擁有另一種元素模式的特性，使用display屬性能夠?qū)⑷呷我廪D(zhuǎn)換。

• display:inline轉(zhuǎn)換為行內(nèi)元素 【不常用】

• display:block轉(zhuǎn)換為塊狀元素 【常用】

• display:inline-block轉(zhuǎn)換為行內(nèi)塊狀元素 【比較常用】