box-sizing屬性是CSS3中引入的，有人解釋為它可以指定用width屬性與height屬性分別指定的寬度值與高度值是否包含元素內部的補白區域，以及邊框的寬度與高度。這句話有點繞，我理解為它是一種容器高寬的計算方法，具體是怎樣的一種計算方法，和傳統的計算方法又有什麼區別，透過下面的例子我們可以很直觀的了解到。
舉例說明：
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>box-sizing</title><styletype=text/css>div{width:50px;height:50px;margin:10px;padding: 10px;border:10pxsolid#888;}#bs{box-sizing:border-box;}</style></head><body><div></div><divid=bs></div></ body></html>運行結果：
從上圖可以看出兩者大小的差異非常明顯，我們可以藉助瀏覽器來查看兩者是如何計算的。
上圖這種是傳統的計算方法，也就是上面第一個div的大小。
可以看出實際div的寬度為50+10*2+10*2=90px。因為我們給div指定的高寬是指的內容區的高寬，也就是圖1-1中最裡面的那個區域。
上圖第二個div的實際計算大小，這裡div的實際寬度為10+10*2+10*2=50px，這麼一計算，我們就很明白了，原來在設定了box-sizing為border-box後，容器的高寬就是實際容器的高寬，而不是單純指的是內容區的大小。也可以理解為，這時候的高寬運算方式把padding和border大小也算進來了。
box-sizing 屬性的可選值如下：
【範例】下面透過一個範例來示範box-sizing 屬性的使用：
<!DOCTYPEhtml><html><head><style>div{width:300px;height:50px;margin-top:5px;border:10pxsolidred;padding:5px;}.two{box-sizing:content-box;} .three{box-sizing:border-box;}</style></head><body><divclass=one>預設值</div><divclass=two>content-box</div><divclass=three >border-box</div></body></html>運行結果：
