CSS 盒模型的盒尺寸

如何在 CSS 中使用盒模型的盒尺寸

當計算元素的寬度時，瀏覽器的默認行為是將計算出的寬度和高度應用於內容區域，而不考慮任何填充、邊框和邊緣。

這種方法已被證明對工作來說相當複雜。

您可以通過設置 box-sizing 屬性來更改這種行為。

box-sizing 屬性是一個很好的助手。它有 2 個值：

• border-box
• content-box

content-box 是默認值，在 box-sizing 變成一個新事物之前，我們一直使用這個值。

border-box 是我們正在尋找的新東西。如果您在元素上設置了這個值：

.my-div {
    box-sizing: border-box;
}

寬度和高度的計算將包括填充和邊框。只有邊緣部分是留出來的，這是合理的，因為在我們的思維中，我們通常將邊緣視為一個單獨的部分：邊緣在方塊之外。

這個屬性只是一個小變化，但具有重大影響。CSS Tricks 甚至宣布了一個國際盒尺寸意識日，只是這麼說而已，建議在頁面上的每個元素都應用它，使用以下代碼：

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