摘要
box-sizing 屬性用于更改用于計(jì)算元素寬度和高度的默認(rèn)的CSS盒模型飞蹂。可以使用此屬性來模擬不正確支持CSS框模型規(guī)范的瀏覽器的行為瞬矩。
| key | value |
|---|---|
| 初始值 | content-box |
| 適用元素 | 任何可設(shè)置width和height的元素 |
使用方式
/* 關(guān)鍵字值 */
box-sizing: content-box;
box-sizing: border-box;
/* 全局值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
/* 為兼容舊版瀏覽器徒欣，需要加上前綴 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
說明
- content-box
content-box 是Chrome、Firefox等現(xiàn)代瀏覽器的缺省值泳桦，采用標(biāo)準(zhǔn)的盒子模型計(jì)算方式恬砂。在計(jì)算中，元素的 width 和 height 將只包含內(nèi)容的寬和高蓬痒，而不包括邊框泻骤、內(nèi)邊距漆羔、外邊距的寬度。
即狱掂，在content-box中演痒，border、padding趋惨、margin都在盒子模型之外鸟顺。
舉個(gè)栗子：
.box {
width: 100px;
border: 10px solid #000;
}
上述樣式在瀏覽器中實(shí)際渲染的寬度將是 120px。
- border-box
border-box 是 IE 的缺省值器虾，及所謂的“怪異模式”讯嫂。在瀏覽器渲染時(shí)，會(huì)將邊框兆沙、內(nèi)邊距欧芽、外邊距與內(nèi)容寬高一同計(jì)算。
即葛圃，在border-box中千扔，border、padding库正、margin都在盒子模型中曲楚。
依然是上面的栗子：
.box {
width: 100px;
border: 10px solid #000;
}
此時(shí)上述樣式在瀏覽器中實(shí)際渲染的寬度將是 100px。
需要注意的是褥符，當(dāng)設(shè)置了border-box后龙誊，內(nèi)容框的寬度不可為負(fù)數(shù)。
計(jì)算公式為：
實(shí)際渲染的 width = border + padding + 內(nèi)容的 width喷楣，
實(shí)際渲染的 height = border + padding + 內(nèi)容的 height载迄。
一個(gè)“沒用”的值
- padding-box
該可選值只有Firefox實(shí)現(xiàn)，并且Firefox在Firefox 50之后移除了該可選值抡蛙。
兼容性
在這些瀏覽器中可以使用：
IE 8+护昧、EDGE、Chrome粗截、Firefox惋耙、Opera 7+、Safari
在較新的瀏覽器中熊昌，瀏覽器廠商已經(jīng)移除了“-webkit”前綴绽榛。
