CSS3: A simple understanding of the box-sizing attribute_html/css_WEB-ITnose

Definition and Usage:

The box-sizing attribute allows you to define specific elements that match a certain area in a specific way.

Default value: content-box;

Inheritance: none;

css version: css3 ：

box-sizing: content-box | border-box |inherit;

Attribute value description:

content-box

Default value; width-height behavior specified by CSS2.1; width and height are applied to the element's content box respectively; the element's padding is drawn outside the width and height and borders.

can be understood as: setting border and padding on an element will eventually change the width and height of the element

border-box

is set for the element The width and height determine the border box of the element;

That is: any padding and borders specified for the element will be drawn within the set width and height;

The content Width = set width and height - borders and padding.

can be understood as: setting border and padding on an element will not change the width and height of the element; it will only be drawn within the established width and height range of the element

inherit

Specifies that the value of the box-sizing attribute should be inherited from the parent element.

We can use this attribute value to easily implement box-sizing settings by setting box-sizing on the top-level parent element and letting the child elements inherit it.

For example:

html{

box-sizing:border-box;

}

*,*:before,*:after{

box-sizing:inherit;

}



Example:

Online demo: http://codepen.io/anon/pen/LVvrdy

　

Realization effect: