CSS box models (box model)

Box Model is the core of CSS , modern Web layout design is simply a bunch of boxes arranged and nested, master the box model and their placement control, will find a complex This is also true for pages.

However, any good things are flawed, the box model has two different interpretations, one from IE6, one from the standard browser .

Box model
is a typical box model .

Outside of the content area, in turn around the padding area, the border area, and the margin area, this model structure is consistent across all major browsers.

With the box model , we can set boundaries for our content, white space, and margins, the most typical application of the box model is this:

We have a piece of content, you can set a border for the content, in order to let the content is not close to the border, you can set the padding, in order to make this box and other boxes too tight, you can set the margin.

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

Different interpretations of box models by IE6 and the standard browser

When we tried to set the size of a box, the problem arose. IE6 and the World Wide Web browser have different interpretations of the box model, which is expressed in the size of the box, and is a different explanation of the size of the box between the two types of browsers:


As can be seen in the IE6 box model , the size of the box contains the four parts of the content area, padding, border and margin,

In the box model , the box size contains only the content area, and 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, when it comes to dimensions, it does not only calculate the size of the object it is in, but we also count the voids and the box body itself.

Take container packing For example, we have 100 vases, each vase with 1 cartons, in order to prevent the vase broken, we put a bubble around the vase, which is equivalent to padding, carton of cardboard equivalent to border, in the container, in order to prevent collision between the carton, Between the cartons was stuffed with straw, which amounted to margin, and it was clear that we were to freightcompanyWhen we report the size of our goods, we have to tell them the size of the whole carton, along with the gaps between the cartons that need to be stuffed with straw, and if only the size of the vase is reported, the shipping company cannot be boxed.

Another example, if we have a wall, to hang on top 10 paintings, oil painting is a picture frame, the frame of the border is equivalent to border, the distance between the oil painting and the border is equal to padding, the space between the frame is equal to margin, this example and the Web layout design is very close, 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 picture frame, do not have to consider the impact of padding, border, margin this factor, each frame is a whole, as for padding, Border and margin, this is the browser itself, do not need the designer to care.

in a specific Web design

In specific Web designs, especially when it comes to complex grid layouts, IE6 'sBox ModelEasier to control, we might as well take a look at several design scenarios below.

1. Panel-style interface design

The page contains several panels, such as a login panel, a new news panel, a voting panel, this kind of design is typical of the way, with a background map, the first design of the appearance of these panels, will need to replace the specific content of the space, these panels, is nothing more than the use of panel appearanceImageMake a background map of the box, and then, in these boxes, put the specific content, using padding control the placement of the content, using the margin to adjust the position of the panel itself, because the size of the panel is fixed, we have established the size of the box, we do not need to care about the size of the problem, and then, No matter how you adjust padding and margin, it doesn't affect the structure of the panel itself. This is IE6.Box Model。

And in theBox Model, adjusting the padding and margin will affect the size of the box, and you may be able to disrupt the structure of the panel itself while adjusting the placement of the contents.

2. Percent-level size + pixel-level boundary problem

W3cBox ModelThe most troubling thing about the design is that if you have a container with an indeterminate width and want to place two boxes of the same size in it, the most reasonable way is to set the width of each box to 50%, so that

Tube your container width is how large, these two boxes always automatically adapt to this width, however, if you do not set any padding or border, and, in reality, in order to prevent the contents of the two boxes are too close to each other, you must set the padding, once set the padding, You'll find your container is bursting.

Of course, you will say, each box width is not set to 50%, can be set to 45%, and then add a 5% padding for each box, which is aSolveapproach, but we often have this habit in the design, although the width of a piece of content may be uncertain, but we always like it has a fixed padding, we do not want to padding automatically adapt, moreover, in many cases, we want to a self-adaptive width of the box, set a 1-megapixel border , in this case, theBox ModelWill get into trouble.

And in this case, IE6Box ModelDon't need any trouble, just set the width of each box to 50%, they will automatically fit the width of the container, then, no matter how you set padding and border, will not bursting your container.

Precipice on the box model

Although the consortium will never admit it, they are clearly aware of the problem and redefineBox Modelis impossible, so, inCSS3, we see the followingProperties：

box-sizing

Box-sizing has two optional values, one is the defaultcontent-box One is Border-box, choose the latter,Box Modelwill be processed in the IE6 manner.