話不多說，先上代碼：
html代碼
<div class="wrapper">
<div class="container1">容器一</div>
<div class="container2">容器二</div>
<div>
css代碼
.wrapper{
float: left;
width: 100%;
height: 300px;
background-color: blue;//加背景色便于區(qū)分
}
.container1,.container2{
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
background-color: red;
border: 1px solid pink;
}
.container1{
box-sizing: border-box;
}
.container2{
box-sizing: content-box;
}
結(jié)果如下圖：
result.png
box-sizing的默認(rèn)值是box-content，符合標(biāo)準(zhǔn)的盒模型。
box-sizing:content-box;在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
box-sizing:border-box;通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度.
