妙知谷如何理解CSS的盒子模型
- IT技術
- 關注：1.32W次
當我們在寫一個html頁面時，頁面中的每一個元素都相當於一個盒子。在網頁上右鍵選擇“檢查”時，我們可以在開發者工具的Element選項中看到頁面中有哪些元素，點擊某一個元素，可以看到該元素的寬高和背景色等信息，同時下方會展示一個方框套一個方框的盒子，上面標註有尺寸信息，如下圖所示。我們在學習盒子模型時首先要了解三個概念：border是盒子的邊框，相當於盒子的四個擋板，可以設置顏色（border-color），寬度（border-width），樣式（border-style），邊框可以用連寫模式（border:border-width border-style border-color）；padding是盒子的內邊距，相當於盒子的填充物，用於設置盒子的內容和邊框之間的距離；margin用於設置盒子之間的距離。
操作方法
（01）我們通過一個案例來講解盒子模型，假設有一個寬400px高300px背景顏色是粉色的大盒子，有一個寬200px高140px背景顏色為紅色的小盒子，我們在不改變盒子大小的情況下，將小盒子放入大盒子的中心位置，如何實現呢？我們創建一個html頁面，在<body>標籤中設置一個div，class取值為big，在div中再嵌套一個div，class取值為small。然後我們在<head>標籤中添加<style>標籤用於設置css的樣式，如下圖所示，其中和l均為類選擇器。
（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。
特別提示
注意padding的設置一般會改變盒子的大小，特殊情況除外。
- 文章版權屬於文章作者所有，轉載請註明 https://miaozhigu.com/sm/itjishu/go7dvy.html
