CSS Box Sizing

CSS Box Sizing

CSS box-sizing 屬性允許我們在元素的總寬度和高度中包括內邊距（填充）和邊框。

假如不指定 CSS box-sizing 屬性

默認情況下，元素的寬度和高度是這樣計算的：

  • width + padding + border = 元素的實際寬度
  • height + padding + border = 元素的實際高度

這意味著：當您設置元素的寬度/高度時，該元素通常看起來比您設置的更大（因為元素的邊框和內邊距已被添加到元素的指定寬度/高度中）。

下圖展示了兩個有相同指定寬度和高度的 <div> 元素：

這個 div 較小
（寬度為 300px，高度為 100px）。
這個 div 更大
（寬度也為 300px，高度為 100px）。

上面的兩個 <div> 元素在最終結果中呈現出不同的尺寸（因為 div2 指定了內邊距）：

實例

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

親自試一試

box-sizing 屬性解決了這個問題。

如果使用 CSS box-sizing 屬性

box-sizing 屬性允許我們在元素的總寬度和高度中包括內邊距和邊框。

如果在元素上設置了 box-sizing: border-box;，則寬度和高度會包括內邊距和邊框：

現在兩個 div 的大小相同！
Hooray!

該例與上例相同，兩個 <div> 元素都設置了 box-sizing: border-box;：

實例

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

親自試一試

由于使用 box-sizing: border-box; 的效果如此之好，許多開發人員希望頁面上的所有元素都能夠以這種方式工作。

下面的代碼能夠確保以這種更直觀的方式調整所有元素的大小。許多瀏覽器已經在對許多表單元素使用 box-sizing: border-box;（但并非全部 - 這就是為什么 input 和 textarea 在 width: 100%; 時看起來不同）。

將其應用于所有元素是安全且明智的：

實例

* {
  box-sizing: border-box;
}

親自試一試

CSS Box Sizing 屬性

屬性 描述
box-sizing 定義元素寬度和高度的計算方式：它們是否應包含內邊距（padding）和邊框。