Analysis of box (box mode) in CSS _css/html

This article uses the box legend, the CSS box (box mode) analysis, for the learning CSS reader to establish a clear model.

The box pattern defined by the consortium is as follows:

Width and height define the widths and heights of the Content section, and the width of the padding border margin is added to the outside in turn. The background fills the padding and content sections.
However, due to browser design problems, different browsers display different results.
The question of doubling the left and right margin
When box is float, the margin in the box around the IE6 doubles
The left margin of the inner is significantly greater than 5px.
At this point, the display property of the definition inner is inline.
The outer box automatically calculates the height of the problem
According to the definition, the outer box without the float attribute does not automatically calculate the height, and the height must be calculated by adding Clear:both to the last box in the inner layer.
Opera, Netscape, Mozilla, etc. do not calculate the outer box height, but Microsoft IE6 automatically calculates the outer height.

The above code has a black background in IE, but there is no correct calculation of margin, the margin can be calculated correctly after adding a div with the Clear:both attribute under Inner2. However, Firefox still does not have a black background, the usual solution is to define the height of the div clear:both, or insert full-width spaces, so you have to increase the extra height. A better solution on the web is to add the overflow attribute to the outer div and use the clear:both so that no extra height is added.

Therefore, the outer CSS defines the overflow property, and the inner layer is finally added with the clear property.
Centering problem
You need to define the width of the element, and define a horizontal margin, if your layout is contained in a layer (container), like this:
You can define this so that it is centered horizontally:
#wrap {
width:760px; /* Modify the width of your layer */
margin:0 Auto;
But Ie5/win does not display this definition correctly, and we use a very useful technique to solve it: using the Text-align property in the outer layer. Just like this:
#outer {
Text-align:center;
}
#wrap {
width:760px; /* Modify the width of your layer */
margin:0 Auto;
Text-align:left;
} the first #outer text-align:center; The rule defines the center of all the elements #outer in Ie5/win (other browsers just center the text), and the second text-align:left is to leave the text in #warp to the left.
Therefore, in the CSS with the center element, the outer CSS defines the Text-align:center attribute, the inner layer is defined with the MARGIN:X Auto x Auto, and the text-align is redefined.

