The box model of the IE6 and the model of the box

In the IE6 box model, the size of the box contains the four parts of the content area, padding, border and margin, and in the box model of the consortium, the size of the box contains only the content area, and padding,border and margin are excluded from the box size.

Box model is the core of CSS, modern Web layout design is simply a pile of boxes and nesting, mastered the box model and their placement control, will find the complex page is so, however, any good things have regrets, the box model has two different interpretations, one from IE6, a standard browser from the consortium.

Box model

The diagram below is a typical schematic of a box model

Outside the content area, the padding area, the border area, and the margin area are all aligned, and the model structure is consistent across all major browsers. With the box model, we can set boundaries for our content, white and margin, box model the most typical application is this: we have a piece of content, you can set a border, so that the content is not next to the border, you can set padding, in order to make this box and the other boxes too tight , you can set the margin.

So far, everything is perfect until we want to set a size for the box.

Different interpretations of box models by IE6 and the standard browsers

When we try to set a size for a box, the problem arises. The IE6 and the standard browsers have different interpretations of the box model, which is represented by the size of the box, and the following diagram shows the different interpretations of the box size by two types of browsers:

As can be seen, in the IE6 box model, the size of the box contains the content area, padding, border and margin of the four parts, while the box model of the Consortium, the box size contains only the content area, Padding,border and margin are excluded from the box size.

Why IE6 's box model is more reasonable

In the real world, when we describe a physical box, if we talk about size, we will not only calculate the size of the object it holds, we also count the voids and the box body itself. Take container box as an example, we have 100 vases, each vase in 1 carton packaging, in order to prevent the vase broken, we have a bubble around the vase, which is equivalent to padding, cartons of cardboard equivalent to border, in the loading of containers, in order to prevent collisions between the cartons, Between the cartons of straw, which is equivalent to margin, it is clear that when we report our cargo size to the shipping company, we are going to tell them the size of the carton, together with the gap between the cartons that need to be stuffed, and if only the size of the vase is reported, the shipping company is not able to

To give another example, if we have a wall, we have to hang 10 of oil paintings, oil painting is framed by the frame, the frame is equivalent to border, the distance between the canvas and the border is equivalent to padding, the space between the frame is equivalent to margin, this example and Web layout design is very close to the For anyone, using the IE6 box model, the entire picture frame, including oil painting as a whole easier to layout, when you know the size of the entire frame, do not have to consider the padding, border, margin the impact of this factor, each frame is a whole, as for the padding, Border and margin, this is the browser itself, do not need the designer to care.

In a specific WEB design

In the specific WEB design, especially involved in the complex grid layout, the IE6 box model is easier to control, we may wish to look at the following design scenarios.

1. Panel-type interface design

There are several panels on the page, such as a login panel, a new news panel, a voting panel, which is typically done in the form of a background map, which first designs each of these panels in a way that will need to be replaced with specific content, these panels, Nothing more than a box with a background picture of a panel appearance then, in these boxes, put the specific content, using padding control the placement of content, using margin adjust the position of the panel itself, because the size of the panel is fixed, we have established the size of the box, There is no need to care about the size problem, then, no matter how you adjust padding and margin, it will not affect the structure of the panel itself. This is the IE6 box model.

And in the box model of the padding, adjust the size of the box, you adjust the contents of the placement of the location, it is very likely to disrupt the structure of the panel itself.

2. Percentage level dimension + pixel level boundary problem

The most frustrating thing about the design of the box model of the If you have a container with an indeterminate width, and you want to place two boxes of the same size inside, the most sensible thing to do is to set the width of each box to 50%, so that no matter how wide your container is, the two boxes automatically adapt to this width, however, The premise is that you do not set any padding or border, and, in reality, in order to prevent the contents of two boxes from getting too close to each other, you must set the padding, once the padding is set, you will find that your container is bursting.

Of course you would say that the width of each box should not be set to 50%, can be set to 45%, then add a 5% padding for each box, this is a solution, but we often have such a habit in the design, although the width of the content may be uncertain, but we always like it has a fixed padding, We don't want padding to adapt automatically, and, in many cases, we want to set a 1-pixel border for an adaptive-width box, in which case the model will get bogged down.

In this case, the IE6 box model does not need any difficulty, you just set the width of each box to 50%, they will automatically adapt to the width of the container, then, no matter how you set padding and border, will not burst your container.

W3C on the box model precipice

Although the consortium will never admit it, they are obviously aware of the problem, redefining the box model is not possible, so in CSS3 we see the following attribute:

Box-sizing

Box-sizing has two optional values, one is the default Content-box one is Border-box, the latter is selected, and the box model is processed in a IE6 manner.