目錄
Content
Padding
Border
Margin
盒子模型計算方式
使用 box-sizing 屬性控制盒子模型的計算
所有的HTML元素都可以看作像下圖這樣一個矩形盒子：
這個模型包括了四個區域：content（內容區域）、padding（內邊距）、border（邊框）和 margin（外邊距）
Content
內容區域是盒子模型的最核心部分，包含了元素的實際內容，例如文本、圖片、視頻、按鈕等
內容區域的大小由元素的 width 和 height 屬性決定。通常，CSS 的 width 和 height 只會影響內容區域的尺寸，padding、border 和 margin 不會計入該區域的尺寸。例如想要設置一個 div 元素的寬度為 300px，那么該 div 的內容區域的寬度就為 300px：
div {width: 300px;height: 150px;
}
Padding
內邊距是內容區域與邊框之間的空間，通過調整 padding，可以控制內容與邊框之間的距離
例如，增加內邊距可以使文本遠離邊框，提升可讀性
div {padding: 20px;
}
上述代碼會在 div 元素的所有邊緣（上、右、下、左）添加 20px 的內邊距
同樣，也可以單獨設置四個方向的內邊距：padding-top、padding-right、padding-bottom、padding-left
Border
邊框圍繞內容區域和內邊距的外部，是一個可視的邊界。邊框的樣式、寬度和顏色可以自定義
影響元素邊界的屬性：border-width、border-style、border-color
div {border: 3px solid black;
}
上述代碼會給 div 元素添加一個 3px 寬的黑色實線邊框
圓角邊框：
使用border-radius屬性來設置圓角框的半徑
border-radius:10pxborder-radius 可以接收 1 到 4 個值，決定了每個角的半徑
- 1個值：四個角相同
- 2個值：第一個值為水平半徑，第二個值為垂直半徑
- 3個值：前兩個為左右角，最后一個為上下角的半徑
- 4個值：依次為左上、右上、右下、左下的圓角半徑
Margin
外邊距是盒子與其他元素之間的空隙，用來控制元素間的距離
外邊距不會影響元素的實際大小，但它會改變元素與其他元素之間的間距
div {margin: 20px;
}
上述代碼會在 div 元素的四個方向添加 20px 的外邊距，增加元素與其他元素之間的間距
同樣也可以設置四個單獨方向的外邊距：margin-top、margin-right、margin-bottom、margin-left
控制塊居中：
margin:auto;盒子模型計算方式
默認情況下，CSS 中的寬度和高度只包括 內容區域，不包括內邊距、邊框和外邊距。
因此，元素的總大小大于其指定的 width 和 height。
總寬度 = 內容寬度 (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)
使用 box-sizing 屬性控制盒子模型的計算
box-sizing 屬性可以控制如何計算元素的寬度和高度。
它的取值為：
-
content-box（默認值）：- 寬度和高度只包括內容區域，不包括內邊距和邊框
padding和border會額外增加在元素的尺寸上
-
border-box：- 寬度和高度包括內容區域、內邊距和邊框的尺寸
- 使用
border-box后，設置的寬度和高度會包含padding和border，更符合直觀的布局
例如：
div {box-sizing: border-box;width: 300px;padding: 20px;border: 10px solid black;
}
在這種情況下，div 元素的總寬度是 300px，其中包含 padding 和 border。
如果使用 content-box，則總寬度將是 300px + 20px（padding-left）+ 20px（padding-right）+ 10px（border-left）+ 10px（border-right）= 360px
)
