box-sizing是CSS3的box屬性之一溉知，遵循css的盒模型(Box model)原理
css的盒模型(Box model)分為兩種，第一種是W3C的標(biāo)準(zhǔn)模型，另一種是IE的傳統(tǒng)模型
他們都是對(duì)元素計(jì)算尺寸的模型，但是計(jì)算的方式不同
W3C的標(biāo)準(zhǔn)模型：
/*content height表示元素內(nèi)容高度
* content width表示元素內(nèi)容寬度
*/
/*元素空間尺寸*/
Element空間高度 = content height + padding + border + margin
Element 空間寬度 = content width + padding + border + margin
/*元素大小*/
Element Height = content height + padding + border
Element Width = content width + padding + border
IE的傳統(tǒng)模型
/*content height包含了元素內(nèi)容高度癣漆，內(nèi)距寬度，邊框?qū)挾?* content width包含了元素內(nèi)容寬度剂买，內(nèi)距寬度惠爽，邊框?qū)挾?*/
/*元素空間尺寸*/
Element空間高度 = content height + margin
Element空間寬度 = content width + margin
/*元素大小*/
Element Height = content height
Element width = content width
box-sizing
語法：content-box | border-box | inherit
取值說明
1腰湾、content-box:此值為其默認(rèn)值，即讓元素維持W3C的標(biāo)準(zhǔn)盒模型疆股，也就是說元素的寬度/高度（width/height）等于元素邊框?qū)挾龋╞order）加上元素內(nèi)邊距（padding）加上元素內(nèi)容寬度/高度（content width/height）
2、border-box:此值讓元素維持IE傳統(tǒng)的盒模型（IE6以下版本）倒槐，也就是說元素的寬度/高度（width/height）等于元素內(nèi)容的寬度/高度（content width/height）旬痹。
3、inherit: 此值讓元素繼承父類的box-sizing屬性值
瀏覽器的兼容情況：
Chrome/Opera/IE（IE8版本以上） 支持 box-sizing
FireFox 支持 -moz-box-sizing
Safari 支持 -webkit-box-sizing
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box img{
width: 140px;
height: 140px;
padding: 10px;
border: 20px solid orange;
margin: 5px;
}
#content-box img{
box-sizing: content-box;
}
#border-box img{
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box" id="content-box">
<img src="view.jpg"/></div>
<div class="box" id="border-box">
<img src="view.jpg"/></div>
</body>
</html>
結(jié)果圖：
box-sizing.png
效果一的布局分析圖
content-box.png
效果二的布局分析圖
border-box.png
