CSS Magic Hall: A brief introduction to the box model

First, the standard box model

Second, IE box model

The difference between the two models　　　　　　　　　　

Standard Box Model:

Outer box model

Element space width = content width + padding + border + margin

Element space height = content width + padding + border + margin height

Inner box model

Element width = Content height + padding + border width

Height of element = content height + padding + border

E Box Model:

Outer box model

Element space width = width of content width + margin

Element space height = height of content height + margin

Inner box model

Element width = content widths

Element altitude = content Height

The IE box model will be used when ie6~8 is in weird mode, otherwise the standard box model will be used.

Iv. Rules of CSS3--box-sizing

The box-sizing has three values, the default is Content-box (which means that the element uses the world model), and Border-box (which represents the element using the IE box model), Inherit (inherited from the parent element)

Browser support: IE8 start support

element{  //  firefox3.5+  //  Opera9.6 (Presto core)  //  safari3.2+  //  IE8  //  ie9+,chrome10.0+,safari5.1 +,opera10.6}

V. Summary

Box model is the basis of CSS, although IE has been criticized by everyone, but does not mean that the IE box model than the standard box model, the next we study together CSS3 style rules box-sizing understand.

Respect the original, reprint please indicate from: http://www.cnblogs.com/fsjohnhuang/p/3967623.html ^_^ Fat Boy John

Vi. references

Http://www.cnblogs.com/releaseyou/archive/2009/04/16/1437456.html

http://blog.csdn.net/ncode/article/details/7428746

Http://www.w3cplus.com/content/css3-box-sizing

CSS Magic Hall: A brief introduction to the box model