Shulou(Shulou.com)06/01 Report--

This article mainly talks about "what are the two box models of CSS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what are the two box models of CSS?"

The problem of Box Model of IE

The following code can be copied and run directly.

Contains css box model .content {width: 300px; height: 400px; border: 5px solid # 242424; padding: 20px; background-color: # 898989;}

The logic of the above code is very simple, that is, set a wide 300px, high 400px div, and set the border of 5px and the padding of 20px.

Here we will find that when we set the aspect ratio of 300 to 400, why does it show a box of 350 to 450? Then let's open the debugging page to find out.

We found that the 300cm 400 we set appears in the innermost blue box, and at the same time we can find that in this box model, in addition to the content we set (content), there are margin (outer margin), border (frame), padding (inner frame).

Margin (margin)-clears the area outside the border, which is transparent.

Border (border)-the border around the inside margin and outside the content.

Padding (inside margin)-clears the area around the content, and the inside margin is transparent.

Content (content)-the contents of the box, displaying text and images.

In order to set the width and height of the element correctly in all browsers, you need to know how the box model works.

And the 350 '450 boxes we saw in the test results chart

350 (width) = 300 (content) + 20 (padding) * 2 + 5 (border) * 2

450 (height) = 400 (content) + 20 (padding) * 2 + 5 (border) * 2

Two Box models of CSS

The reason for the above effect comes from the difference between the two box models of css. Here I will first introduce the two box models.

The standard box model of W3C

In the standard box model, width refers to the width of the content section

Box model of IE

In the IE box model, width represents the width of the three parts of content+padding+border

We can see that the default we used above is the W3C standard box model.

Here, the selection of the box model is more inclined to the habits of the project and developers, and there is no absolute difference between good and bad.

The use of box-sizing

If you want to switch the box model very easily, you need to use the box-sizing property of CSS3 here.

Box-sizing: content-box is the W3C box model

Box-sizing: border-box is the IE box model

The default property of box-sizing is content-box

At this point, I believe you have a deeper understanding of "what are the two box models of CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.