重拾css(8)——盒子模型

1.引言

從這一節開始，咱們就進入本系列的第三部分——css呈現。本部分將描述css在頁面的幾種佈局和呈現的特性。包括兩類：文字、塊。
第一類——文字。這部分相對比較簡單一些，例如設置字號、字體、顏色、背景色、是否加粗等。重點的地方在於設置字體、設置行高、文字相關的距離都儘可能用相對值（em）。另外還有一個重點，就是web端最流行的字體庫fontAwesome，可參見《請用fontAwesome代替網頁icon小圖標》，這裏就再也不重複去講了。

2.什麼是「盒子」

padding，border和margin，即內邊距、邊框、外邊距，它們三者就構成了一個「盒子」。好比收到的快遞，原本買了一個小小的iphone，收到的倒是那麼大一個盒子。由於iphone白色包裝盒與iphone機器之間有間隔層（內邊距），iphone白色盒子有厚度，雖然很薄（邊框），盒子和快遞箱子之間還有一層泡沫板（外邊距）。這就是一個典型的盒子。

如上圖，真正的內容就是這些文字，文字外圍有10px的內邊距，5px的border，10px的外邊距。

3.盒子的寬度

3.1 設置固定寬度的狀況

在盒子模型中，咱們設置的寬度都是內容寬度，不是整個盒子的寬度。而整個盒子的寬度是：（內容寬度 + padding寬度 + border寬度 + margin寬度）之和。這樣咱們改四個中的其中一個，都會致使盒子寬度的改變。這對咱們來講不友好。

　　不要緊，這個東西不友好早就有人發現了，並且已經解決，下文再說。

3.2 充滿父容器的狀況

默認狀況下，div的display:block，不設置固定寬度時，寬度會充滿整個父容器。
可是別忘記，這個div是個盒子模型，它的整個寬度包括（內容寬度 + padding寬度 + border寬度 + margin寬度），是整個的寬度充滿了父容器。
問題就在這裏。若是父容器寬度不變，咱們手動增大margin、border或padding其中一項的寬度值，都會致使內容寬度的減小。極端狀況下，若是內容的寬度壓縮到不能再壓縮了（例如一個字的寬度），那麼瀏覽器會強迫增長父容器的寬度。這可不是咱們想要看到的。

3.3 包裹內容的狀況

這種狀況下比較簡單，盒子的寬度將隨着內容寬度的增長而增長。

4.再看盒子的寬度

前面提到，爲盒子模型設置寬度，結果只是設置了內容的寬度，這個不合理。如何解決這一問題？答案就是：box-sizing:border-box

如上圖，div設置了box-sizing:border-box;以後，盒子寬度300px就變爲（內容寬度 + padding寬度 + border寬度）之和（不包括margin寬度），這樣就比較符合咱們的實際要求了。
建議你們在爲系統寫css時候，第一個樣式是：

大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 選擇器中，咱們爲何不這樣作呢？

5.margin的縱向重疊

切記，margin有一個特性——縱向重疊，以下圖，<p>的縱向margin是16px，那麼兩個<p>之間縱向的距離按常理來講應該是 16 + 16 = 32px，可是答案仍然是 16px。由於縱向的margin是會重疊的，大的會把小的「吃掉」（能夠本身去實驗）。

6.用div畫「三角」

「三角」在平常的網頁中是很常見的，例如百度首頁：

你固然可使用背景圖片、fontAwesome來實現這一效果，可是你也能夠用div來實現這一效果，很簡單，並且能夠封裝通用：

原理很簡單：只讓一側border顯示，另外三側都設爲透明。