Analysis of box (box mode) in CSS_CSS/HTML

This article uses the illustration of box to analyze the box (box mode) in CSS, establishing a clear model for readers learning CSS.

The box pattern defined by W3C is as follows:

width and height define the width and height of the Content part, and the width of the padding border margin is added to the outside in turn. The background will fill the padding and content parts.
However, due to browser design issues, the display effects of different browsers will be somewhat different.
The problem of doubling the left and right margins
When the box is float, the left and right margins of the box in IE6 will double.
The left margin of the left inner is obviously larger than 5px.
At this time, define the display attribute of inner as inline.
The problem with automatic height calculation of the outer box
According to W3C definition, the outer box without float attribute will not automatically calculate the height. To calculate the height, clear: both must be added to the last box of the inner layer.
Opera, netscape, mozilla, etc. will not calculate the outer box height, but Microsoft ie6 will automatically calculate the outer box height.

The above code has a black background in IE, but the upper and lower margins are not calculated correctly. After adding a div containing the clear:both attribute below inner2, the margin can be calculated correctly. But there is still no black background in Firefox. The usual solution is to define the height of the clear:both div, or insert a full-width space, so additional height must be added. A better solution online is to add the overflow attribute to the outer div and use clear:both at the same time, so that no additional height is added.

Therefore, the overflow attribute must be defined in the outer layer of css, and the clear attribute must be added to the inner layer at the end.
Centering problem
You need to define the width of the element and define the horizontal margin. If your layout is contained in a layer (container), like this:
You can define it like this to center it horizontally:
#wrap {
width:760px; /* Modify to the width of your layer*/
margin:0 auto;
}

But IE5/Win cannot display this definition correctly. We use a very useful trick to solve it: use the text-align attribute in the outer layer. Like this:
#outer {
text-align:center;
}
#wrap {
width:760px; /* Change to the width of your layer*/
margin:0 auto;
text-align:left;
}

The first text-align:center; rule of #outer defines that all elements of #outer in IE5/Win are centered (other browsers just center the text), and the second text-align:left; is Move the text in #warp to the left.
Therefore, in CSS with centered elements, the outer CSS should define the text-align:center attribute, the inner centering should be defined with margin:x auto x auto, and text-align should be redefined.