CSS Box model

This CSS Foundation ... Record the

Box 2D model

margin: Box margin, look at the edge is a dashed line, this part is actually invisible, you can do some minor position changes

Border: Border

padding: The inner margin, is visible in the graphics area

Content: The true contents area

Give an element set his height and width, generally is the content of the high width, IE6 may not be the same, is the Content+padding+border border rectangle area

CSS3 has an attribute box-sizing

It has three attribute values:

The width of the border-box--to the element contains the border width height

content-box--set the width of the element is only the content of the width of high

inherit-box--inheriting the parent class type

Box 3D model

I didn't pay attention to these relationships when I first started using CSS, but one day I thought, if I set the Background-color and backagground-image of the elements at the same time, which one would take effect? Again why

And then I found the following relationship.

CSS Box model