DIV CSS two box models_html/css_WEB-ITnose

Using CSS to lay out the page layout DIV is a bit logical!
Focus on understanding the box model, the difference between standard flow and non-standard flow, and the positioning principle! Once these 3 are broken, it will be very simple. !More practice and more reference!
The last thing is compatibility. In practice, you will naturally have experience! These compatibility skills are all based on experience!

Box model There are two types, namely IE box model and standard W3C box model. Their interpretations of the box model vary.

Let’s first look at the standard box model we are familiar with:

Can’t see the picture clearly? Please click here to view original image (larger version).

From the above figure, you can see that the scope of the standard W3C box model includes margin, border, padding, and content, and the content part does not include other parts.

Can’t see the picture clearly? Please click here to view original image (larger version).

From the picture above, you can see that the scope of the IE box model also includes margin, border, padding, and content. The difference from the standard W3C box model is that the content part of the IE box model includes border and pading.

Example: The margin of a box is 20px, the border is 1px, the padding is 10px, the width of the content is 200px, and the height is 50px. If explained by the standard W3C box model, then the position that this box needs to occupy is: Width 20*2 1*2 10*2 200=262px, height 20*2 1*2*10*2 50=112px, the actual size of the box is: width 1*2 10*2 200=222px, height 1*2 10*2 50=72px; if using the IE box model, then the position that this box needs to occupy is: width 20*2 200=240px, height 20*2 50=70px, the actual size of the box is: width 200px, height 50px.

So which box model should you choose? The "standard W3C box model" of course. What does it mean to choose the "standard W3C box model"? It's as simple as adding a DOCTYPE declaration at the top of your web page. If you do not add a DOCTYPE statement, each browser will understand the web page according to its own behavior, that is, the IE browser will use the IE box model to interpret your box, and FF will use the standard W3C box model to interpret your box, so the web page will It is displayed differently in different browsers. On the contrary, if you add a DOCTYPE statement, then all browsers will use the standard W3C box model to interpret your box, and the web page will be displayed consistently in various browsers.

Use an example made with jQuery to confirm.

Code 1:

The above code does not add a DOCTYPE statement, and the "IE box model" is displayed in the IE browser ", displays "Standard W3C box model" in FF browser.

Code 2: