(I) Principle
⑴css --Box Moel divided into two properties: W3C standards and standards IE box model.
⑵ Most browsers using the W3C standard model, while Microsoft's own IE in standards adopted.
⑶ quirks mode is "part of the browser supports the W3C standard, while also retaining the original resolution model" quirks mode mainly in the IE browser kernel.
When ⑷ When Doctype not be defined, it will trigger quirks mode.
(Ii) the standard model and model weird difference:
⑴ In standard mode, the total width of one block = width + margin (left and right) + padding (left and right) + border (right and left)
⑵ In quirks mode, the total width of one block = width + margin (left and right) (both width and border already contains padding values)
See particularly FIG ⑶ the following model:
Standard Model:
Weird model:
(Iii) The difference between the total length
So, in the end the total width of the two formulas mentioned in What does it mean? The final two modes What difference does the effect?
⒈ standard mode code as shown below:
Results as shown below:
★ standard mode, we set #box width 400px height, the corresponding content (content area) width and height 400px
2. quirks mode code as shown below:
FIG view the results shown:
★ standard mode, we set the width and height 400px #box, in strange model, its corresponding content (the content area) is the width and height width- vertical padding- vertical border, the result is 350px;
We clearly see that the width of the lower weird model smaller.
I hope that helps.