## box-sizing的屬性和作用 ### 兼容問題 首先，box-sizing屬性在FireFox中存在兼容問題，所以需要使用-moz-box-sizing做一下兼容。 #### 屬性值 ```css .demo { box-sizing：content-box; box-sizing：border-box; box-sizing：inherit; } ``` ***** `content-box` 標準模式 這是box-sizing的默認屬性值 是CSS2.1中規定的寬度高度的顯示行為 在CSS中定義的寬度和高度就對應到元素的內容框 在CSS中定義的寬度和高度之外繪制元素的內邊距和邊框 `border-box` 怪異模式 在CSS中微元素設定的寬度和高度就決定了元素的邊框盒 即為元素在設置內邊距和邊框是在已經設定好的寬度和高度之內進行繪制 CSS中設定的寬度和高度減去邊框和內間距才能得到元素內容所占的實際寬度和高度 `inherit` 規定元素是從父元素那里繼承box-sizing的屬性值