|
我發(fā)現(xiàn)當(dāng)我想寫好一篇博文的時(shí)候，希望以后能有人看到，會(huì)對(duì)別人也有一定的幫助，這時(shí)候?qū)τ谄渲械膬?nèi)容就變得深思熟慮起來，讓自己查閱盡可能多的資料，這樣的方式正好可以彌補(bǔ)我某些方面的不足，讓我能夠深入了解一些可能平常不太注意的知識(shí)點(diǎn)，哈哈，但可能還是會(huì)存在局限性：P。如果能堅(jiān)持寫博文的話，一定會(huì)是一件超棒的事情。這些就只是我自己的碎碎念：）~ 盒子模型講到margin，不可避免的就又要說到盒子模型，盒子模型包括了：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性（這里只說W3C標(biāo)準(zhǔn)的盒子模型）。如下圖所示： 
margin相關(guān)屬性margin簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有外邊距屬性。該屬性可以有1-4個(gè)值。margin的默認(rèn)值是0。沒有繼承性，也就是說給父元素設(shè)置的margin值并不會(huì)自動(dòng)傳遞到子元素中。 一個(gè)參數(shù)margin: 10px;
兩個(gè)參數(shù)margin: 10px 5px;
上外邊距和下外邊距是10px 右外邊距和左外邊距是5px
三個(gè)參數(shù)margin: 10px 5px 15px;
上外邊距是10px 右外邊距和左外邊距是5px 下外邊距是15px
四個(gè)參數(shù)margin: 10px 5px 15px 20px;
上外邊距是10px 右外邊距是5px 下外邊距是15px 左外邊距是20px
設(shè)置四個(gè)外邊距的順序是上、右、下、左，請(qǐng)記住順時(shí)針即可。 margin外邊距合并<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
div {
margin: 20px;
color: #fff;
}
.top {
background: green;
}
.bottom {
background: orange;
}
</style>
</head>
<body>
<div class="top">margin: 20px</div>
<div class="bottom">margin: 20px</div>
</body>
</html>
且其垂直相鄰?fù)膺吘嗪喜⒅蟮闹禐樯显氐南峦膺吘嗪拖略氐纳贤膺吘嗟妮^大值。
如下圖所示：
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
div {
color: #fff;
}
.top {
background: green;
margin: 40px;
}
.bottom {
background: orange;
margin: 20px;
}
</style>
</head>
<body>
<div class="top">margin: 40px</div>
<div class="bottom">margin: 20px</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
span {
margin: 20px;
background: orange;
color: #fff;
}
</style>
</head>
<body>
<span>margin: 20px</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
span {
margin: 20px;
background: orange;
color: #fff;
}
</style>
</head>
<body>
<span>margin: 20px</span>
<span>margin: 20px</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
div {
float: left;
margin: 20px;
background: orange;
color: #fff;
}
</style>
</head>
<body>
<div>margin: 20px</div>
<div>margin: 20px</div>
<div>margin: 20px</div>
<div>margin: 20px</div>
<div>margin: 20px</div>
<div>margin: 20px</div>
<div>margin: 20px</div>
</body>
</html>
margin負(fù)值左右固定，中間自適應(yīng)（雙飛翼）雙飛翼布局的好處：
1、主要的內(nèi)容先加載的優(yōu)化；
2、在瀏覽器上的兼容性非常好，IE6及以上都支持；
3、實(shí)現(xiàn)不同的布局方式，可以通過調(diào)整相關(guān)CSS屬性即可實(shí)現(xiàn)。
實(shí)現(xiàn)效果如下圖所示：
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
color: #fff;
height: 200px;
}
.center {
float: left;
width: 100%;
}
.center .content {
margin: 0 210px 0 110px;
background: orange;
}
.left {
float: left;
width: 100px;
margin-left: -100%;
background: green;
}
.right {
float: left;
margin-left: -200px;
width: 200px;
background: green;
}
</style>
</head>
<body>
<div class="center">
<div class="content">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
用于水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
div {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
background: orange;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
這種使得元素居中的方法的缺點(diǎn)就是：你必須知道這個(gè)絕對(duì)定位元素寬度以及高度才能通過設(shè)置負(fù)margin值，使其相對(duì)于瀏覽器窗口（父元素）居中，若對(duì)于不確定寬度和高度，則不能用這種方法，可以使用： transform: translate3d(-50%,-50%,0);
對(duì)于margin負(fù)值來說，不止有這兩個(gè)實(shí)現(xiàn)，還會(huì)有其他各種用途，這里暫不一一細(xì)講。
|
