如何理解CSS的盒子模型

當我們在寫一個html頁面時，頁面中的每一個元素都相當于一個盒子。在網頁上右鍵選擇“檢查”時，我們可以在開發者工具的Element選項中看到頁面中有哪些元素，點擊某一個元素，可以看到該元素的寬高和背景色等信息，同時下方會展示一個方框套一個方框的盒子，上面標注有尺寸信息，如下圖所示。我們在學習盒子模型時首先要了解三個概念：border是盒子的邊框，相當于盒子的四個擋板，可以設置顏色（border-color），寬度（border-width），樣式（border-style），邊框可以用連寫模式（borde

工具/材料

Sublime Text3

操作方法

01
我們通過一個案例來講解盒子模型，假設有一個寬400px高300px背景顏色是粉色的大盒子，有一個寬200px高140px背景顏色為紅色的小盒子，我們在不改變盒子大小的情況下，將小盒子放入大盒子的中心位置，如何實現呢？我們創建一個html頁面，在<body>標簽中設置一個div，class取值為big，在div中再嵌套一個div，class取值為small。然后我們在<head>標簽中添加<style>標簽用于設置css的樣式，如下圖所示，其中.big和.small均為類選擇器。
02
在Sublime Text3的代碼編輯區域，右鍵選擇Open in Browser，在瀏覽器中打開該頁面，如下圖所示。我們可以看到此時大盒子和小盒子均在頁面顯示了，但是小盒子的位置卻在大盒子的右上角。
03
那如何將小盒子設置到大盒子的中間位置呢？此時我們最先想到的便是設置padding，即設置上下左右的內邊距，我們使用大盒子和長寬減去小盒子的長寬，計算出大盒子的內邊距上下為80px，左右為100px，因此在大盒子中設置padding：80px 100px，第一個值代表上下，第二個值代表左右，中間用空格隔開。
04
在瀏覽器中打開后，我們發現小盒子非但沒有設置在大盒子的中間，反而使大盒子變大了，這違背了題目中不可以改變盒子大小的前提。
05
那如何才能不改變盒子的大小呢？我們思考一下，當盒子中增加了填充物，又不想改變盒子的大小，只能改變盒子的內容了，因此我們在盒子原有的寬高上面減去padding增加的上下左右寬高，此時大盒子的寬變為200px，高變為140px。
06
在瀏覽器中打開我們可以看到小盒子中大盒子的中間，正是我們想要的效果。此時再提醒一下大家，我們設置的寬高其實是元素內容的寬高。因此在這里總結一下盒子寬高的計算公式，盒子的寬度為：border-left-width+padding-left+width+padding-right+border-right-width，盒子的高度為：border-top-width+padding-top+height+padding-bottom+border-bottom-width。
07
上面的公式清晰的表示了盒子大小的計算方法，此時我們只給大盒子設置上和左的padding，同時大盒子的內容寬和高只減去上和左padding的大小，可以達到同樣的效果。
08
我們在設置padding時將右側和底部的值設置為0，同時寬度在原來400px的基礎上減去100px，高度在原來300px的基礎上減去80px，在瀏覽器中查看的效果如下圖所示，和步驟6的結果是一致的。
09
接著我們為大小盒子添加邊框（border），根據步驟6的公式我們可以看出border的寬度也會算在盒子的大小中，因此我們如果需要加上邊框的話，還需要調整其他值的大小。我們先來看小盒子，給小盒子的邊框設置為5px，那個在不改變小盒子大小的前提下，我們需要將小盒子的寬度減去10px變為190px，高度減去10px，變為130px。大盒子的設置我們緊接著步驟6的值來修改，在步驟6中我們可以看到大盒子的內容和小盒子的大小寬高是一致的，此時如果給大盒子添加10px的邊框，不能再改變大盒子內容的寬高了，因此我們想到可以減少padding的值，因此分別將padding的值減少10px即可。
10
將大小盒子的設置改為上圖的設置即可，此時我們打開瀏覽器會看到盒子的效果同步驟6。此時我們發現還有一個margin的設置沒有用上，margin是用于設置盒子之間的距離，不影響盒子模型的計算。很多標簽默認帶有margin和padding,所以將來在進行頁面布局的時候一定要清除這些標簽默認的margin和padding。
End