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 */
}
複製程式碼