盒子模型是CSS中一個非常重要的知識點，盒子模型相當於組成一個個頁面的 磚頭，所以盒子模型是CSS中的重中之重。
在CSS中，所有的HTML標籤都可以看做是矩形的盒子（長方形盒子），盒子模型是由border、padding、width、height四部分構成。
一個頁面局可以看做是很多盒子模型構成的。
上圖就是一個盒子模型的各部分結構，任何一個HTML標籤都可以看做是一個盒子模型。
在盒子模型中，首先最外面是一個邊框，邊框裡面是內容，有時候盒子的內容和邊框並不是緊緊挨著的，而是隔著一定的距離，邊框的內壁到內容之間的距離就是padding，padding也叫內邊距。
就像你網購了一個東西，是用紙盒子包裝的，紙盒的內壁和你這個東西之間一般是有空隙的，padding就可以看做是盒子和東西之間的空隙的大小。
而我們一直給HTML標籤設定的width和height，實際上是內容的寬度和高度，而不是盒子總的寬度和高度。
盒子的總寬度=左右border+左右padding+width
盒子的總高度=上下border+上下padding+height
接下來，我在vscode和瀏覽器中演示一下盒子模型。我建立了一個新的頁面叫"盒子模型.html"，程式碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型</title> <style> .box { width: 300px; height: 200px; color:#fff; font-size: 20px; background-color: red; }</style></head><body> <div class="box"> 深愛總遲解，將愛卻晚秋。 </div></body></html>我建立了一個類名為box的div，我給這個div設定了width為300px，和height為200px，它們是這個div中內容的寬度和高度，並不是這個div的總寬度和總高度。
在瀏覽器中效果如下：
我們看到紅色背景區域就是這個div盒子的內容區域，文字是貼著紅色的邊顯示的。
現在我給這個div新增一個border和padding的屬性，程式碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型</title> <style> .box { width: 300px; height: 200px; color:#fff; font-size: 20px; background-color: red; /* 新增邊框，快捷鍵bd ,邊框的寬度20畫素，顏色是金色*/ border: 20px solid gold; /* 新增內邊距為20畫素*/ padding: 20px; }</style></head><body> <div class="box"> 深愛總遲解，將愛卻晚秋。 </div></body></html>我給這個div添加了一個金色的邊框，寬度是20畫素，又添加了內邊距為20畫素，效果如下：
此時，我們就看到外面多了一個金色的邊框，文字和邊框之間具有了一定的空隙了。
此時，這個div的內容的寬度還是300px，高度還是200px，
盒子的總寬度=20畫素的左邊框+20畫素的右邊框+20畫素的左內邊距+20畫素的右內邊距+內容的寬度300畫素=380px
盒子的總高度=20畫素的上邊框+20畫素的下邊框+20畫素的上內邊距+20畫素的下內邊距+內容的高度200畫素=280px
在這個盒子的模型圖上，就能看到margin（盒子的外邊距，我們沒設定，所以沒有數值）、border寬度為20畫素，內邊距padding上下左右都是20畫素，內容寬高為300*200。
當咱們把滑鼠滑到除錯面板的盒子模型圖上的某一個部分時，頁面上的盒子的相應部分也會閃爍。比如把滑鼠滑到盒子模型圖上的padding上時，頁面上的padding區域就會變一個顏色，讓你知道這一塊是padding。
總結：任何一個HTML標籤都可以看做一個"盒子"，盒子模型包括這個標籤的上下左右四個邊框、上下左右四個內邊距、內容的寬度width和內容的高度height。