box-sizing CSS屬性用于改變默認CSS盒模型,瀏覽器通常使用該模型來計算元素的寬度和高度。
下表為此屬性的用法說明和版本歷史記錄,以及該屬性在javascript腳本中的使用語法。
| 默認值: | content-box |
|---|---|
| 適用于: | 所有接受寬度或高度的元素 |
| 繼承: | 沒有 |
| 可動畫制作: | 否 查看動畫屬性。 |
| 版本: | CSS3的新功能 |
| JavaScript語法: | object.style.boxSizing="border-box" |
該屬性的語法如下:
box-sizing: content-box | padding-box | border-box | initial | inherit
下面的示例演示了如何使用box-sizing屬性。
.box {
width: 50%;
padding: 15px;
float: left;
border: 5px solid #000;
box-sizing: border-box;
}測試看看?/?下表描述了此屬性的值。
| 值 | 描述 |
|---|---|
| content-box | 指定的width和height屬性僅包含元素的內(nèi)容。它不包括填充,邊框或邊距。 |
| padding-box | 指定的width和height屬性包括填充大小,并且不包括border或margin。 |
| border-box | 指定的width和height屬性包括填充和邊框,但不包括邊距。 |
| initial | 將此屬性設(shè)置為其默認值。 |
| inherit | 如果指定,則關(guān)聯(lián)元素采用其父元素box-sizing的屬性值。 |
box-sizing屬性瀏覽器的兼容性,下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號;所有主流瀏覽器均支持該屬性。
|