直接開門見山啦，請看下面代碼與效果：
<style>
.one{
height:100px;
width:100px;
box-sizing:border-box;//設置了該屬性
padding:5px;
margin:5px;
border:5px solid green;
background: red;
}
.two{
background: red;
height:100px;
width:100px;
padding:5px;
margin:5px;
border:5px solid green;
}
</style>
</head>
<body>
<div class='one'>固定高寬值</div>
<div class='two'>高寬值加上了padding、border值，不包括margin</div>
</body>
box-sizing：content-box（默認值） | border-box
1. content-box：
padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding以及margin之和，即 ( Element width = width + border + padding+margin )。此屬性表現為標準模式下的盒模型。
2. border-box：
padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width = width )。此屬性表現為怪異模式下的盒模型。
