margin疊加的問題

日期：2013-11-27 來源：攀枝花惠康網絡公司

今天有人問我一個margin疊加的問題。有些人喜歡把margin疊加歸納到BUG中去，有些卻不這么認為，他們的理由是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。這里就不說了。

文章來源：攀枝花惠康網絡公司

惠康網絡，是一家專業從事攀枝花網站建設，攀枝花網站制作，攀枝花網站設計公司，提供網站建設一條龍服務（網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣），惠康網絡立足攀枝花，輻射全中國，攀枝花惠康網絡的客戶已經遍布國內各地大中小城市，我們高效優質的網站建設服務深受用戶好評。