網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

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。這里就不說了。

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

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

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图