css box-sizing屬性值詳解（MDN）

前端晉級攻城獅發表於2019-08-07
CSS

content-box預設值，標準盒子模型。 width 與 height 只包括內容的寬和高， 不包括邊框（border），內邊距（padding），外邊距（margin）。注意: 內邊距、邊框和外邊距都在這個盒子的外部。 比如說，.box {width: 350px; border: 10px solid black;} 在瀏覽器中的渲染的實際寬度將是 370px。 尺寸計算公式：

width = 內容的寬度

height = 內容的高度

寬度和高度的計算值都不包含內容的邊框（border）和內邊距（padding）。

border-box width 和 height 屬性包括內容，內邊距和邊框，但不包括外邊距。這是當文件處於 Quirks模式 時Internet Explorer使用的盒模型。注意，填充和邊框將在盒子內 , 例如, .box {width: 350px; border: 10px solid black;} 導致在瀏覽器中呈現的寬度為350px的盒子。內容框不能為負，並且被分配到0，使得不可能使用border-box使元素消失。

尺寸計算公式：

width = border + padding + 內容的寬度

height = border + padding + 內容的高度

示例：

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>
複製程式碼
div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box { 
  box-sizing: content-box; 
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box { 
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}
複製程式碼

相關文章