Differences in types of box models in CSS

We know thatBox modelis an important concept in CSS. Only by understanding the box model can you better layout and schedule, but generally speaking, there are two types of box models. , an IE box model and a W3C box model

The scope of the ie box model also includes margin, border, padding, and content. The difference from the standard w3c box model is: 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 interpreted using 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 you use 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.

Selection of box model:

How to choose the "standard w3c box model"? It's very simple, just add the doctype statementat the top of the web page. If you do not add a doctype statement, then 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 is It displays differently in different browsers. On the contrary, if you add a doctype declaration, then all browsers will use the standard w3c box model to interpret your box, and the web page will be displayed consistently in each browser.

PS: The difference between margin and padding in CSS

In CSS, margin refers to the distance between its own frame and the border of another container outside itself, which is the distance outside the container; padding is the container inner distance.

1. padding

1. Syntax structure

(1)padding-left:10px; leftinner margin

（2）padding-right:10px; Right padding

（3）padding-top:10px; Top padding

（4）padding-bottom:10px; Lower padding

（5）padding: 10px; Unified padding on all four sides

（ 6) padding: 10px 20px; top, bottom, left and right padding

(7) padding: 10px 20px 30px; top, left, and bottom padding

(8) padding: 10px 20px 30px 40px; Top, right, bottom, left padding

2, possible values

(1) length specifies the padding length in specific units

( 2) % The length of the padding based on the width of the parent element

(3) auto The browser calculates the padding

(4) inherit specifies that the padding should be inherited from the parent element

3. Browser compatibility issues

(1) All browsers support the padding attribute

(2) Any version of IE does not support the attribute value "inherit"

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

CSS3 detailed introduction to the translate attribute

CSS3 steps to achieve the rotating halo effect

Detailed introduction to the border-image attribute in Css3

The above is the detailed content of Differences in types of box models in CSS. For more information, please follow other related articles on the PHP Chinese website!