CSS3 box-sizing 屬性
實(shí)例
指定兩個(gè)boxes接壤：
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
嘗試一下 ?
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
屬性定義及使用說明
box-sizing 屬性允許你以某種方式定義某些元素，以適應(yīng)指定區(qū)域。
例如，假如您需要并排放置兩個(gè)帶邊框的框，可通過將 box-sizing 設(shè)置為 "border-box"。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。
| 默認(rèn)值: | content-box |
|---|---|
| 繼承: | no |
| 版本: | CSS3 |
| JavaScript 語法: | object.style.boxSizing="border-box" |
語法
box-sizing: content-box|border-box|inherit:
| 值 | 說明 |
|---|---|
| content-box | 這是CSS2.1指定的寬度和高度的行為。指定元素的寬度和高度（最小/最大屬性）適用于box的寬度和高度。元素的填充和邊框布局和繪制指定寬度和高度除外 |
| border-box | 指定寬度和高度（最小/最大屬性）確定元素邊框box。也就是說，對元素指定寬度和高度包括padding和border的指定。內(nèi)容的寬度和高度減去各自雙方該邊框和填充的寬度從指定的"寬度"和"高度"屬性計(jì)算 |
| inherit | 指定box-sizing屬性的值，應(yīng)該從父元素繼承 |
相關(guān)文章
CSS3 教程: CSS3 User Interface
更多建議：