Home > Article > Web Front-end > css3: box model and box-sizing properties
css3: box model and box-sizing properties
- WBOYOriginal
- 2016-09-21 13:56:031606browse
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
The box-sizing attribute was introduced in CSS3, which allows changing the way the default CSS box model calculates the width and height of elements.
Including two options:
-
content-box: Standard box model, the width and height defined by CSS only include 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)
<span style="color: #008080;"> 1</span> <head lang="en">
<span style="color: #008080;"> 2</span> <meta charset="UTF-8">
<span style="color: #008080;"> 3</span> <title></title>
<span style="color: #008080;"> 4</span> <style>
<span style="color: #008080;"> 5</span> .con{width: 100px; height: 100px;background-<span style="color: #000000;">color:royalblue;
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;"> border:1px solid red; padding: 10px;}
</span><span style="color: #008080;"> 7</span> .con1{box-sizing: border-<span style="color: #000000;">box;}
</span><span style="color: #008080;"> 8</span> </style>
<span style="color: #008080;"> 9</span> </head>
<span style="color: #008080;">10</span> <body>
<span style="color: #008080;">11</span> <div class="con"></div>
<span style="color: #008080;">12</span> <div class="con con1"></div>
<span style="color: #008080;">13</span> </body>
You can clearly see the difference between the two boxes on the console
The box model of the first div is as follows: content-box
The box model of the second div is as follows: border-box
