Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the differences between IE6 and W3C standard box model". In daily operation, I believe many people have doubts about the difference between IE6 and W3C standard box model. I have consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the questions of "what are the differences between IE6 and W3C standard box model"! Next, please follow the editor to study!

Box model (Box Model) is the core of CSS, modern Web layout design is simply the arrangement and nesting of a bunch of boxes, mastering the box model and their placement control, you will find that no matter how complex the page is, however, any good thing has defects, there are two different interpretations of box model, one from IE6, the other from W3C standard browser.

Box model

The following figure is a schematic diagram of a typical box model.

Outside the content area, it surrounds the padding area, the border area, and the margin area in turn, and this model structure is consistent in all major browsers. Through the box model, we can set boundaries, margins and margins for our content. The most typical application of the box model is as follows: we have a section of content, we can set a border for this piece of content, in order to make the content not close to the border, we can set padding, in order to make this box not too close to other boxes, we can set margin.

So far, everything has been very good until we want to set a size for the box.

Different interpretations of box model by IE6 and W3C standard browsers

The problem arises when we try to set the size of a box. IE6 and W3C standard browsers have different interpretations of the box model, which is reflected in the size of the box. The following is a schematic diagram of the different interpretations of the box size by the two types of browsers:

It can be seen that in the IE6 box model, the box size includes the content area, padding,border and margin, while in the W3C box model, the box size only contains 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, if we talk about the size, we will not only calculate the size of the object it contains, we will also take into account the gap and the box itself. Take the container as an example. We have 100vases, each packed in a carton. In order to prevent the vase from breaking, we put foam around the vase, which is equivalent to padding, and the outer cardboard of the carton is equivalent to border. When loading the container, in order to prevent the cartons from colliding with each other, the cartons are stuffed with straw, which is equivalent to margin. Obviously, when we report the size of our goods to the shipping company, It is necessary to tell them the size of the whole carton, as well as the gap between the cartons that need to be stuffed with straw. if only the size of the vase is reported, there is no way for the shipping company to pack it.

To give another example, if we have a wall and we want to hang 10 oil paintings on it, the oil painting is mounted and pasted with a photo frame, the frame is equivalent to border, the distance between the painting and the frame is equivalent to padding, and the distance between the frame is equivalent to margin. This example is very close to the Web layout design. It is easier for anyone to use the IE6 box model to lay out the whole picture frame, including the painting as a whole. When you know the size of the whole frame, you don't have to consider the influence of padding, border and margin. Each frame is a whole. As for padding, border and margin, it is the browser's own business and does not need the designer to care about it.

In the specific Web design

In specific Web designs, especially when complex grid layouts are involved, the box model of IE6 is easier to control. Let's take a look at the following design scenarios.

1. Panel interface design

The page contains several panels, such as a login panel, a * news panel, and a voting panel. The typical practice of this kind of design is to design the appearance of these panels one by one in the way of background maps. These panels will need to be replaced with specific content. These panels are nothing more than boxes that use panel appearance pictures as background pictures, and then, in these boxes. Put the specific content, use padding to control the location of the content, use margin to adjust the location of the panel itself, because the size of the panel is fixed, we establish the size of the box, we no longer need to care about the size, and then, no matter how you adjust the padding and margin, will not affect the structure of the panel itself. This is the IE6 box model.

In the W3C box model, adjusting padding and margin will affect the size of the box, you are very likely to disrupt the structure of the panel itself while adjusting the location of the content.

two。 Percentage size + Pixel Boundary problem

The biggest headache in the design of the W3C box model is that if you have a container with uncertain width and want to put two boxes of the same size in it, the most reasonable thing to do at that time is to set the width of each box to 50%, so that no matter how wide your container is, the two boxes can always adapt to this width automatically, however, if you do not set any padding or border, however, in reality, To prevent the contents of the two boxes from getting too close to each other, you must set padding. Once you set padding, you will find that your container is broken.

Of course, you would say, do not set the width of each box to 50%, you can set it to 45%, and then add a 5% padding for each box, this is a solution, but we often have this habit in design, although the width of a paragraph of content may be uncertain, but we always like it to have a fixed padding, we do not 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 W3C box model will be in trouble.

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

W3C lost its way on the box model

Although the W3C will never admit it, they are clearly aware of the problem, and it is impossible to redefine the box model, so in CSS3, we see the following attribute:

Box-sizing

Box-sizing has two optional values, one is the default content-box and the other is border-box, the latter is chosen, and the box model will be handled in the same way as IE6.

At this point, the study on "what is the difference between IE6 and W3C standard box model" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.