HTML DOM Style boxSizing property
Examples
Change boxSizing properties:
document.getElementById("myDIV").style.boxSizing="border-box";
try it"
Definition and Usage
boxSizing property allows you to define a specific match a particular element of an area.
For example, if you need to place two side by side, with a border of box, it can be prepared by boxSizing set to "border-box" to achieve. This can make the browser showing a box with the specified width and height, and the border, and padding into the box.
Browser Support
Internet Explorer, Opera, Chrome and Safari support boxSizing property.
Firefox supports another alternative of the property attribute that MozBoxSizing property.
grammar
Back boxSizing properties:
object .style.boxSizing
Setting boxSizing properties:
object .style.boxSizing="content-box|border-box|initial|inherit"
Property Value
| 值 | 描述 |
|---|---|
| content-box | 默认值。这是由 CSS2.1 规定的宽度和高度的行为。设定的宽度和高度（及 min/max 属性）分别应用到元素的内容框的宽度和高度。在设定的宽度和高度之外绘制元素的内边距和边框。 |
| border-box | 为元素设定的宽度和高度（及 min/max 属性）决定了元素的边框盒。也就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过把已设定的 'width' 和 'height' 属性分别减去边框和内边距才能得到内容的宽度和高度。 |
| initial | 设置该属性为它的默认值。请参阅 initial 。 |
| inherit | 从父元素继承该属性。请参阅 inherit 。 |
technical details
| Defaults: | content-box |
|---|---|
| return value: | String representing the box-sizing property element. |
| CSS version | CSS3 |
related articles
CSS Reference Manual: Box-Sizing property