首頁 > web前端 > css教學 > div+css網頁佈局設計新開端(5)

div+css網頁佈局設計新開端(5)

黄舟
發布: 2016-12-29 14:28:00
原創
1220 人瀏覽過

下面說說內外邊距合併的問題

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>
登入後複製

a層的下外邊距是20px
下面看圖

div+css網頁佈局設計新開端(5)


沒任何區別

簡單地說,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中較大的者。 div+css網頁佈局設計新開端(5)在看圖




div+css網頁佈局設計新開端(5)如果兩者一樣的px怎麼辦?假如都是20px

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green;
margin-top:10px;
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>
登入後複製

效果還是一樣哦



div+css網頁佈局設計新開端(5)下面測試一下

火狐的顯示div+css網頁佈局設計新開端(5)


可以看出ie6是不合併的,火狐的合併的


可能有人會好奇

這個為什麼紅色沒有貼緊上面的瀏覽框

其實沒有瀏覽器都有默認的內外邊距的div+css網頁佈局設計新開端(5)


只需要

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green;
margin-top:20px;
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>
登入後複製

div+css網頁佈局設計新開端(5)



有些瀏覽器可能要用

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:100px;
background:red;
margin-top:20px;
}
#b{
width:50px;
height:50px;
background:green;
margin-top:10px;
} 
</style> <head>
<body> <div id="a"><div id="b"></div></div> 
</body>
</html>
登入後複製
 以上就是div+css網頁佈局設計新開端(5)的內容,更多相關內容請關注PHPwww.Pwww. )!

div+css網頁佈局設計新開端(5)


來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板