在一個(gè)文檔中，每個(gè)元素都被表示為一個(gè)矩形的盒子。盒子模型具有4個(gè)屬性['外邊距(margin)','邊框(border)','內(nèi)邊距(padding)','內(nèi)容(content)']。
我們要設(shè)置某個(gè)元素的大小定位，肯定會(huì)和這四個(gè)元素打交道。只是元素的寬高計(jì)算有些默認(rèn)值。
box-sizing屬性用于更改用于計(jì)算元素寬度和高度的默認(rèn)的 CSS 盒子模型。可以使用此屬性來模擬不正確支持CSS盒子模型規(guī)范的瀏覽器的行為。
目前支持box-sizing的瀏覽器：
就目前來看，大部分人是建議在初始化樣式的時(shí)候，就設(shè)置為
border-box，這樣更方便設(shè)置元素的寬高
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
語法
box-sizing: content-box | border-box | inherit;
值
content-box 標(biāo)準(zhǔn)盒模型
默認(rèn)值，標(biāo)準(zhǔn)盒子模型。width 和 height 只包括內(nèi)容(content)的寬和高。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
尺寸計(jì)算公式：
width = 內(nèi)容的寬度。
height = 內(nèi)容的高度
border-box IE模型
width和height屬性包括內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)，但是不包括外邊距(margin)。在寬度和高度之內(nèi)繪制元素的內(nèi)容、內(nèi)邊距和邊框。
尺寸計(jì)算公式：
width = 內(nèi)容的寬度 + 內(nèi)邊距的寬度 + 邊框的寬度。
height = 內(nèi)容的高度 + 內(nèi)邊距的高度 + 邊框的高度。
inherit
規(guī)定應(yīng)該從父元素繼承 box-sizing 屬性的值
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing的使用</title>
<style type="text/css">
.box {
width: 460px;
height: 400px;
border: 1px solid red;
margin: 10px;
background-color: gray;
}
.content {
box-sizing: content-box;
border: 10px solid blue;
width: 300px;
padding: 20px;
margin: 30px;
background-color: green;
}
.border {
box-sizing: border-box;
border: 10px solid blue;
width: 300px;
padding: 20px;
margin: 30px;
background-color: yellow;
}
.inherit {
box-sizing: inherit;
border: 10px solid red;
width: 300px;
padding: 20px;
margin: 30px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
我是content-box值(默認(rèn))
<br/>box-sizing: content-box;
<br/>border: 10px solid blue;
<br/>width: 300px;
<br/>padding: 20px;
<br/> margin: 30px;
<div class="inherit">我是inherit值</div>
</div>
</div>
<div class="box">
<div class="border">
我是border-box值
<br/>box-sizing: border-box;
<br/>border: 10px solid blue;
<br/>width: 300px;
<br/>padding: 20px;
<br/>margin: 30px;
<div class="inherit">我是inherit值</div>
</div>
</div>
</body>
</html>
chrome截圖：
