Box Model)

If you want to master the layout of Div and CSS, you must first have a sufficient understanding of the box model. Every HTML element can be regarded as a box with something loaded. The distance between the content in the box and the border of the box is the padding. The box itself has a border (Border ), there is a boundary (margin) between the outer border of the box and other boxes, as shown in 1.

Figure 1 box model Diagram

Fill, border, and border are divided into four directions: "Top right bottom left", which can be defined separately or uniformly.
The width and height defined in CSS indicate the content range within the filling, so an element:
　　Actual width = left border + Left Border + Left fill + content width (width) + right fill + Right Border
　　Actual Height = upper border + upper fill + content height + lower fill + lower border
For example, CSS is defined as follows: # menu {
Background: # 9cf;
Margin: 20px;
Border: 10px solid #039;
Padding: 40px;
Width: 200px;
}

The actual width is 2.

Figure 2 Calculation of the total element width

For Windows ie 5.x and earlier versions, the definition of this box model is wrong. It considers:
　　Width = element content + fill + border
This is indeed easy to make a mistake. Many people who do not have a deep understanding of the definition of the box model can also make this mistake.
Example: # menu {
Width: 200px;
Padding: 5px;
Border: 1px solid # CCC;
}

In ie5.5, divActual contentThe width is 200px-5px-1px-5px-1px = 188px, while the width is 200px in Firefox, opera, ie 6, and other browsers.
This is one of the reasons why many new users find that the pages they define are misplaced in different browsers.
Therefore, we need to take some remedial measures. Generally, we can avoid defining the width, fill, and border of elements at the same time, and place some definitions in the sub-elements of the elements.
If you must define these values at the same time, you can also use some measures to correct this error, which is commonly known as CSS hack. The basic idea is to provide a correct width value for Browsers without errors, for browsers with problems such as ie5.5, another value is provided.

Example: # menu {
Padding: 5px;
Width: 110px;
Voice-family :"\"}\"";
Voice-family: Inherit;
Width: 100px;
}

In the definition, the first width: 110px is the width of the elements considered by IE 5.5, 100px + 5px + 5px. Voice-family :"\"}\"";
Voice-family: Inherit;

Is the speech attribute in css2.0. Because Windows ie5.5 does not fully support css2.0 and does not recognize this attribute, it jumps to the next selector. However, other browsers (including IE6) will continue to interpret the following definition, because CSS is "stacked", that is, for the same attribute of the same selector, the subsequent definition will overwrite the previous definition. Therefore, for other browsers, # The Menu width is 100px.

Another common hack method is to use! Important (Declaration). After the declaration is added to the CSS attribute definition, the level of this attribute will become the highest. Even if the same definition is followed, the declared definition will not be overwritten, however, ie does not! Important.

For example, the following CSS definition is available: # box {
Border: 1px solid # b51c8c;
Width: 768px;
}

The correction method 3 is shown in.

Figure 3 CSS correction for IE

For support! Important's browser will accept width: 768px, while IE6 does not! Important, but since it cannot interpret "/**/(empty comment)", it will ignore the subsequent definition, while IE 5.5 will accept the last defined width: 770px, therefore, the purpose of correction is achieved.

Note the following points about the box model:

· For block-level elements (display: Block), the upper and lower boundaries of non-floating vertical adjacent elements are compressed. For example, there are two upper and lower elements, the bottom boundary of the above element is 5px, and the upper boundary of the following element is 20px, the actual spacing of the two elements is 20px (the larger value of the two boundary values ). 4.

Figure 4 Border compression Note 1. Block-level elements (display: Block)
Each block-level element starts from a new line, and the subsequent element must start with another line. The title, paragraph, table, layer, body, and so on are block-level elements. Block-level elements can only be child elements of other block-level elements, and certain conditions are required.

· Inline elements, such as <A> and <span>, define the upper and lower boundary and do not affect the line-height. The distance between inline elements and the element of the previous row is determined by the Row Height, instead of filling or boundary. Note 2. inline elements (display: inline)
Inline elements do not need to be displayed in the new line, nor are they forced to wrap the subsequent elements, such as A, em, and span. An inline element can be a child element of any other element.

· The floating element (whether Left or Right floating) boundary is not compressed. If the floating element does not declare the width, its width tends to 0, that is, the minimum width that can be compressed to its content.

· If there is no content in the box, even if both the width and height are defined as 100%, it actually only accounts for 0%, so it will not be displayed. Pay special attention to this point when adopting layer layout.

· The boundary value can be negative, and the display effect may vary with browsers.

· The fill value cannot be negative.

· The default border style (border-style) is not displayed (none ).

From: http://www.ddcat.net/blog/archives/2007/02/138.html