Web development: Understanding the css Box Model

After mastering a rich and powerful css selector, you can apply css styles to any element on the webpage as needed. When rules can be applied, you need to master the rule formulation method-what kind of Attribute combination can achieve what kind of effect. General settings such as color, Font, font size, and line size are easier to grasp. When Beginners use css, the main headache is how to use css to implement complex web page layout, from two-column layout, three-column layout, to form design. In the layout, it is mainly implemented by the combination of element width, height, positioning, floating, margin, border, distance, background color, and background image. All of these are based on the understanding of the css box model. There are many discussions on the box model on the Internet. I would like to talk about it from a practical point of view.

There are two famous pictures on the Internet that describe the css Box Model in 2D and 3D formats:

The two images provide a more intuitive understanding of margin, border, background-color, background-image, padding, width, and height.

More importantly, you need to know the following:

1. All elements presented in block mode have the characteristics of this model, not just div;
2. Margin is based on the parent element (often referred to as the "Container") of the specified element;
3. The size of an element (usually a block element) on the page is as follows: width = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right; height = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom; (Some browsers have differences, );
4. Background-color fills up all the border's internal ranges. By default, background-image is aligned with the top left corner of the border, and then completely displays the entire image (the excess part is not displayed ), if the image size is not full, the image will be repeated until it is full or exceeds the range by default;
5. The background-image is superimposed on the background-color. You can change the position of the background-image by specifying the alignment of the image;

Through the combination of the above rules, various decoration effects can be achieved under a limited combination of elements. A simple example is as follows:

Place a solid color image with a 15-pixel height and a color of # c00 into a block element with a height of 30 pixels and a background color of # f00. The image is not tiled in the Y axis, tile in the X axis direction. The result shows a similar effect:

This is simply achieved by combining the background color and background image. According to this principle, when our document structure has two layers, for example, <a href = "#"> <span> text </span> </a>, we can combine the background color image of element a with the background color image of element span to obtain more complex effects, for example:

 

This button effect can be easily achieved with a pure image, but the problem is that it is not universal. To be generic, we should separate the text from the background image. At the same time, because there are many and few texts, the width of the button should be variable, however, the buttons do not have a completely consistent background from left to right, so you cannot use an image for horizontal tile. In the past, a table with one row and three columns may be used, put the first cell into the picture on the left. Put the text in the middle cell and the background of the Peace shop. Put the right cell into the picture on the right. This kind of thinking is passed to the Layout thinking mode of "div + css", so the structure is as follows:

Copy to ClipboardReference content: [www.bkjia.com] <div class = "button"> <div class = "left"> </div> <div class = "center"> </div> <div class =" right "> </div>

The appearance of this structure is to implement the auto-adaptive width button, which still exists today. In fact, this effect can be achieved by using the basic structure of a + span above. Combine the edge image in the middle part and the left or right side, and make the duplicate part wider as the background image of, use the image on the other side as the background image of span to overwrite the background image of. The combination looks like a whole. The Code is as follows:

The effect is as follows:

 

Copy to ClipboardReference: [www.bkjia.com] a {display: block; width: 200px; height: 36px; background: url(button.gif) no-repeat right bottom ;}
A span {display: block; line-height: 36px; background: url(button.gif) no-repeat left top; color: # fff; text-decoration: none; text-align: center ;}

The background image is as follows:

 

This example is very simple, but you need to have enough understanding of the "background combination" To think of applications. To think of such an application, we must first have a sufficient understanding of the "background" in the box model. Otherwise, we will only think of three divs (or other element combination methods), but because the two structures are identical, to distinguish them, we have to use class or id to mark them. This is the unnecessary class and id I mentioned in the previous article.

In addition to using display: block to change the element in the row into a block element and use the box model features, some features of the box model are often used during floating. Another example:

When floating layout is used, if the first floating element in the parallel display is set to the same margin as the floating direction, in IE 6, the margin double bug will appear (this is the famous IE6 floating margin double bug ). To solve this problem, many people like to add class = "first" to the first of a group of floating elements, so that they can apply styles to this element separately. Or add the display: inline attribute to the floating element to solve this bug.

Both methods do not use the hack selector or non-standard attributes such as "_ margin. However, if you do not use margin, you only need to use padding instead of margin to solve this problem. You can also use a margin that is opposite to the floating direction. No additional hack is required. This is also based on the full understanding of the box model, because of the understanding of this bug, so as to directly avoid implementing the style, rather than using additional means to hack.

In addition to the five attributes of margin, border, padding, width, and height, as well as the application of the two backgrounds, we also need to understand the relationship between parent-level elements and child elements. For example, if no size is set for the parent element, but the margin-top attribute is set for the child element, in some browsers, you would like to set the margin for the edge of the parent element, as a result, margin is set out of the parent element, resulting in the margin of the parent element and the external element. In this case, you can change the child element's margin to the parent element's padding, or you can achieve the same effect without changing the performance.

To fully apply the features of the Box Model to reduce the use of hack in css, or to implement more complex effects with more concise code, we need to constantly try and summarize the box model. This is a classic masterpiece such as the css authoritative guide and cannot be taught to you.

The more you understand the box model, the better you can use floating and positioning to achieve a complex and precise layout. Let's take a look at the floating problem next time.