A closer look at the css3 border-sizing property

Recommended:css video tutorial

box-sizingFor changing the default used to calculate the width and height of elements CSS box model. It has three values:content-box,border-boxandinherit.inheritrefers to inheriting thebox-sizingexpression form from the parent element, which is no longer redundant.

1. Property explanation

content-box

The default value is also the box model in CSS2.1. When calculatingwidthandheight,border,paddingandmarginare not calculated.Height and width are just the content height.

border-box

css3Newly added. Thewidthandheightproperties include content, padding, and borders, but not margins.

Calculation formula:

• ##width = width = border padding Content width

• height = border padding content height

2. Consider the

margin

of the box model. From the above, we can know that it is

border-boxmarginis not calculated, butborderandpaddingare calculated redundantly.Becauseborderandpaddingare both part of the box model, butmarginmarks the distance between boxes. Therefore, the explanation ofborder-boxis very common sense.

The question is, if

marginmust be set sometimes,how to achieve free control to ensure compatibility? For example, we want to set up a box element that fills the entire page and is interfered with by margins. How should we do this?

Achieve the following renderings:

Code:Source code download

So, when you need to calculate the margin, you can usewith the four arithmetic operations (calc) in css3.

3. Usage suggestions

Based on the usage experience in the project and the recommendations of w3c, it is recommended to set the

box-sizingattribute toborder-box.

* { margin: 0; padding: 0; } div { box-sizing: border-box; }

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of A closer look at the css3 border-sizing property. For more information, please follow other related articles on the PHP Chinese website!