Box Model of CSS)

Source: Internet
Author: User

The box model is the core of CSS. The modern web layout design simply refers to the arrangement and nesting of a pile of boxes, and the box model and their placement control are mastered, we will find that the complex pages are not the same. However, there are flaws in any beautiful things. The box model has two different interpretations, one from IE6, A standard W3C browser.

Box Model
Is a typical Box Model

 

Outside the content area, the model structure is consistent across all mainstream browsers. Through the box model, we can set borders, whitelists, and margins for our content. The most typical application of the box model is this: we have a section of content that can set a border for this section, to prevent the content from being close to the border, you can set padding. To prevent the box from being too tight with other boxes, you can set margin.

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

Different interpretations of the box model by IE6 and W3C standard browsers
The problem arises when we try to set the size for a box. IE6 and W3C standard browsers have different interpretations of the box model, which are represented in the box size. They are two different interpretations of the box size:

 

 

It can be seen that in the IE6 box model, the size of the box contains the content area, padding, border, and margin. In the W3C box model, the size of the box only contains the content area, padding, border, and margin are excluded from the box size.

Why is the IE6 box model 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 objects it holds, but also calculate the gap and the box itself. Taking Container packing as an example, we have 100 vases, each of which is packed in one carton. To prevent the vase from being broken, we put foam around the vase, which is equivalent to padding, the peripheral cart of the carton is equivalent to border. When loading containers, straw is inserted between the carton to prevent collision between them, which is equivalent to margin. Obviously, when we report the size of our goods to the freight company, we need to tell them the size of the entire carton, together with the gap between the carton and the straw. If we only report the vase size, there is no way for freight companies to pack.

For another example, if we have a wall, we need to mount 10 oil paintings on it. The oil paintings are blurred with frames. The border of the frames is equivalent to border, and the distance between the oil paintings and borders is equivalent to padding, the interval between frames is equivalent to margin. This example is very similar to the web layout design. For anyone, use the IE6 box model to change the entire frame, including oil painting as a whole is easier to layout. When you know the size of the entire photo frame, you don't have to consider the influence of padding, border, and margin. Each photo frame is a whole, as for padding, border and margin, This is the browser's own business and does not need to be concerned by designers.

In a specific web design
In specific web design, especially when complicated grid layout is involved, the IE6 box model 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 logon panel, a latest news panel, and a voting panel. A typical design of this type is to use a background image, first, design the external images of these panels one by one, and leave the places that need to be replaced with specific content empty. These panels are nothing more than boxes that use panel exterior images as background images. Then, put specific content in these boxes, use padding to control the placement of content, and use margin to adjust the placement of the Panel itself. Because the Panel size is fixed, after setting the size of the box, we don't need to worry about the size. No matter how you adjust the padding and margin, the structure of the Panel is not affected. This is the IE6 box model.

In the W3C box model, adjusting padding and margin will affect the size of the box. When you adjust the content placement position, it is very likely to disrupt the structure of the Panel.

2. percent-level size + pixel-level Boundary Problems

The W3C box model is designed to put two boxes of the same size in a container with an uncertain width, the most reasonable way is to set the width of each box to 50%, so that no matter how wide your container is, the two boxes can automatically adapt to this width. However, the premise is that you do not set any padding or border. In reality, to prevent the content in the two boxes from getting too close to each other, you must set the padding. Once padding is set, you will find that your container is broken.

Of course, you will say that the width of each box should not be set to 50%, but can be set to 45%, and then add a 5% padding for each box. This is a solution, but we often have this habit in our design. Although the width of a piece of content may be uncertain, we always like it to have a fixed padding, and we don't want it to automatically adapt. Besides, in many times, we hope to set a 1 pixel border for an adaptive width box. In this case, the W3C box model will be in trouble.

In this case, the IE6 box model does not require 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 won't break your container.

W3C gets lost in the Box Model
Although W3C will never admit it, they are aware of this problem and it is impossible to redefine the box model. Therefore, in css3, we can see the following attribute:

Box-Sizing

Box-sizing has two optional values: one is the default content-box and the other is the border-box. If the latter is selected, the box model is processed in ie6.

 

Related Article

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.