CSS 盒模型的盒尺寸
如何在 CSS 中使用盒模型的盒尺寸
當計算元素的寬度時，瀏覽器的默認行為是將計算出的寬度和高度應用於內容區域，而不考慮任何填充、邊框和邊緣。
這種方法已被證明對工作來說相當複雜。
您可以通過設置 box-sizing 屬性來更改這種行為。
box-sizing 屬性是一個很好的助手。它有 2 個值：
border-boxcontent-box
content-box 是默認值，在 box-sizing 變成一個新事物之前，我們一直使用這個值。
border-box 是我們正在尋找的新東西。如果您在元素上設置了這個值：
1 | .my-div { |
寬度和高度的計算將包括填充和邊框。只有邊緣部分是留出來的，這是合理的，因為在我們的思維中，我們通常將邊緣視為一個單獨的部分：邊緣在方塊之外。
這個屬性只是一個小變化，但具有重大影響。CSS Tricks 甚至宣布了一個國際盒尺寸意識日，只是這麼說而已，建議在頁面上的每個元素都應用它，使用以下代碼：
1 | *, *:before, *:after { |