DIV+CSS Two box models (box and IE box)

Before differentiating between the two box models, let's briefly explain what is called a box model.

Principle:

First of all, let's talk about the property names that we often hear in web design:content, padding (padding), Border (border), border (margin), CSS Box mode has these properties. These properties we can transfer it to our daily life in the box (box) to understand that the daily life of the box is a box that can be loaded, but also have these properties, so call it box mode. Features: Each box has: border, border, padding, content four properties, each property includes four parts: Upper, right, bottom, left, these four parts can be set at the same time, can also be set separately; the thickness of the anti-seismic accessories, and the border has the size and color of the points, We can also understand the thickness of the box in life and what color the box is made of, and the boundary is how far the box is kept from other things. （ the above principles and characteristics of Baidu）

The following image is a model of the box and the IE box, respectively:

As you can see, the two models are very similar in their entirety. From inside to outside are content,padding,border,margin. But look carefully, the dotted line extends out of the section, respectively, the height and width, but in the Internet, the dotted line surrounded by only the content, while in IE, the dotted line surrounded by content+padding+border. This is the most intuitive difference, and this is the biggest difference between the two models.
The scope of the box model includes margin, border, padding, content, and the Content section contains no other parts
The scope of the IE box model also includes margin, border, padding, content, and the standard box model: The content portion of the IE box model contains border and padding

Use an example to implement the box model:

Operation Result:

This picture can only see the contents and borders. Without a specific dividing line, you do not know the specific arrangement of padding (padding) and content.
Here I would like to introduce a debugging tool, Firefox browser inside the Firebug, for the usual debugging page layout of all aspects of a great help.

This is the debug interface. Mouse check <div> tags, the image changes, the overall layout is very clear. such as

That's very clear. It also shows that the box contains three parts of Content,padding,border.
IE box is not written, the students need to try their own. Most of the current Web page layout is the use of the box, its compatibility is very good, so it is the best choice.