Home > Article > Web Front-end > Understanding the css3 box model and box-sizing properties
Understanding the css3 box model and box-sizing properties
- 高洛峰Original
- 2017-03-02 15:16:241658browse
Each element in the document is depicted as a rectangular box. The purpose of the rendering engine is to determine the size, properties - such as its color, background, border aspects - and the position of these boxes. In CSS, these rectangular boxes are described using the standard box model. This model describes the space occupied by an element. Each box has four borders: margin, border, padding and content.
In W3C model: total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin- right
In IE model: total width = margin-left + width + margin-right
Introduced the box-sizing property in CSS3, which allows changes The default CSS box model calculates the width and height of elements.
includes two options:
content-box: standard box model, width and height defined by CSS Only contains the width and height of the content. (Default)
border-box: IE box model, the width and height defined by CSS include content, padding and border
Example:
( con1 is set to box-sizing: border-box, con is the default content-box)
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.con{width: 100px; height: 100px;background-color:royalblue;
border:1px solid red; padding: 10px;}
.con1{box-sizing: border-box;}
</style>
</head>
<body>
<p class="con"></p>
<p class="con con1"></p>
</body>You can clearly see the difference between the two boxes in the console
The box model of the first p is as follows: content-box
The box model of the second p is as follows: border-box
The above is all the content of the css3 box model and box-sizing properties that the editor has brought to you. I hope it will be helpful to everyone. Please support the PHP Chinese website~
For more css3 box models and box-sizing attributes, please pay attention to the PHP Chinese website for related articles!