css3: box model and box-sizing properties-HTML Tutorial-php.cn

css3: box model and box-sizing properties

WBOY

Release： 2016-09-21 13:56:03

Original

1592 people have browsed it

　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>

Copy after login

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