CSS學習（一） box-sizing的應用

box-sizing兼容ie8，須要加前綴 -ms- ，但 IE9 瀏覽器開始就不須要私有前綴了。

一、box-sizing的做用：

box-sizing 顧名思義就是「盒尺寸」，其更準確的叫法應該是「盒尺寸的做用細節」，或者說得更通俗一點，叫「width 做用的細節」，也就是說，box-sizing 屬性的做用是改變 width 的做用細節。

「內在盒子」分別是「content box」 「padding box」 「border box」 「margin box」，默認狀況是「content box」。

      理論美好，現實殘酷。實際上，支持狀況以下：

     .box1 { box-sizing: content-box; } /* 默認值 */

     .box2 { box-sizing: padding-box; } /* Firefox 曾經支持 */

     .box3 { box-sizing: border-box; } /* 全線支持 */

     .box4 { box-sizing: margin-box; } /* 從未支持過 */

二、box-sizing 的語法：

box-sizing:content-box|border-box|inherit

標準盒模型 box-sizing:content-box

content -box的總寬度=margin+border+padding+width

在寬度和高度以外繪製元素的內邊距和邊框。

怪異盒模型 box-sizing:border-box

border-box 的總寬度=margin+width

在寬度和高度以內繪製元素的內容、內邊距和邊框

box-sizing: inherit

指定 box-sizing 屬性的值，應該從父元素繼承