#### 盒子屬性 css3中增加的 `box-sizing` 語法：`box-sizing: content-box|border-box|inherit:` | 值 | 說明 | | :-- | :-- | | content-box | 默認值。如果你設置一個元素的寬為 100px，那么這個元素的內容區會有 100px 寬，并且任何邊框和內邊距的寬度都會被增加到最后繪制出來的元素寬度中。 | | border-box | 告訴瀏覽器：你想要設置的邊框和內邊距的值是包含在 width 內的。也就是說，如果你將一個元素的 width 設為 100px，那么這 100px 會包含它的 border 和 padding，內容區的實際寬度是 width 減 去(border + padding) 的值。大多數情況下，這使得我們更容易地設定一個元素的寬高。 **注：**border-box 不包含 margin。| | inherit | 指定 box-sizing 屬性的值，應該從父元素繼承 | 用法：最主要的用法是規定容器元素的最終尺寸計算方式。 ___ 代碼： ~~~ <style> .box{ width: 100px; height: 100px; background-color: red; border: 10px solid; box-sizing: content-box; // content-box 默認的寫不寫都一樣 } </style> <div class="box"></div> ~~~ 效果：  代碼： ~~~ <style> .box{ width: 100px; height: 100px; background-color: red; border: 10px solid; box-sizing:border-box; } </style> <div class="box"></div> ~~~ 效果：  加上了 ` box-sizing:border-box;` 盒子永遠都只有100px ,boder、padding、的值會分內容的值。他們三個加上就是100px