The box mode defined by the consortium is as follows:
Width and height define the breadth and height of the content section, and the width of the padding border margin is added to the outside. The background fills the padding and content sections.
However, because of the problem of browser design, different browsers will display a different effect.
The question of margin double
When box is float, the margin in the IE6 box will double
Like what:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>untitled document</title>
<style>
. outer {
width:500px;
height:200px;
Background: #000;
}
. Inner {
Float:left;
width:200px;
height:100px;
margin:5px;
Background: #fff;
}
</style>
<body>
<div class= "outer" >
<div class= "inner" ></div>
<div class= "inner" ></div>
</div>
</body>
The left side of the inner margin significantly greater than 5px.
At this point, the display property of the definition inner is inline.
The problem of automatically calculating height of outer box
According to the definition of the Consortium, the outer box without the Float property does not automatically compute the height, and to calculate the height, you must add Clear:both to the last box in the inner layer.
Opera, Netscape, Mozilla, etc. will not calculate the outer box height, but Microsoft IE6 will automatically calculate the outer height. Like what:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>untitled document</title>
<style>
. outer {
width:600px;
Background: #000;
}
. inner1 {
Float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
. inner2 {
Float:left;
width:200px;
height:100px;
margin:5px;
Background:yellow;
}
</style>
<body>
<div class= "outer" >
<div class= "Inner1" ></div>
<div class= "Inner2" ></div>
</div>
</body>
The above code in IE has a black background, but there is no correct calculation of the upper and lower margin, under Inner2 plus a div containing the Clear:both attribute, you can correctly calculate margin. But 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 add 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. As follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><body>
<div class= "outer" >
<div class= "Inner1" ></div>
<div class= "Inner2" ></div>
<div class= "Clear" ></div>
</div>
</body>
Therefore, the outer CSS defines the overflow property, and the inner layer finally adds the clear attribute.
Center 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 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, we use a very useful technique to solve: Use the text-align attribute on 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 that all elements of the #outer in the Ie5/win are centered (other browsers simply center the text), the second text-align:left is the left of the text in the #warp.
Therefore, in CSS with centered elements, 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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
