1.margin與百分比單位
2.margin重疊
margin重疊通常特性：
- 只發(fā)生在block水平元素（例如：p揽思、div、list验残、item標(biāo)簽.....）
- 只發(fā)生在垂直方向（margin-top/margin-bottom）
margin重疊三種情況：
- 相鄰的兄弟元素
- 父級(jí)和第一個(gè)/最后一個(gè)子元素
- 空的block元素（自己和自己重疊）
demo 1:
1.相鄰兄弟元素margin重疊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
p{
line-height:2em;
margin:1em 0;
background:#f0f1f3;
}
</style>
</head>
<body>
<p>第一行</p>
<p>第二行</p>
</div>
</body>
</html>
兄弟元素的上下margin發(fā)生了重疊
2.父級(jí)和第一個(gè)/最后一個(gè)子元素
demo 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.father{
height:200px;
background:red;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
我是子元素
</div>
</div>
</body>
</html>
當(dāng)我們?yōu)樽釉卦O(shè)置margin后：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.father{
height:200px;
background:red;
}
.son{
margin-top:80px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
我是子元素
</div>
</div>
</body>
</html>
對(duì)最后的子元素設(shè)置的
margin-top：80px五慈；等同于為父元素設(shè)置了margin-top：80px铺遂；（父元素的margin-top=0己肮，最后的子元素的margin-top=80px士袄，發(fā)生了外邊距重疊），也等同于他們兩個(gè)同時(shí)設(shè)置margin-top：80px谎僻；
inline元素（內(nèi)聯(lián)元素娄柳，像圖片、文字這樣的東西）
塊狀格式化上下文元素（BFC元素）
同樣可以利用父子margin重疊條件來(lái)去除margin重疊：
demo 2：
為父元素添加`overflow:hidden;`艘绍，使其變?yōu)闋罡袷交舷挛脑兀˙FC元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.father{
height:200px;
background:red;
overflow:hidden;
}
.son{
margin-top:80px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
我是子元素
</div>
</div>
</body>
</html>
demo 2 :
為父元素設(shè)置border-top：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.father{
height:200px;
background:red;
border:1px solid;
}
.son{
margin-top:80px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
我是子元素
</div>
</div>
</body>
</html>
demo 2:
為父元素和第一個(gè)子元素之間添加一個(gè) （空格或文字赤拒、圖片等內(nèi)聯(lián)元素）inline元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.father{
height:200px;
background:red;
}
.son{
margin-top:80px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
我是子元素
</div>
</div>
</body>
</html>
去掉margin-bottom重疊與上面類似。
3.空的block元素margin重疊：
空的block元素發(fā)生margin重疊，也需要一些條件限制：
去掉空的block元素的margin重疊也是利用上面的條件：
3.margin重疊的計(jì)算規(guī)則：
1挎挖、正正取大值：
2这敬、正負(fù)值相加：
3、負(fù)負(fù)最負(fù)值（取絕對(duì)值大的）：
3肋乍、理解CSS中的margin auto
首先理解margin atuo的作用機(jī)制 鹅颊，先看一些事實(shí)例子：
1.元素有時(shí)候，就算沒(méi)有設(shè)置width或height墓造，也會(huì)自動(dòng)填充外部容器
例1:
圖中是一個(gè)div元素，可以看到設(shè)置了背景色之后锚烦，它的寬度自動(dòng)填滿了它所在的容器觅闽。
例2：
我們?cè)O(shè)置左右定位值
left：0; right：0;，它的寬度同樣自動(dòng)填充填滿了它所在的容器涮俄，只不過(guò)它的容器是它的第一個(gè)父級(jí)相對(duì)定位元素蛉拙。
以上兩個(gè)例子是比較常見(jiàn)的，沒(méi)有設(shè)置寬高也會(huì)自動(dòng)填充所在容器彻亲。
若剛才的兩個(gè)例子孕锄，如果設(shè)置了width或heigth，自動(dòng)填充特性就會(huì)被覆蓋苞尝。
上圖寬度從填滿整個(gè)所在的容器到寬度500px畸肆，這就產(chǎn)生了剩余空間，圖中的剩余空白部分空間
width=整個(gè)容器寬度-500px宙址，而margin auto 就是 為了填充這個(gè)空白的尺寸設(shè)計(jì)的轴脐，這就是margin auto的作用。
總之一句話抡砂，auto就是用來(lái)分配大咱。
通過(guò)以上的例子，很多事情就很好理解了注益，比方說(shuō)：
1.為什么圖片設(shè)置了margin：0 auto不水平居中碴巾？
如上圖，設(shè)置了margin auto丑搔，圖片為什么還是不居中呢厦瓢？
因?yàn)閳D片是inline水平的，它占據(jù)的空間并沒(méi)有撐滿整個(gè)容器低匙，如果沒(méi)有設(shè)置寬度值旷痕。所以它就不滿足margin auto 用來(lái)填充剩余空間的條件，因?yàn)樗揪蜎](méi)有剩余空間顽冶。要想讓它居中也很簡(jiǎn)單：
為圖片設(shè)置
display:block屬性欺抗，這時(shí)就算沒(méi)有為圖片設(shè)置寬度，它也會(huì)占滿整個(gè)容器强重，這時(shí)候在設(shè)置margin auto 它就會(huì)自動(dòng)分配剩余空間绞呈。
2.為什么明明容器定高贸人，子元素也定高了，margin auto 0 無(wú)法垂直居中?
上圖水平方向劇中了佃声，但是垂直方向不劇中艺智，父級(jí)元素高度有了，子元素高度也有了圾亏，為什么還是不垂直居中呢十拣？
因?yàn)樗粷M足占滿整個(gè)容器這個(gè)條件，想一下志鹃，如果夭问，沒(méi)有為.son設(shè)置高度值，它之前滿足占滿整個(gè)容器這個(gè)條件嗎曹铃？很顯然不滿足缰趋，也就沒(méi)有剩余空間，所以設(shè)置height:100px margin auto不會(huì)垂直居中陕见。
還需要注意一點(diǎn)：用margin:auto來(lái)實(shí)現(xiàn)居中秘血，它計(jì)算后的值必須是正直，比如說(shuō)你的父容器寬度1000px评甜，子元素寬度2000px灰粮，這時(shí)設(shè)置margin：auto它是不居中的。
那么如何實(shí)現(xiàn)垂直方向上的劇中呢蜕着，方法很多不止一種：
1.writing-mode與垂直居中：
更改流為垂直居中之后谋竖，內(nèi)容會(huì)自動(dòng)撐滿垂直方向的高度。這時(shí)寬度不會(huì)自動(dòng)撐滿容器承匣，所以寬度的水平居中就失效了蓖乘。
2.絕對(duì)定位元素實(shí)現(xiàn)垂直居中：
子元素設(shè)置了top:0;right:0;bottom:0;left:0;之后，沒(méi)有設(shè)置寬高韧骗，absolute元素也自動(dòng)填滿了容器嘉抒。
這時(shí)再設(shè)置寬高，自動(dòng)填充就會(huì)被覆蓋袍暴，如上圖所示些侍。這時(shí)上圖藍(lán)色旁邊的空間尺寸就是被強(qiáng)制更改的尺寸，也就是
margin:auto可以用來(lái)分配的尺寸空間政模，此時(shí)在設(shè)置margin:auto空間就被重新分配了岗宣，從而就實(shí)現(xiàn)了絕對(duì)定位元素的水平和垂直居中效果。但是這個(gè)特性只有IE8+以上的瀏覽器才支持淋样。
4.CSS margin負(fù)值定位
1.margin負(fù)值下的兩端對(duì)齊（主要利用了margin可以改變?cè)爻叽邕@一特性：正直變小耗式，負(fù)值變大）
一個(gè)block水平元素，如果沒(méi)有設(shè)置寬度值，我們通過(guò)設(shè)置margin可以改變它的尺寸：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.box{
width:1200px;
margin:auto;
background:orange;
}
.ul{
overflow:hidden;
margin-right:-20px;
}
.li{
width:386.66666px;height:300px;background:green;float:left;margin-right:20px;
}
</style>
</head>
<body>
<div class="box">
<div class="ul">
<div class="li">列表1</div>
<div class="li">列表2</div>
<div class="li">列表3</div>
</div>
</div>
</body>
</html>
由于<div class="ul"></div>沒(méi)有設(shè)置寬度刊咳，所以設(shè)置了margin-right:-20px;后彪见，改變了它的寬度，增大了20px娱挨，變?yōu)?220px余指。這時(shí)我們?cè)侔?code>li的寬度設(shè)置為計(jì)算好的386.66666px，就可以實(shí)現(xiàn)沒(méi)有間隙的兩端對(duì)齊跷坝。主要利用了margin負(fù)值增加它的空間酵镜。
5.CSS margin失效情形解析
- inline水平元素的垂直margin無(wú)效，前提：
- inline水平元素是非替換元素柴钻，例如笋婿，不是<img>元素；
- 正常書寫模式顿颅，是正常的流（不是writing-mode這種重置它的書寫模式）
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<span style="margin:233px;">margin: 0px;</span>
</body>
</html>
可以看出它的垂直方向是沒(méi)有margin的，是無(wú)效的足丢。
2.第二種常見(jiàn)的無(wú)效是margin重疊粱腻，比如你設(shè)置了margin-top當(dāng)發(fā)現(xiàn)沒(méi)有效果，這就是margin重疊帶來(lái)的影響斩跌。
3.display:table-cell與margin
MDN：margin可以應(yīng)用于任何元素绍些，除了display為table的相關(guān)類型（不包括table-caption，table以及inline-table）耀鸦。
換句話說(shuō)柬批，如果這個(gè)元素的display屬性是table-cell/table-row等類似這樣的表格相關(guān)的聲明，它的margin是無(wú)效的袖订。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.table-cell{
display: table-cell;
margin: 100px;
}
</style>
</head>
<body>
<span class="table-cell">span.table-cell</span>
<div>
<div class="table-cell">div.table-cell</div>
</div>
</body>
</html>
可以看出設(shè)置的margin是無(wú)效的氮帐。
但是對(duì)替換元素設(shè)置table-cell是可以發(fā)生作用的，但平時(shí)我們不會(huì)給替換元素設(shè)置table-cell洛姑，這是沒(méi)有任何意義的上沐，所以記住這點(diǎn)就行。
4.position：absolute與margin楞艾，絕對(duì)定位元素非定位方向的margin值“無(wú)效”参咙，定位方向的margin值是有效的。
