How to use the box-sizing property of CSS3
This article introduces the relevant knowledge of "how to use the box-sizing attribute of CSS3". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
The intuitive and popular explanation is:
Content-box: specify the box model as the W3C standard model. Setting border and padding will increase the size of elements width and height, that is, border and padding are equivalent to the "colony" of elements, and the "land" and size of elements will be increased to extend outward.
Border-box: specifies that the box model is IE model (weird mode). Setting border and padding will not affect the size of elements width and height, that is, border and padding change from the set space of elements. That is, the space is still this space, but part of the spare place is transformed into other space use, for internal transformation.
Set the formula for the relationship between border and padding and the value of the affected attribute:
W3C standard box model (conten-box value) [width/height changed, extended]
Width = content + border + padding
/ / where width presents the size for the browser window, and content is the width of the element set in CSS
IE weird box model (border-box value) [content changed, compressed]
Content = width-border-padding
/ / where width is the width of the element set in CSS
Specific can be debugged with the browser to have a look, more observation to understand.
In short:
1.W3C standard box model (content-box), the setting of border and padding will destroy the element width and height, and must be recalculated, which is very troublesome (except in IE browsers, the default is the standard box model, so you can use box-sizing to convert)
2.IE (weird) box model (border-box), the setting of border and padding will not affect the width and height of the element, which is very practical (and because the IE box model is not a standard, there is a standard attribute of box-sizing to set and standardize it) [IE6/5 is a weird model, IE7 starts as a standard box model]
Another tip: [calculation of row height]
.box {
Width: 200px
Height: 200px
Text-align: center
Border: 10px solid black
Padding: 15px
}
.box {
Width: 200px
Height: 200px
Text-align: center
Border: 10px solid black
Padding: 15px
Box-sizing: border-box
}
This is the end of the content of "how to use the box-sizing attribute of CSS3". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
