border-sizing屬性

box-sizing屬性可以為三個值之一：content-box（default），border-box，padding-box。

content-box，border和padding不計算入width之內

padding-box，padding計算入width內

border-box，border和padding計算入width之內。

<style type="text/css"> .content-box{ box-sizing:content-box; -moz-box-sizing:content-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #E6A43F; background: blue; }

div的大小最后為150px

 .padding-box{ box-sizing:padding-box; -moz-box-sizing:padding-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #186645; background: red; }

div的大小加上了padding，沒算上border所以為140px

 .border-box{ box-sizing:border-box; -moz-box-sizing:border-box; width: 100px; height: 100px; padding: 20px; border: 5px solid #3DA3EF; background: yellow; }

div的寬度為100px，為原始的寬度，一般寫頁面對ui設計好的來說，我們最好使用這個屬性，這樣對整體布局很有好處，不然，頁面很容易出現問題。

</style>