css知多少（7）——盒子模型

1. 引言

　　從這一節開始，咱們就進入本系列的第三部分——css呈現。本部分將描述css在頁面的幾種佈局和呈現的特性。包括兩類：文字、塊。

　　第一類——文字。這部分相對比較簡單一些，例如設置字號、字體、顏色、背景色、是否加粗等。重點的地方在於設置字體、設置行高、文字相關的距離都用相對值，這些東西在《css知多少（4）——解讀瀏覽器默認樣式》那一節已經說過了。另外還有一個重點，就是web端最流行的字體庫fontAwesome，關於它我以前有一篇文章專門講過，請參見《請用fontAwesome代替網頁icon小圖標》，這裏就再也不重複去講了。

       第二類——塊。這部分的知識點很是多，重要的有：盒子模型，float，position，display。本文章講盒子模型，後面的文章會依次介紹其餘的內容。

2. 什麼是「盒子」

　　說道「盒子」我還記得好幾年以前，我還在上大學的時候，被人問道過「盒子模型」，我當時都不知道什麼意思。回到宿舍急忙上網去查，原來就是我早就知道的margin，padding和border，可是我居然不知道「盒子」這個詞。——因此，不要只知足於網上查來的代碼段、小技巧，要全面的瞭解一些知識體系。固然，後來我又知道，盒子模型不只僅是margin，padding和border，還有其餘的知識。

　　在此插一句題外話，也是我這幾天思考的一點東西。我在思考：web前端的這麼知識應該是怎樣的一個知識體系架構？以前我覺得能夠以W3C爲綱要，把W3C的東西學會了就夠了。後來發現我錯了，W3C還不全面。

　　真正全面的覆蓋了web前端知識體系的東西是——瀏覽器內核——這並非說讓你去詳細瞭解瀏覽器內核、作出一個瀏覽器。瀏覽器是web前端代碼運行的一個平臺，瀏覽器內核裏有哪些模塊，咱們就須要去學習哪些東西。詳細的先不說，之後有機會再分享。

　　這裏照顧一下初學者。初學css的朋友，一開始學css基礎知識的時候必定學過padding，border和margin，即內邊距、邊框、外邊距。他們三者就構成了一個「盒子」。就像咱們收到的快遞，原本買了一個小小的iphone，收到的確實那麼大一個盒子。由於iphone白色的包裝盒和iphone機器之間有間隔層（內邊距），iphone白色盒子有厚度，雖然很薄（邊框），盒子和快遞箱子之間還有一層泡沫板（外邊距）。這就是一個典型的盒子。

　　

　　如上圖，真正的內容就是這些文字，文字外圍有10px的內邊距，5px的border，10px的外邊距。看到盒子了吧？

3. 盒子的寬度

3.1.    設置了固定寬度的狀況下

　　遇到這種問題，我建議在查詢各類資料以前，不如先本身動手作一個實驗：

　　

　　如上圖，獲得網頁效果以後，咱們能夠用截圖工具來量一下文字內容的寬度。發現，文字內容的寬度恰好是300px，就是咱們設置的寬度。

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

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

3.2.    充滿父容器的狀況下

　　默認狀況下，div的display:block，寬度會充滿整個父容器。以下圖：

　　

　　可是別忘記，這個div是個盒子模型，它的整個寬度包括（內容寬度 + border寬度 + padding寬度 + margin寬度），整個的寬度充滿父容器。

　　問題就在這裏。若是父容器寬度不變，咱們手動增大margin、border或padding其中一項的寬度值，都會致使內容寬度的減小。極端狀況下，若是內容的寬度壓縮到不能再壓縮了（例如一個字的寬度），那麼瀏覽器會強迫增長父容器的寬度。這可不是咱們想要看到的。

3.3.    包裹內容的狀況下

　　這種狀況下比較簡單，內容的寬度按照內容計算，盒子的寬度將在內容寬度的基礎上再增長（padding寬度 + border寬度 + margin寬度）之和。

　　

4. 再看盒子的寬度

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

　　

　　如上圖，div設置了box-sizing:border-box以後，300px的寬度是內容 + border + 邊框的寬度（不包括margin），這樣就比較符合咱們的實際要求了。

　　建議你們在爲系統寫css時候，第一個樣式是：

      

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

5. 縱向margin的重疊

　　這裏提到margin，不得不提一下margin的這一特性——縱向重疊。以下圖，<p>的縱向margin是16px，那麼兩個<p>之間縱向的距離是多少？

　　按常理來講應該是 16 + 16 = 32px，可是答案仍然是 16px。由於縱向的margin是會重疊的，大的會把小的「吃掉」（能夠本身去實驗）。

      

6. 用div畫「三角」

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

　　

　　以及個人開源項目wangEditor（http://www.cnblogs.com/wangfupeng1988/p/4198428.html）中的頁面效果：

　　

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

      

7. 總結

　　這一節咱們用不小的篇幅講解了盒子模型的相關知識，比較適合初學者，可是更加適合那些沒有系統學習過css的有經驗的開發人員，仍是那句話：建議你們系統的學習知識體系。

　　下面咱們將繼續這一部分，再說一說float。

---------------------------------------------------------------

本系列的目錄頁面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html

-------------------------------------------------------------------------------------------------------------

學習做者教程：《前端JS高級面試》《前端JS基礎面試題》《React.js模擬大衆點評webapp》《zepto設計與源碼分析》《json2.js源碼解讀》

也歡迎關注個人開源項目——wangEditor，簡潔易用的web富文本編輯器

-------------------------------------------------------------------------------------------------------------