1.css margin可以改變容器的尺寸
元素尺寸
可視尺寸--標准盒子模型中盒子的寬度是不包括margin值的，clientWidth
占據尺寸--包括margin的寬度 outWidth不在標准之中，jquery中有相對應的方法
margin與可視尺寸
1.1使用那個與沒有設定width/height的普通block水平元素
2.2只適用於水平方向尺寸
<body style="background-color:#1a2b3c">
<div style="border:4px 6px; background-color:blue">
文字<br />
文字<br />
</div>
</body>
當改變margin值時盒子的寬度會變化。
應用 ：實現一側定寬的自適應布局
<img width="150px" style="float:left;">
<p style="margin-left:170px">圖片左浮動</p>
margin與占據尺寸
1.block/inline-block水平元素均適用
2.與沒有設定width/height值無關
3.適用於水平方向和垂直方向
例
<body style="background-color:#1a2b3c">
<img style="marign-bototm:-50">
</body>
可以看到容器占據的尺寸變小了。
利用這一特性
滾動容器內上下留白
<div style="height:100px; padding:50px 0;">
<img height="300">
</div>
里面盒子撐開外面盒子顯示滾動條，當然這在非chrome瀏覽器中是沒有留白效果的(上面有下面沒有)。
正確的做法是
<div style="height:100px; ">
<img height="300" style="marign:50px 0">
</div>
第二話：css margin與百分比單位——了解margin百分比單位
水平方向百分比/垂直方向百分比
普通元素百分比/絕對元素百分比
百分比margin的計算規則
img{margin :10%;with:600px;heigth:200px;}
普通元素的百分比margin都是相對於容器的寬度計算的！所以這里的margin:10%;---->top:60px,left:60px;都是相對與容器的寬度來計算的。
絕對定位元素的百分比margin
img{margin:10%; position:absolute;}
絕對元素的百分比margin是相對與第一個定位元素的祖先元素具有（relative/absolute/fixed）的寬度計算的。普通元素的是相對與父元素的來計算的。
<div style="width:1024px;height:200px; position:relative;">
<div style="width:600px; height:200px">
<img style="margin:10%;position:absolute;" />
</div>
</div>
利用特性
寬高2：1自適應矩形
.box{background-color:olive; overflow:hidden;}
.box > div{margin:50%}
這里還涉及一個只是點就是margin重疊。這里設置overflow 也是因為防止margin重疊
第三話 margin重疊通常特性
1.block水平元素（不包括float和absolute元素）
2.不考慮writing-mode（文字書寫方向是從上到下的），只發生在垂直方向的（margin-top/margin-bottom）
margin重疊3種情境
1.相鄰的兄弟元素
p{line-height:2em;margin:1em 0;background:#f0f3f9;}
<p>第一行</p>
<p>第二行</p>
這里就會發生margin重疊了
2.父級和第一個/最后一個子元素
.father{background:#f0f3f9}
<div class="father">
<div class="son" style="margin-top:80px;">son</div>
</div>
給子第一個或最后一個子元素設置margin等同於給父元素設置相同的margin值，子元素相同margin，子元素和父元素一樣的margin值
3.空的block元素
.father{background:#f0f3f9}
<div class="father">
<div class="son"></div>
</div>
這里son的高度只有1em，不是2em
空block元素margin重疊其他條件
1.元素沒有border設置
2.元素沒有padding值
3.里面沒有inline元素
4.沒有height，或者min-height
margin-top重疊
1.1父元素非塊狀格式化上下文元素
1.2父元素沒有border-top設置
1.3父元素沒有padding-top值
1.4父元素和第一個子元素之間沒有inline元素分隔
margin-bottom重疊
1.1父元素非塊狀格式化上下文元素
1.2父元素沒有border-bottom設置
1.3父元素沒有padding-bottom值
1.4父元素和最后一個子元素之間沒有inline元素分隔
1.5父元素沒有height，min-height，max-height限制
干掉margin-top重疊
.father{background:#f0f3f9}
<div class="father">
<div class="son" style="margin-top:80px;">son</div>
</div>
1.父元素非塊狀格式化上下文元素 .father:overflow:hidden;
2.父元素沒有border-top設置
.father:border:4px solid #ccc;
3.父元素沒有padding-top值
4.父元素和第一個子元素之間沒有inline元素分隔
<div class="father">
<div class="son" style="margin-top:80px;">son</div>
</div>
干掉margin-bottom重疊
前面四個和margin-top一樣，
<div class="father" style="height:100px">
<div class="son" style="margin-top:80px;">son</div>
</div>
margin重疊的計算規則
1.正正取大值
.a{margin-bottom:50px;}
.b{margin-top:20px;}
<div class="a"></div>
<div class="b"></div>
.father{margin-top:20px;}
.son{margin-top:50px;}
<div class="father">
<div class="son"></div>
</div>
.a{margin-top:20px;margin-bottom:50px}
<div class="a"></div>
上面的結果都是margin:50px;
2.正負值相加
.a{margin-bottom:50px;}
.b{margin-top:-20px;}
<div class="a"></div>
<div class="b"></div>
.father{margin-top:-20px;}
.son{margin-top:50px;}
<div class="father">
<div class="son"></div>
</div>
.a{margin-top:-20px;margin-bottom:50px}
<div class="a"></div>
上面的結果都是30px
3.負負最負值
.a{margin-bottom:-50px;}
.b{margin-top:-20px;}
<div class="a"></div>
<div class="b"></div>
.father{margin-top:-20px;}
.son{margin-top:-50px;}
<div class="father">
<div class="son"></div>
</div>
.a{margin-top:-20px;margin-bottom:-50px}
<div class="a"></div>
上面的結果都是-50px
margin重疊的意義是？
網頁誕生之初…………只是排版文字布局用，沒有現在這么復雜。
1.連續段落或列表之類，如果沒有margin重疊首尾項間距會和其他兄弟標簽1：2關系，排版不自然；
2.web中任何地方嵌套或直接放入任何裸div都不會影響原來的布局
3.遺落的空人一個p元素，不要影響原來的閱讀排版
實踐：
善用margin重疊
.list{margin-top:15px;}
更好實現
.list{
margin-top:15px;
margin-bottom:15px;
}
更具有健壯性，最后一個元素移除或位置調換，均不會破壞原來的布局。
第4話：理解CSS中的margin:auto
margin:auto 的機制
元素有時候，就算沒有設置width或height，也會自動填充
div{background:#f0f3f9}
如果設置width或height，自動填充特性就會被覆蓋
div{width:500px;background:#f0f3f9;}
此時的margin值是0px
如果設置值width或height，自動填充特性就會被覆蓋。
原來應該填充的尺寸被width/height強制變更，而margin：auto就是為了填充這個變更的尺寸設置的；
div{width:500px;marign-right:100px;margin-left:auto;}
如果一側定值，一側auto，auto為剩余空間大小，如果兩側均是auto，則平分剩余空間
為什么圖片img{width:200px;marign:0 auto}不居中
因為圖片是inline水平的，就算沒有width，也不會占據整個容器。
設置img{display:block;width:200px;marign:0 auto;}
因為此時圖片是block水平的，就算沒有width，也會占據整個容器不能在一行顯示。
為什么明明容器定高，元素定高margin：auto 0 無法垂直居中
.father{height:200px;background:#f0f3f9;}
.son{height:100px; width:500px;margin:auto;}
水平居中了，垂直不居中。
解釋：如果.son沒有設置height:100px;高度會自動200px高嗎？——NO 所以margin談不上自動填充，強制設置寬度高度， 所以是不會自動填充的。
注意：水平方向上如果子大於父，計算結果為負值的時候也是不居中的。
實現垂直方向margin居中
更改流為垂直方向，實現垂直方向的margin:auto
writing-mode與垂直居中(css3)
.father{height:200px; width:100%; wiriting-mode:vertical-lr;}
.son{height:100px;width:500px;margin:auto;}
absolute與margin居中
.father{height:200px;position:relative;}
.son{position:absolute; top:0px right:0px bottom:0px;left:0px}
.son沒有width/height，absolute元素自動填滿了容器。
當設置了width和高度
.father{height:200px;position:relative;}
.son{position:absolute; top:0px right:0px bottom:0px;left:0px；width:500px;height:100px;}
原來拉伸鋪滿現在縮回來了。
被拉伸的空間設置margin:auto;平均分配就會實現水平垂直居中了
.father{height:200px;position:relative;}
.son{position:absolute; top:0px right:0px bottom:0px;left:0px；width:500px;height:100px;margin:auto;}
IE8+以上支持！
第五話：css margin負值定位
1.margin負值下的兩端對齊（margin改變元素尺寸）
例子
.box{
width:1200px; margin:auto;background:orange;
.ul{overflow:hidden;}
.li{
width:380px;height:300px;
margin-right:20px;
background:green;
float:left;
}
}
實現的列表最后一個留有間隙。
而通過margin負值來改變容器的大小,讓容器變寬。能完美解決這個問題
.box{
width:1200px; margin:auto;background:orange;
.ul{overflow:hidden;margin-right:-20px;}
.li{
width:386.66px;height:300px;
margin-right:20px;
background:green;
float:left;
}
}
2.margin負值下的等高布局 margin改變元素占據空間
margin與上下留白
<div style="height:200px;">
<img height="300px" style="margin:50px 0;" />
</div>
.box{overflow:hidden;resize:vertical;}
.child-orange,
.child-green{margin-bottom:-600px;padding-bottom:600px;}
.child-orange{float:left;background:orange;}
.child-green{float:left;background:green;}
通過設置很大的margin-bottom負值，和很大的padding-bottom填充缺失的空間，實現等高布局。原理：內容塊狀元素可以在padding中顯示.只要沒有設置
background:clip,box-sizing:content
3.margin負值下的兩欄自適應布局，元素占據空間跟隨margin移動
<div style="float:left;width:100%">
<p style="margin-right:170px;">圖片右浮動</p>
</div>
<img width="150px;" style="float:left;margin-left:-150px;"/>
第六話 css marign無效情形解析
1.inline水平元素的垂直margin無效
2個前提 1.非替換元素，例如不是img元素；2.正常書寫模式
例
<span style="margin:0px">marign:0px</span>
給span設置margin233px;
水平上有效的，垂直方向是無效的。
2.margin重疊
3.display：table-cell
display:table-cell/display:tab-row等聲明margin無效！
例外的替換元素img,button
4.position與margin
絕對定位元素非定位方向的margin值“無效”
絕對定位的margin值一直有效，不只是像普通元素那樣。
5.鞭長莫及的margin失效
bfc內容塊中如果前面有浮動元素那下一個元素的margin是相對與外層的div計算的。
6.內聯導致的margin失效
div[style="height:200px;background-color:#f0f3f9;"]>img[style="marign-top:30;"]
當margin-top足夠大的時候失效了。
解釋：內聯元素要實現和基線對齊，在圖片后加x可以看出，無論margin-top有多遠，他都不會脫離容器外面。
第七話margin-start和margin-end
margin-start
img{
margin-left：100px;
-webkit-margin-start:100px;
-moz-margin-start:100px;
margin-sart:100px;
}
1.正常的流向，margin-sart等同於margin-left，兩者重疊不累加；
2.如果水平流失從右往左，margin-start等同與margin-right；direction:ltr(rtl)
3.在垂直流下（writring-mode:vertical-lr）,margin-sart等同於margin-top
webkit下的其他margin相關屬性
margin-before
img{-webkit-margin-before:100px;} 默認流向的情況下，等同於marign-top
margin-after
img{-webkit-marign-after:100px;} 默認流向的情況下，等同於margin-bottom;
margin-collapse 外邊框重疊
-webkit-margin-collapse: collapse|discard|separate
控制margin重疊
collapse默認-重疊
discard 取消
separate 分隔 沒有重疊