width和height定义是Content部分的宽度和高度,padding,border,margin的宽度依次加在外面.背景会填充padding和content部分.不同的浏览器显示的效果有些不同.左右margin加倍问题当div为float时,IE6中左右的margin 会加倍.
W3C定义的盒模型模式如下:
width和height定义的是Content部分的宽度和高度,padding,border,margin的宽度依次加在外面.背景会填充padding 和content部分.
但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同.
1:左右Margin加倍的问题
当div为float时,IE6中div左右的margin会加倍.比如:
解决方法:定义inner的display:inline;
2:外层div自动计算高度的问题
根据W3C定义,在微软的IE6中会自动计算外层的高度.在Opera,netscape,firefox 等不会计算外层div的高度.
3 居中问题:
需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：
#d
{
margin:0px auto;
width:500px; /*自定义宽度*/
}
你可以这样定义使它横向居中
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：在外层用text-align属性。就象这样：
Example Source Code [www.52css.com]
第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
因此，在有居中元素的css中，外层css要定义text-align:center属性，内层居中用margin:x auto x auto定义，并重新定义text-align。
W3C定义的盒模型模式如下:
width和height定义的是Content部分的宽度和高度,padding,border,margin的宽度依次加在外面.背景会填充padding 和content部分.
但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同.
1:左右Margin加倍的问题
当div为float时,IE6中div左右的margin会加倍.比如:
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5<title>www.52css.com</title>
6<style>
7.outer {
8width:500px;
9height:200px;
10background:#000;
11}
12.inner {
13float:left;
14width:200px;
15height:100px;
16margin:5px;
17background:#fff;
18}
19</style>
20</head>
21<body>
22<div class="outer">
23<div class="inner"></div>
24<div class="inner"></div>
25</div>
26</body>
27</html>
左面的inner的左面的margin明显大于5px,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>www.52css.com</title>6
<style>
7
.outer {
.outer 8
width:500px;9
height:200px;10
background:#000;11
}12
.inner {13
float:left;14
width:200px;15
height:100px;16
margin:5px;17
background:#fff;18
}19
</style>20
</head>21
<body>22
<div class="outer">23
<div class="inner"></div>24
<div class="inner"></div>25
</div>26
</body>27
</html>解决方法:定义inner的display:inline;
2:外层div自动计算高度的问题
根据W3C定义,在微软的IE6中会自动计算外层的高度.在Opera,netscape,firefox 等不会计算外层div的高度.
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5<title>www.52css.com</title>
6<style>
7.outer {
8width:600px;
9background:#000;
10}
11.inner1 {
12float:left;
13width:200px;
14height:100px;
15margin:5px;
16background:red;
17}
18.inner2 {
19float:left;
20width:200px;
21height:100px;
22margin:5px;
23background:yellow;
24}
25</style>
26</head>
27<body>
28<div class="outer">
29<div class="inner1"></div>
30<div class="inner2"></div>
31</div>
32</body>
33</html>
上面的代码在ie中有黑色的背景，但是没有正确的计算上下的margin，在inner2下面加上一个包含clear:both属性的div后，可以正确计算margin。但是firefox中仍然没有黑色背景，通常的解决办法是定义一下clear:both这个div的高度，或者插入全角空格，这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性，同时使用clear:both，这样就不会增加额外的高度了。如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>www.52css.com</title>6
<style>7
.outer {8
width:600px;9
background:#000;10
}11
.inner1 {12
float:left;13
width:200px;14
height:100px;15
margin:5px;16
background:red;17
}18
.inner2 {19
float:left;20
width:200px;21
height:100px;22
margin:5px;23
background:yellow;24
}25
</style>26
</head>27
<body>28
<div class="outer">29
<div class="inner1"></div>30
<div class="inner2"></div>31
</div>32
</body>33
</html> 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5<title>www.52css.com</title>
6<style>
7.outer {
8width:600px;
9background:#000;
10overflow:auto;
11}
12.inner1 {
13display:inline;
14float:left;
15width:200px;
16height:100px;
17margin:5px;
18background:red;
19}
20.inner2 {
21display:inline;
22float:left;
23width:200px;
24height:100px;
25margin:5px;
26background:yellow;
27}
28.clear {
29clear:both;
30}
31</style>
32</head>
33<body>
34<div class="outer">
35<div class="inner1"></div>
36<div class="inner2"></div>
37<div class="clear"></div>
38</div>
39</body>
40</html>
因此，外层css要定义overflow属性，内层最后要加上clear属性。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>www.52css.com</title>6
<style>7
.outer {8
width:600px;9
background:#000;10
overflow:auto;11
}12
.inner1 {13
display:inline;14
float:left;15
width:200px;16
height:100px;17
margin:5px;18
background:red;19
}20
.inner2 {21
display:inline;22
float:left;23
width:200px;24
height:100px;25
margin:5px;26
background:yellow;27
}28
.clear {29
clear:both;30
}31
</style>32
</head> 33
<body>34
<div class="outer">35
<div class="inner1"></div>36
<div class="inner2"></div>37
<div class="clear"></div>38
</div>39
</body>40
</html>3 居中问题:
需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：
#d{margin:0px auto;width:500px; /*自定义宽度*/}你可以这样定义使它横向居中
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：在外层用text-align属性。就象这样：
Example Source Code [www.52css.com]#outer {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}
第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
因此，在有居中元素的css中，外层css要定义text-align:center属性，内层居中用margin:x auto x auto定义，并重新定义text-align。
来源：https://www.cnblogs.com/86188281/archive/2007/11/29/976933.html