margin叠加的问题
时间:2010-02-02 20:45来源:未知 作者:admin 点击:次
由于margin在浏览器中的BUG很多，有人强烈推荐尽量不要使用margin，而用padding！我很奇怪，我们在前端开发的时候，虽然他们很多时候可以随便用什么，但是很多时候我们不得不用margi
由于margin在浏览器中的BUG很多，有人强烈推荐尽量不要使用margin，而用padding！我很奇怪，我们在前端开发的时候，虽然他们很多时候可以随便用什么，但是很多时候我们不得不用margin。
由于margin在浏览器中的BUG很多，有人强烈推荐尽量不要使用margin，而用padding！我很奇怪，我们在前端开发的时候，虽然他们很多时候可以随便用什么，但是很多时候我们不得不用margin。绝大多数的margin引起的BUG是可以解决。
今天有人问我一个margin叠加的问题。有些人喜欢把margin叠加归纳到BUG中去，有些却不这么认为，他们的理由是Firefox也有这个问题，所以不能叫bug。呵呵好像有点牵强。其实大家只要看看w3c的文档，w3c认为margin叠加是合理的。不管是不是bug，但是这个问题真的存在。看下面这个例子：
view sourceprint?01.< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
05.</head><head>
06.<style type="text/css">
07.*{padding:0;margin:0;}
08..box{background:#ccc; }
09..content{background:#eee;margin: 20px auto;}
10..an-box{ margin:50px auto;background:#999999;}
11.</style>
12.</head>
13.<body>
14.<div class="box">
15.<div class="content">margin: 20px auto</div>
16.<div class="content">margin: 20px auto</div>
17.</div>
18.<div class="box">
19.<div class="content">margin: 20px auto</div>
20.</div>
21.<div class="box">
22.<div class="content">margin: 20px auto</div>
23.</div>
24.<div class="an-box">margin: 50px auto</div>
25.</body>
26.</html>
解决这个问题的方法有不少，先来看看这个，在外层的容器中加：overflow:hidden;zoom:1；
view sourceprint?01.< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
05.</head><head>
06.<style type="text/css">
07.*{padding:0;margin:0;}
08..box{background:#ccc; overflow:hidden;zoom:1 }
09..content{background:#eee;margin: 20px auto; }
10..an-box{ margin:50px auto;background:#999999;}
11.</style>
12.</head>
13.<body>
14.<div class="box">
15.<div class="content">这里两个还是存在叠加margin: 20px auto</div>
16.<div class="content">这里两个还是存在叠加margin: 20px auto</div>
17.</div>
18.<div class="box">
19.<div class="content">margin: 20px auto</div>
20.</div>
21.<div class="box">
22.<div class="content">margin: 20px auto</div>
23.</div>
24.<div class="an-box">margin: 50px auto</div>
25.</body>
26.</html>
还有外层的容器中加边框属性，在叠加元素加空块状元素等等。。还有就是用padding来取代margin。这里就不说了。 |
(责任编辑：admin) |
------分隔线----------------------------