CSS 區塊模型 box model：元素尺寸怎麼算
CSS 排版的核心概念之一。每個 HTML 元素都可以被視為一個獨立的區塊模型，這個模型由四個部分組成，從內到外分別是：content、padding、border、margin。
區塊模型結構
- content: 顯示元素實際內容的區域，例如：文字、圖片等。可用
width和height屬性設定其大小。 - padding: 內容區與邊框之間的空間。
- border: 邊框。邊框為內、外距的分界。
- margin: 外距、邊界。邊框以外與其他元素之間的空間。
視覺化示意圖
+-------------------------------+
| margin |
| +-------------------------+ |
| | border | |
| | +-------------------+ | |
| | | padding | | |
| | | +------------+ | | |
| | | | content | | | |
| | | +------------+ | | |
| | +-------------------+ | |
| +-------------------------+ |
+-------------------------------+區塊模型的計算方式
- 寬度: content 的寬度。
- 高度: 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。
box-sizing
重新定義元素寬、高的顯示方式。
content-box:width和height只包含內容區，不包含 padding 和 border。border-box:width和height包含內容區、padding 和 border。
總結
- 區塊模型是 CSS 排版的基礎。
- 熟悉各層的作用與計算方式，有助於精確控制元素的大小與間距。
- 建議在專案中統一使用
box-sizing: border-box;，方便維護與預測元素尺寸。
全站改用 border-box
css
*,
*::before,
*::after {
box-sizing: border-box;
}這是絕大多數 樣式重置 的標準起手式，尺寸從此好預測：設定 200px 就是佔 200px。
行內元素的例外
行內元素的 上下外距與寬高不會生效，只有左右方向有效。需要完整盒模型時，請把 display 改成 inline-block 或 block。
常見問題
為什麼元素比我設定的還寬？
預設的計算方式下，內距與框線是加在設定的寬度之外的。把 box-sizing 設成 border-box 之後，寬度就會包含它們。
border-box 要怎麼全站套用？
在樣式表最前面用 通用選取器 連同兩個偽元素一起設定即可，這也是絕大多數重置樣式的標準寫法。
margin 和 padding 的空間有什麼不同？
padding 在框線以內，會被背景色蓋到；margin 在框線以外，永遠是透明的，而且垂直方向還可能發生 邊界重疊。
行內元素的盒模型一樣嗎？
不完全一樣。行內元素的上下外距與寬高不會生效，只有左右方向有效。需要完整盒模型請改成 inline-block 或 block。
