神奇的box_sizing
box-sizing 的CSS屬性是為了解決傳統的盒子模型不直接而產生的。
當你設置一個元素為 box-sizing: border-box; 時，此元素的內邊距和邊框不再會增加它的寬度。
可選值
box-sizing: inherit;
box-sizing: content-box; //默認，padding內
box-sizing: border-box; //border及其內部空間
例子、沒有box-sizing的時候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> box-size</title>
<style>
.container {
width: 50%;
border: 1px solid #f00;
}
.box{
width: 100%;
height: 200px;
padding: 50px;
border: 10px solid #1c94c4;
background: rgba(14,132,52,0.5);
}
.box1{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="box"> box</div>
<div class="box box1"> box1 </div>
</div>
</body>
</html>
效果圖：
box_sizing.png
如圖所示，padding和border會把.box撐開，達到不到想要的效果，這是就可以使用box-sizing屬性了，如下,只需為box加上box-sizing: border-box就行了，當然margin問題還是存在的，border-box意味著只會壓縮border及其以內的內容，外部就管不到了。
