Analysis of box in CSS

This article uses the box legend to analyze the box (box mode) in CSS and builds a clear model for readers who want to learn CSS.

The W3C defines the following box mode:

Width and height define the width and height of the content part, and add the width of padding border margin to the outside in sequence. The background is filled with the padding and content sections.
However, due to browser design issues, different browsers may have different display effects.
The problem of doubling left and right margin
When the box is float, the margin around the box in IE6 doubles.
The left margin of the inner is greater than 5px.
At this time, the display attribute of inner is defined as inline.
Automatic Height Calculation for outer box
According to W3C definition, the outer box without the float attribute does not automatically calculate the height. to calculate the height, you must add clear: both to the last box in the internal layer.
Opera, Netscape, and Mozilla do not calculate the outer box height, but Microsoft IE6 automatically calculates the outer box height.

The aboveCodeIn IE, there is a black background, but there is no correct calculation of the upper and lower margin. After adding a div containing the clear: Both attribute under inner2, you can calculate the margin correctly. However, Firefox still does not have a black background. The common solution is to define the height of the DIV "clear: both", or insert spaces in the full corner, so that the extra height must be increased. A better solution on the net is to add the overflow attribute to the outer Div and use clear: both at the same time, so that no extra height will be added.

Therefore, the overflow attribute must be defined for the outer CSS, and the clear attribute must be added for the inner layer.
Center problem
You need to define the element width and the horizontal margin. If your layout is contained in a layer (container), it is like this:
You can define it to center horizontally as follows:
# Wrap {
Width: 760px;/* change the width of your Layer */
Margin: 0 auto;
}

However, ie5/win cannot correctly display this definition. We use a very useful technique to solve this problem: Use the text-align attribute in the outer layer. Like this:
# Outer {
Text-align: center;
}
# Wrap {
Width: 760px;/* change the width of your Layer */
Margin: 0 auto;
Text-align: left;
}

The first # outer's text-align: center; rule defines all the elements in ie5/win # outer in the center (other browsers only center the text), and the second text-align: left; is to place the text in # warp to the left.
Therefore, in CSS with a center element, the outer CSS should define the text-align: center attribute, and the inner layer should be defined by margin: X auto x auto and the text-align should be redefined.