CSS3中的box-sizing 屬性允許以特定的方式來指定盒模型，其屬性值有兩種：
- content-box：標準盒模型，又叫做 W3C盒模型，一般在現代瀏覽器中使用的都是這個盒模型
- border-box：怪異盒模型，低版本IE瀏覽器中的盒模型
現代瀏覽器和IE9+默認值是content-box。
區別：
content-box：padding和border不被包含在定義的width和height之內。
盒子的實際寬度 = 設置的width + padding + border
border-box：padding和border被包含在定義的width和height之內。
盒子的實際寬度 = 設置的width（padding和border不會影響實際寬度）
在IE中（也就是怪異模式），塊元素的width = content + padding + border；比如設定元素width = 100px，padding = 10px，那麼實際的內容區域寬度爲100-10*2px，也就是固定寬度後，如果設定border或者padding會壓縮內容區的寬度；
在W3C標準中，元素的width = content，比如設定元素width = 100px，padding = 10px，那麼實際內容寬度就爲100px；整個元素的寬度爲100+10*2px，也就是設定額外的padding或border會向外擴張元素的大小；
在實際的開發中，爲保持瀏覽器的兼容性，通常將盒子模型統一爲IE的盒子模型，並且這樣的方式有利於佈局。
<!DOCTYPE html>
<html>
<head>
<style>
div.box{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:300px;
border:10px solid red;
}
div.box1{
width:300px;
border:10px solid red;
padding: 10px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box">box 實際寬度爲300px</div>
<div class="box1">box1 實際寬度爲340px</div>
</body>
</html>