|
我發(fā)現(xiàn)當我想寫好一篇博文的時候，希望以后能有人看到，會對別人也有一定的幫助，這時候?qū)τ谄渲械膬?nèi)容就變得深思熟慮起來，讓自己查閱盡可能多的資料，這樣的方式正好可以彌補我某些方面的不足，讓我能夠深入了解一些可能平常不太注意的知識點，哈哈，但可能還是會存在局限性：P。如果能堅持寫博文的話，一定會是一件超棒的事情。這些就只是我自己的碎碎念：）~ 盒子模型講到margin，不可避免的就又要說到盒子模型，盒子模型包括了：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性（這里只說W3C標準的盒子模型）。如下圖所示： 
margin相關(guān)屬性margin簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有1-4個值。margin的默認值是0。沒有繼承性，也就是說給父元素設置的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
設置四個外邊距的順序是上、右、下、左，請記住順時針即可。 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>
且其垂直相鄰外邊距合并之后的值為上元素的下外邊距和下元素的上外邊距的較大值。
如下圖所示：
 <!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負值左右固定，中間自適應（雙飛翼）雙飛翼布局的好處：
1、主要的內(nèi)容先加載的優(yōu)化；
2、在瀏覽器上的兼容性非常好，IE6及以上都支持；
3、實現(xiàn)不同的布局方式，可以通過調(diào)整相關(guān)CSS屬性即可實現(xiàn)。
實現(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>
這種使得元素居中的方法的缺點就是：你必須知道這個絕對定位元素寬度以及高度才能通過設置負margin值，使其相對于瀏覽器窗口（父元素）居中，若對于不確定寬度和高度，則不能用這種方法，可以使用： transform: translate3d(-50%,-50%,0);
對于margin負值來說，不止有這兩個實現(xiàn)，還會有其他各種用途，這里暫不一一細講。
|
