Two kinds of box model of CSS

Two kinds of CSS box model: The standard box model, IE box model

The similarities between the two: all include margin, border, padding, content

The difference between the two: the content part of the standard box model does not contain other parts; The content part of the IE box model contains the border, padding parts.

Example: A box model margin of 10px,border for 2px,padding for the 5px,content of 100px, 50px high.

1.W3C Standard Box model

The box needs to occupy the position: wide 10*2+2*2+5*2+100=134px, high 10*2+2*2+5*2+50=84px; the actual size of the box: wide 2*2+5*2+100=114px, High 2*2+5*2+50=64px.

2.IE Box Model

The box needs to occupy the position: wide 10*2+100=110px, high 10*2+50=60px; the actual size of the box: width 100px, height 50px,

What kind of box model does the browser display?

In general, in the case of the DOCTYPE declaration of the browser display is the standard box model, if there is no DOCTYPE declaration, then different browsers will according to their own interpretation to display the box model, ie may display the IE box model.

Two kinds of box model of CSS