在網路設計的世界裡，盒子模型是構建網頁佈局的基石，只有理解了盒子模型，我們才能更好的進行網頁佈局。
HTML中的每一個元素都可以看成是一個盒子，擁有盒子一樣的外形和平面空間，它不可見、不直觀，但無處不在，所以初學者很容易在這上面出問題。今天就讓我們來深入瞭解一下盒子模型。
一、盒子模型是什麼？
首先，我們來理解一下什麼是CSS盒子模型。
簡單來說，CSS盒子模型是CSS用來管理和佈局頁面上每一個元素的一種機制。每個HTML元素都可以被想象成一個矩形的盒子，這個盒子由內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）四個部分組成。
這四個部分共同作用，決定了元素在頁面上的最終顯示效果。
二、盒子模型的組成部分
一個盒子由外到內可以分成四個部分：margin（外邊距）、border（邊框）、padding（內邊距）、content（內容）。
其中margin、border、padding是CSS屬性，因此可以透過這三個屬性來控制盒子的這三個部分。而content則是HTML元素的內容。
下面來一一介紹盒子模型的各個組成部分：
2.1 內容（Content）
內容是盒子模型的中心，它包含了實際的文字、圖片等元素。內容區域是盒子模型中唯一不可或缺的部分，其他三部分都是可選的。
內容區的尺寸由元素的寬度和高度決定，但可以透過設定box-sizing屬性來改變這一行為。
下面透過程式碼例子來了解一下內容區：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid black;
padding: 10px;
margin: 20px;
box-sizing: content-box; /* 預設值 */
}
</style>
</head>
<body>
<div>這是一個盒子模型的例子。</div>
</body>
</html>
在這個例子中，.box類定義了一個具有特定樣式的
由於我們設定了box-sizing: content-box;（這是預設值），所以元素的寬度和高度僅包括內容區的尺寸。換句話說，元素的寬度是200px，高度是100px，不包括內邊距、邊框和外邊距。
如果我們將box-sizing屬性設定為border-box，則元素的寬度和高度將包括內容區、內邊距和邊框，但不包括外邊距。這意味著元素的總寬度將是234px（200px + 2 * 10px + 2 * 2px），高度將是124px（100px + 2 * 10px + 2 * 2px）。
總之，內容區是CSS盒子模型中的一個核心概念，它表示元素的實際內容所在的區域。透過調整box-sizing屬性，您可以控制元素尺寸是否包括內容區、內邊距和邊框。
2.2 內邊距（Padding）
內邊距是內容的緩衝區，它位於內容和邊框之間。透過設定內邊距，我們可以在內容和邊框之間建立空間，讓頁面看起來不會太過擁擠。
內邊距是內容區和邊框之間的距離，會影響到整個盒子的大小。
- padding-top: ; 上內邊距
- padding-left:; 左內邊距
- padding-right:; 右內邊距
- padding-bottom:; 下內邊距
程式碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*
1、 padding-top: ; 上內邊距
padding-left:; 左內邊距
padding-right:; 右內邊距
padding-bottom:; 下內邊距
2、padding簡寫 可以跟多個值
四個值 上 右 下 左
三個值 上 左右 下
二個值 上下 左右
一個值 上下左右
*/
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
/* padding-top:30px ;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px; */
padding: 40px;
border: 10px transparent solid;
}
.box1:hover {
border: 10px red solid;
}
/*
* 建立一個子元素box2佔滿box1，box2把內容區撐滿了
*/
.box2 {
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
2.3 邊框（Border）
邊框圍繞在內邊距的外圍，它可以是實線、虛線或者其他樣式。邊框用於定義內邊距和外邊距之間的界限，同時也起到了美化元素的作用。
邊框屬於盒子邊緣，邊框裡面屬於盒子內部，出了邊框都是盒子的外部，設定邊框必須指定三個樣式 邊框大小、邊框的樣式、邊框的顏色
- 邊框大小：border-width
- 邊框樣式：border-style
- 邊框顏色：border-color
程式碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box {
width: 0px;
height: 0px;
/* background-color: rgb(222, 255, 170); */
/* 邊框的大小 如果省略，有預設值，大概1-3px ，不同的瀏覽器預設大小不一樣
border-width 後可跟多個值
四個值 上 右 下 左
三個值 上 左右 下
二個值 上下 左右
一個值 上下左右
單獨設定某一邊的邊框寬度
border-bottom-width
border-top-width
border-left-width
border-right-width
*/
border-width: 20px;
/* border-left-width:40px ; */
/*
邊框的樣式
border-style 可選值
預設值：none
實線 solid
虛線 dashed
雙線 double
點狀虛線 dotted
*/
border-style: solid;
/* 設定邊框的顏色 預設值是黑色
border-color 也可以跟多個值
四個值 上 右 下 左
三個值 上 左右 下
二個值 上下 左右
一個值 上下左右
對應的方式跟border-width是一樣
單獨設定某一邊的邊框顏色
border-XXX-color: ;
*/
border-color: transparent transparent red transparent ;
}
.box1{
width: 200px;
height: 200px;
background-color: turquoise;
/* 簡寫border
1、 同時設定邊框的大小，顏色，樣式，沒有順序要求
2、可以單獨設定一個邊框
border-top:; 設定上邊框
border-right 設定右邊框
border-bottom 設定下邊框
border-left 設定左邊框
3、去除某個邊框
border:none;
*/
border: blue solid 10px;
border-bottom: none;
/* border-top:10px double green ; */
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
2.4 外邊距（Margin）
外邊距是元素與外界的間隔，它決定了元素與其他元素之間的距離。透過調整外邊距，我們可以控制元素之間的相互位置關係，從而影響整體佈局。
- margin-top:; 正值 元素向下移動 負值 元素向上移動
- margin-left:; 正值 元素向右移動 負值 元素向左移動
- margin-bottom:; 正值 元素自己不動，其靠下的元素向下移動，負值 元素自己不動，其靠下的元素向上移動
- margin-right: ; 正值負值都不動
程式碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/* 外邊距 不會影響到盒子的大小
可以控制盒子的位置
margin-top:; 正值 元素向下移動 負值 元素向上移動
margin-left:; 正值 元素向右移動 負值 元素向左移動
margin-bottom:; 正值 元素自己不動，其靠下的元素向下移動，負值 元素自己不動，其靠下的元素向上移動
margin-right: ; 正值負值都不動
簡寫 margin 可以跟多個值
規則跟padding一樣
*/
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid red;
/* margin-top: -100px;
margin-left: -100px;
margin-bottom: -100px;
margin-right: -100px; */
margin: 40px;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
三、盒子的大小
盒子的大小指的是盒子的寬度和高度。大多數初學者容易將寬度和高度誤解為width和height屬性，然而預設情況下width和height屬性只是設定content（內容）部分的寬和高。
盒子真正的寬和高按下面公式計算
- 盒子的寬度 = 內容寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距
- 盒子的高度 = 內容高度 + 上填充 + 下填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距
我們還可以用帶屬性的公式表示：
- 盒子的寬度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
- 盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
上面說到的是預設情況下的計算方法，另外一種情況下，width和height屬性設定的就是盒子的寬度和高度。盒子的寬度和高度的計算方式由box-sizing屬性控制。
想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合程式碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這裡前往學習哦！
box-sizing屬性值
content-box： 預設值，width和height屬性分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距、邊框、外邊距。
border-box： 為元素設定的width和height屬性決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。透過從已設定的寬度和高度分別減去 邊框 和 內邊距 才能得到內容的寬度和高度。
inherit： 規定應從父元素繼承box-sizing屬性的值
- 當box-sizing：content-box時，這種盒子模型成為標準盒子模型；
- 當box-sizing: border-box時，這種盒子模型稱為IE盒子模型。
四、盒子模型應用技巧
掌握了盒子模型的基本概念後，我們就可以開始創造性地應用它來設計網頁。以下是一些技巧：
-
使用內邊距來建立呼吸空間，不要讓內容緊貼邊框，這樣可以讓頁面看起來更加舒適。
-
巧妙運用邊框來分隔內容區域，或者為特定的元素新增視覺焦點。
-
利用外邊距實現元素間的對齊和分組，保持頁面的整潔和組織性。
-
考慮使用負邊距來實現重疊效果，創造出獨特的層次感和視覺衝擊力。
CSS盒子模型是前端開發的精髓之一，它不僅幫助我們理解和控制頁面佈局，還為我們提供了無限的創意空間。現在，你已經掌握了盒子模型的奧秘，是時候在你的專案中運用這些知識，創造出令人驚歎的網頁設計了。
記住，每一個細節都可能是打造卓越使用者體驗的關鍵。開啟你的CSS盒子模型之旅，讓我們一起構建更加精彩、更加互動的網頁世界！