CSS盒模型：box-sizing: border-box

默認情況下，如果在元素上設置了寬度（或高度），這將應用於內容區域。

這不包括填充、邊框和外邊距，它們是添加在其上面的。

例如，我在一個p元素上設置了以下CSS：

p {
 width: 100px;
 padding: 10px;
 border: 10px solid black;
 margin: 10px;
}

下面是瀏覽器應用的效果：

您可以通過設置box-sizing屬性來更改這種行為。如果將其設置為border-box，則計算寬度和高度時將包括填充和邊框。

在前面的示例中，這是什麼意思：

p {
 box-sizing: border-box;
 width: 100px;
 padding: 10px;
 border: 10px solid black;
 margin: 10px;
}

看到了嗎？實際元素大小現在是60，因為它是100 - 10 * 2（填充）- 10 * 2（邊框）。

只有外邊距被忽略，這是合理的，因為在我們的思維中，我們通常將其視為一個獨立的事物：外邊距在元素的框外。

這個屬性是一個小改變，但在計算元素尺寸時有很大的影響。

在Codepen上的演示

如果您喜歡使用它，您可以通過以下CSS規則將它應用於頁面上的每個元素：

*,
*:before,
*:after {
 box-sizing: border-box;
}