|
我發(fā)現(xiàn)當(dāng)我想寫好一篇博文的時候,，希望以后能有人看到,，會對別人也有一定的幫助，這時候?qū)τ谄渲械膬?nèi)容就變得深思熟慮起來,，讓自己查閱盡可能多的資料,，這樣的方式正好可以彌補(bǔ)我某些方面的不足，讓我能夠深入了解一些可能平常不太注意的知識點(diǎn),，哈哈，但可能還是會存在局限性：P,。如果能堅(jiān)持寫博文的話,，一定會是一件超棒的事情。這些就只是我自己的碎碎念：）~ 盒子模型講到margin,，不可避免的就又要說到盒子模型,，盒子模型包括了：內(nèi)容(content)、填充(padding),、邊框(border),、邊界(margin)， CSS盒子模式都具備這些屬性（這里只說W3C標(biāo)準(zhǔn)的盒子模型）,。如下圖所示： 
margin相關(guān)屬性margin簡寫屬性在一個聲明中設(shè)置所有外邊距屬性,。該屬性可以有1-4個值。margin的默認(rèn)值是0,。沒有繼承性,，也就是說給父元素設(shè)置的margin值并不會自動傳遞到子元素中,。 一個參數(shù)margin: 10px;
兩個參數(shù)margin: 10px 5px;
上外邊距和下外邊距是10px 右外邊距和左外邊距是5px
三個參數(shù)margin: 10px 5px 15px;
上外邊距是10px 右外邊距和左外邊距是5px 下外邊距是15px
四個參數(shù)margin: 10px 5px 15px 20px;
上外邊距是10px 右外邊距是5px 下外邊距是15px 左外邊距是20px
設(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)就是：你必須知道這個絕對定位元素寬度以及高度才能通過設(shè)置負(fù)margin值，使其相對于瀏覽器窗口（父元素）居中,，若對于不確定寬度和高度,，則不能用這種方法，可以使用： transform: translate3d(-50%,-50%,0);
對于margin負(fù)值來說,，不止有這兩個實(shí)現(xiàn),，還會有其他各種用途，這里暫不一一細(xì)講,。
|
