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

Source: Internet
Author: User

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.




Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.