閱讀(4.3k) 書(shū)簽贊(0) 我要糾錯(cuò)

HTML DOM Style boxSizing 屬性

2018-08-04 20:41 更新

Style boxSizing 屬性

改變 boxSizing 屬性：

document.getElementById("myDIV").style.boxSizing="border-box";

boxSizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。

例如，如果您需要并排放置兩個(gè)帶邊框的框，可通過(guò)將 boxSizing 設(shè)置為 "border-box" 來(lái)實(shí)現(xiàn)。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。

Internet Explorer、Opera、Chrome 和 Safari 支持 boxSizing 屬性。

Firefox 支持另一個(gè)可替代該屬性的屬性，即 MozBoxSizing 屬性。

返回 boxSizing 屬性：

object.style.boxSizing

設(shè)置 boxSizing 屬性：

object.style.boxSizing="content-box|border-box|initial|inherit"

值	描述
content-box	默認(rèn)值。這是由 CSS2.1 規(guī)定的寬度和高度的行為。設(shè)定的寬度和高度（及 min/max 屬性）分別應(yīng)用到元素的內(nèi)容框的寬度和高度。在設(shè)定的寬度和高度之外繪制元素的內(nèi)邊距和邊框。
border-box	為元素設(shè)定的寬度和高度（及 min/max 屬性）決定了元素的邊框盒。也就是說(shuō)，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過(guò)把已設(shè)定的 'width' 和 'height' 屬性分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
initial	設(shè)置該屬性為它的默認(rèn)值。請(qǐng)參閱 initial。
inherit	從父元素繼承該屬性。請(qǐng)參閱 inherit。