css3: box model and box-sizing properties

WBOY
Release: 2016-09-21 13:56:03
Original
1609 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

The box model of the second div is as follows: border-box

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template