Example Analysis of Box Model and box-sizing attribute in css3
This article mainly shows you the "css3 box model and box-sizing attributes example analysis", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "css3 box model and box-sizing attributes example analysis" this article.
Each element in the document is depicted as a rectangular box. The purpose of the rendering engine is to determine the size, attributes-- such as its color, background, border-- and the location of these boxes. In CSS, these rectangular boxes are described by a standard box model. This model describes the space occupied by an element. Each box has four boundaries: the outer boundary margin, the border boundary border, the inner margin boundary padding and the content boundary 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 is introduced in CSS3, which allows you to change the way the default CSS box model calculates the width and height of elements.
There are two options:
Content-box: standard box model, the width and height defined by CSS contains only the width and height of 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 as the default content-box)
.con {width: 100px; height: 100px; border:1px solid red; padding: 10px; border:1px solid red; padding: 100px; Con: 100px; Con {box-sizing: 100px; Con: 10px; Con: 100px; Con: 10px; Con:
You can see the difference between the two boxes at a glance in 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
The above is all the content of the article "sample Analysis of Box Model and box-sizing attributes in css3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
