The box-sizing attribute was introduced in CSS3. Some people explain that it can specify whether the width and height values specified with the width attribute and height attribute respectively include the padding area inside the element, as well as the width and height of the border. This sentence is a bit confusing. I understand it as a calculation method for the height and width of the container. What kind of calculation method is it specifically? How is it different from the traditional calculation method? We can understand it intuitively through the following example. .
Example:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>box-sizing</title><styletype=text/css>div{width:50px;height:50px;margin:10 px;padding:10px;border:10pxsolid#888;}#bs{box-sizing:border-box;}</style></head><body><div></div><divid=bs></ div></body></html>Running results:
As can be seen from the picture above, the difference in size between the two is very obvious. We can use the browser to see how the two are calculated.
The picture above is the traditional calculation method, which is the size of the first div above.
It can be seen that the actual width of the div is 50+10*2+10*2=90px. Because the height and width we specify for the div refer to the height and width of the content area, which is the innermost area in Figure 1-1.
The actual calculated size of the second div in the picture above. The actual width of the div here is 10+10*2+10*2=50px. After such calculation, we understand clearly that the box-sizing is set to border-box. Finally, the height and width of the container are the height and width of the actual container, rather than simply referring to the size of the content area. It can also be understood that the height and width calculation method at this time also includes padding and border size.
Optional values for the box-sizing attribute are as follows:
[Example] The following uses an example to demonstrate the use of the box-sizing attribute:
<!DOCTYPEhtml><html><head><style>div{width:300px;height:50px;margin-top:5px;border:10pxsolidred;padding:5px;}.two{box-sizing:content-box;} .three{ box-sizing:border-box;}</style></head><body><divclass=one>Default</div><divclass=two>content-box</div><divclass=three>border- box</div></body></html>Running results:
