CSS3 box-sizing Properties

Definition and usage

The Box-sizing property allows you to define specific elements that match a region in a specific way.

For example, if you need to place two boxes with borders side-by, you can set box-sizing to "Border-box". This allows the browser to render a box with the specified width and height, and place the border and padding into the box.

Default value:	Content-box
Inheritance:	No
Version:	CSS3
JavaScript Syntax:	object. style.boxsizing= "Border-box"

Grammar

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

value	Description
Content-box	This is the width height behavior specified by the CSS2.1. The width and height are applied to the element's content box, respectively. Draws the inner margin and border of the element outside the width and height.
Border-box	The width and height set for the element determines the bounding box of the element. That is, any padding and borders specified for the element will be drawn within the set width and height . The width and height of the content can be obtained by subtracting the border and padding from the set width and height.
Inherit	Specifies that the value of the Box-sizing property should be inherited from the parent element.

Focus on Border-box

Problems that can help with the layout of the finale

1. By default, the width of the element includes the widths of the padding and border, and if the set Border-box contains a border and padding, it is not necessary to consider the variable width and padding problem when the wrapper control calculates the width.

2. After setting the Border-box, set the width=50% at the time of layout to ensure the split evenly, do not consider padding and border problems.

Example 1:

<style>. Test{width:100px;background:Red;padding:30px;    }. Test-box{box-sizing:Border-box;-moz-box-sizing:Border-box;-webkit-box-sizing:Border-box;width:100px;background:Blue;padding:30px;    }</style><Divclass= "Test">160px*60px</Div><BR/><BR/><Divclass= "Test-box">100px*60px</Div>

Example 2:

<style>Div.container{width:50%;Border:1em Solid;margin:Auto;    }Div.box{box-sizing:Border-box;-moz-box-sizing:Border-box; /*Firefox*/-webkit-box-sizing:Border-box; /*Safari*/width:50%;Border:1em Solid Red;float: Left;    }</style><Divclass= "Container">    <Divclass= "box">This div occupies the left half of the section.</Div>    <Divclass= "box">This div occupies the right half of the section.</Div></Div>

Browser support situation:

CSS3 box-sizing Properties