CSS3 box-sizing 屬性
實(shí)例
規(guī)定兩個(gè)并排的帶邊框的框：
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
頁面底部有更多實(shí)例。
瀏覽器支持
Internet Explorer、Opera 以及 Chrome 支持 box-sizing 屬性。
Firefox 支持替代的 -moz-box-sizing 屬性。
Safari 支持替代的 -webkit-box-sizing 屬性。
定義和用法
box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(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 規(guī)定的寬度高度行為。 寬度和高度分別應(yīng)用到元素的內(nèi)容框。 在寬度和高度之外繪制元素的內(nèi)邊距和邊框。 |
| border-box |
為元素設(shè)定的寬度和高度決定了元素的邊框盒。 就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。 通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。 |
| inherit | 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。 |
相關(guān)頁面
CSS3 教程：CSS3 用戶界面