深刻理解margin

1,margin與容器的尺寸   元素的尺寸包括          1，可視尺寸         適用於沒有設定width、height的普通block水平元素。         只適用於水平方向尺寸 ：一側定寬自適應佈局                             <img width="150px" style="float:left;">                        <p style="margin-left: 170px;"></p>          2，佔據尺寸               實現滾動容器的上下留白               margin :50px;使用padding的話只有chrome底部留白   2，margin 與百分比單位      普通元素的百分比margin都是相對於容器的寬度計算的。      絕對定位元素的百分比margin是相對於第一個定位祖先元素（relative/absolute/fixed）的寬度計算的。            自適應的矩形3，css的margin的重疊      margin重疊一般特性：1，block水平元素（不包括float和absolute元素）                     2，不考慮writing-mode，只發生在垂直方向（margin-top,margin-bottom）      margin重疊3種情景         1，相鄰的兄弟元素的margin重疊         2，父級和第一個/最後一個子元素            幹掉margin-top重疊               1，父元素非塊狀格式化上下文元素 margin-top               2，父元素沒有border-top設置               3,父元素沒有padding-top值               4，父元素和第一個子元素之間沒有inline元素分割。         3，空的block元素               空block元素margin重疊其餘條件                  1，元素沒有borde設置                  2，元素沒有padding值                  3，裏面沒有inline元素                  4，沒有height或者min-height         margin重疊的計算規則：正正取大值。正負值相加，負負取最負。         margin善用重疊         .list { margin-top:15px; margin-bottom:15px; } 更具備健壯性，最後一個元素移除或尾椎調換，均不會破壞原來的佈局。4，css中的margin auto      若是一側是定值，一側是auto，auto爲剩餘空間大小；若是兩側均是auto,則平分剩餘空間。auto就是分配剩餘空間的。      圖片爲什麼不居中顯示?   img { width:200px; mrgin: 0 auto; } 此時圖片是inline水平，就算沒有width,其也不會佔據整個容器。                     img {display:block; width:200px; margin: 0 auto; } 由於此時圖片是block水平，就算沒有width,也會佔據整個容器。      writing-mode與垂直居中      .father { height:200px; width100%; wrinting-mode:vertical-lr; } /*更改流爲垂直方向，實現垂直方向上的margin:auto;*/      .son {height:100px; width:500px; margin: auto;}      決定定位元素與margin居中 (IE8+)       .father { height:200px; position:relative; }      .son { position:absolute; top:0; right:0; bottom: 0;left:0;width:500px;height:100px; margin:auto; background-color: yellow;}5，CSS margin負值定位      1，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;}            <div class="box">               <div class="ul">                  <div class="li">列表1</div>                  <div class="li">列表2</div>                  <div class="li">列表3</div>               </div>            </div>      2，margin負值下的等高佈局      .box {overflow: hidden;resize: vertical;}      .left,.right {margin-bottom: -600px;padding-bottom: 600px;}      .left{float: left;background: orange;width:50%;height: 40px; }      .right{float: left;background: green;width: 50%;height:30px;}      3,margin負值下的量看自適應佈局，元素佔據空間跟隨margin移動，優勢：DOM順序與最終視覺順序相等;      <div style="float: left; width: 100%">         <p style="margin-right: 170px;">圖片右浮動。。</p>      </div>      <img src="" alt="" style="float: left;margin-left: -150px;">6,margin無效情形解析   1，inline水平元素的垂直margin無效   2，margin重疊   3，display:table-cell與margin      display：table-cell/display:table-row等聲明的margin無效;      例外：<img src="" alt="">          <button ></button>firefox:table-cell類型in-lineblock的渲染行爲，IE：table-cell類型也是table-cell的渲染行爲;   4,絕對定位元素非定位方位的margin值「無效」;    5，「鞭長莫及」：浮動和定位破壞了頁面的佈局。margin-left不夠大；   6，內聯特性致使的margin無效7，margin-start 表示的是當前文檔流開始方位的margin值;      正常的流向等同於margin-left;從右向左等同於margin-right;垂直流等同於margin-top;      (webkit------------margin-before,margin-bottom)   margin-collapse ：collapse(默認-重疊) discard(取消) separate(分隔)  控制margin重疊   -webkit-margin-collapse: