合买大神
网站首页 网站建设 公司动态 行业新闻 案例展示 关于我们

文章内容

margin叠加的问题

日期:2013-11-27  来源:攀枝花惠康网络公司


今天有人问我一个margin叠加的问题。?#34892;?#20154;喜欢把margin叠加归纳到BUG中去,?#34892;?#21364;不这么认为,他们的理由是Firefox也有这个问题,所以不能叫bug。呵呵仿佛有点牵强。其实巨匠只要看看w3c的文档,w3c认为margin叠加是合理的。不管是不是bug,可是这个问题真的存在。看下面这个例子:


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head><head>
<style type="text/css">
*{padding:0;margin:0;}
.box{background:#ccc; }
.content{background:#eee;margin: 20px auto;}
.an-box{ margin:50px auto;background:#999999;}
</style>
</head>
<body>
<div class="box">
<div class="content">margin: 20px auto</div>
<div class="content">margin: 20px auto</div>
</div>
<div class="box">
<div class="content">margin: 20px auto</div>
</div>
<div class="box">
<div class="content">margin: 20px auto</div>
</div>
<div class="an-box">margin: 50px auto</div>
</body>
</html>

解决这个问题的体例有不少,先来看看这个,在外层的容器中加:overflow:hidden;zoom:1;

因为margin在浏览器中的BUG良多,有人强烈举荐尽量不要使用margin,而用padding!我很奇异,我们在前端开发的时辰,虽然他们良多时辰可以随便用什么,可是良多时辰我们不得不用margin。绝年夜年夜都的margin引起的BUG是可以解决。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head><head>
<style type="text/css">
*{padding:0;margin:0;}
.box{background:#ccc; overflow:hidden;zoom:1 }
.content{background:#eee;margin: 20px auto; }
.an-box{ margin:50px auto;background:#999999;}
</style>
</head>
<body>
<div class="box">
<div class="content">这里两个仍是存在叠加margin: 20px auto</div>
<div class="content">这里两个仍是存在叠加margin: 20px auto</div>
</div>
<div class="box">
<div class="content">margin: 20px auto</div>
</div>
<div class="box">
<div class="content">margin: 20px auto</div>
</div>
<div class="an-box">margin: 50px auto</div>
</body>
</html>


还有外层的容器中加边框属性,在叠加元素加空块状元素等等。。还有就是用padding来庖代margin。这里就不说了。

文章来源:攀枝花惠康网络公司

惠康网络,是一家专业从事攀枝花网站建设,攀枝花网站制作,攀枝花网站设计公司,提供网站建设一条龙服务(网站域名注册+网站服务器租用+网站开发+网站维护+网站营销推广),惠康网络立足攀枝花,辐射全中国,攀枝花惠康网络的客户已经遍布国内各地大?#34892;?#22478;市,我们高效优质的网站建设服务深受用户好评。

客服?#35748;擼?img src="skin/images/tel.png" alt="tel" height="15" width="84" style="vertical-align:middle;">(谢先生)  客服QQ:1323605005  
服务邮箱:[email protected](售前咨询)  [email protected](技术部)  [email protected](售后服务)
公司地址:四川省攀枝花市
?#26102;啵?/span>617200

合买大神 广岛三箭vs清水鼓动 西汉姆联vs莱切斯特城 云南时时彩平台 卡利亚里vs佛罗伦萨 南安普敦粤语 重庆幸运农场走势图 比利亚雷亚尔对巴伦西亚前瞻 瓦伦西亚旅店 有啊百度时时彩走势图 蒙彼利埃vs伊维恩