## 1\. 引言 　　從這一節開始，我們就進入本系列的第三部分——css呈現。本部分將描述css在頁面的幾種布局和呈現的特性。包括兩類：文字、塊。 　　第一類——文字。這部分相對比較簡單一些，例如設置字號、字體、顏色、背景色、是否加粗等。重點的地方在于設置字體、設置行高、文字相關的距離都用相對值，這些東西在《[css知多少（4）——解讀瀏覽器默認樣式](http://www.cnblogs.com/wangfupeng1988/p/4280801.html)》那一節已經說過了。另外還有一個重點，就是web端最流行的字體庫fontAwesome，關于它我之前有一篇文章專門講過，請參見《[請用fontAwesome代替網頁icon小圖標](http://www.cnblogs.com/wangfupeng1988/p/4129500.html)》，這里就不再重復去講了。 ?????? 第二類——塊。這部分的知識點非常多，重要的有：盒子模型，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的這一特性——縱向重疊。如下圖，的縱向margin是16px，那么兩個之間縱向的距離是多少？ 　　按常理來說應該是 16 + 16 = 32px，但是答案仍然是 16px。因為縱向的margin是會重疊的，大的會把小的“吃掉”（可以自己去實驗）。 ?????? ## 6\. 用div畫“三角” 　　“三角”在日常的網頁中是很常見的，例如百度首頁： 　　 　　以及我的開源項目wangEditor（http://www.cnblogs.com/wangfupeng1988/p/4198428.html）中的頁面效果： 　　 　　你當然可以使用背景圖片、fontAwesome來實現這一效果，但是你也可以用div來實現這一效果，很簡單，而且可以封裝通用： ?????? ## 7\. 總結 　　這一節我們用不小的篇幅講解了盒子模型的相關知識，比較適合初學者，但是更加適合那些沒有系統學習過css的有經驗的開發人員，還是那句話：建議大家系統的學習知識體系。 　　下面我們將繼續這一部分，再說一說float。