margin與可視尺寸，適用范圍：
1、沒有設定width/height的普通block水平元素
2、只適用于水平方向尺寸
實際應用：一側定寬的自適應布局（原理是因為margin改變了區(qū)域的可視區(qū)域大小）
<img width="150" style="float:left">
<p style="margin-left:170px">圖片左浮<p>margin與占據(jù)尺寸
1、block/inline-block水平元素均適用
2、與有沒有設定width/height值無關
3、適用于水平方向和垂直方向margin與百分比單位
1、普通元素的百分比margin都是相對于容器的寬度計算的。并不是分別根據(jù)寬高計算的。
2、絕對定位元素的百分比margin是相對于第一個定位祖先元素（relative/absolute/fixed）的寬度計算的。與普通元素的區(qū)別是不按照直接容器進行計算。margin重疊
通常特性：
1、只發(fā)生在block水平元素（不包括float和absolute元素）
2、不考慮writing-mode，只發(fā)生在垂直方向（margin-top/margin-bottom）
三種情景：
1、相鄰的兄弟元素
2、父級和第一個/最后一個子元素
干掉父元素、子元素margin-top重疊的幾個辦法：
a、父元素塊狀格式化上下文元素
b、父元素設置border-top
c、父元素設置padding-top
d、父元素和第一個子元素之間增加一個inline元素分割
3、空的block元素
空的block元素margin重疊的條件
a、元素沒有Border設置
b、元素沒有padding值
c、里面沒有inline元素
d、沒有height，或者min-height
margin重疊計算規(guī)則
1、正在取大值
2、正負值相加
3、負負最負值margin重疊的意義：
1、連續(xù)段落或列表之類，如果沒有margin重疊，首尾項間距會和其他兄弟標簽1:2關系，排版不自然
2、web中任何地方嵌套或直接放入任何裸div，都不會影響原來的布局
3、遺落的空任意多個<p>元素，不要影響原來的閱讀排版。margin:auto的機制
如果一側定值，一側auto，auto為剩余空間大小，如果兩側均是auto，則平分剩余空間。
兩個常見疑問：
1、為何圖片用此辦法不居中？因為圖片是inline-block水平，而inline-block水平是沒有剩余空間可以利用的，故無法水平居中！！！
2、為何容器定高，設置margin:auto不能實現(xiàn)垂直居中？因為垂直方向不會自動填充，沒有可以利用的剩余空間。
元素居中的兩種辦法：
a、修改文檔流方向，默認方向為水平方向。使用writing-mode:vertical-lr，可將元素置為垂直方向，從而使用以上特性達到垂直方向居中，但是無法實現(xiàn)水平方向居中。
b、利用absolute的拉伸特性，增加垂直方向剩余面積，然后使用margin:auto即可水平、垂直居中。IE8+
position:absolute;
left:0;right:0;top:0;botton:0;
width:100px;height:100px;
margin:auto;
ps:如果寬度不足以分配，那么也不會達到居中效果。-
margin無效的幾種情況
1、inline水平元素的垂直margin無效(非替換元素，如img)
2、margin重疊
3、display:table-cell，按照規(guī)范，margin是不會再table-cell中有作用的，但是某些替換元素不適用上述規(guī)則，如Img，button（具有瀏覽器差異）
4、絕對定位（absolute）元素非定位方位的margin值“無效”，除非給容器增加position:relavite。（原理是由于脫離文檔流，故肉眼看不出來）
5、鞭長莫及。。。。 看似無效，其實有效
Paste_Image.png
6、圖片不管如何設置margin，都不可能完全脫離容器，原因是因為圖片是inline-block水平的，故圖片一定會與它之后的文字基線對齊（不管后面是否有文字），而內聯(lián)元素的特性是不可能超出容器的范圍，故導致圖片也不會超出此范圍
默認情況下，margin-start與margin-left相同，但是當改變文檔流時，margin-start會改變，與流向有關。margin-end同理。
