WEB學習-CSS中Margin塌陷

• margin的塌陷現象

• 標準文檔流中，豎直方向的margin不疊加，以較大的爲準。

　　若是不在標準流，好比盒子都浮動了，那麼兩個盒子之間是沒有塌陷現象的：

　　

 

• 盒子居中margin:0 auto;

• margin的值能夠爲auto，表示自動。當left、right兩個方向，都是auto的時候，盒子居中了：
  margin-left: auto;
  margin-right: auto;
  
  簡寫爲
  margin:0 auto; 0 表示上下，auto表示左右
  
  注意：
  1） 使用margin:0 auto; 的盒子，必須有width，有明確的width 2） 只有標準流的盒子，才能使用margin:0 auto; 居中。 也就是說，當一個盒子浮動了、絕對定位了、固定定位了，都不能使用margin:0 auto; 3） margin:0 auto;是在居中盒子，不是居中文本。
  文本的居中，要使用
  text-align:center;
  
  margin:0 auto;   → 讓這個div本身在大容器中居中。
  text-align: center;  → 讓這個div內部的文本居中。
  
  普及一下知識，text-align還有
  text-align:left;     沒啥用，由於默認居左
  text-align:right;    文本居右

   

• 善於使用父親的padding，而不是兒子的margin

• 若是父控件沒有border，那麼子控件的margin實際上踹的是「流」，踹的是這「行」。因此，父控件總體也掉下來了
  
  

    margin這個屬性，本質上描述的是兄弟和兄弟之間的距離；最好不要用這個marign表達父子之間的距離。

  因此，咱們必定要善於使用父親的padding，而不是兒子的margin。

  
  這個p有一個margin-top踹父控件，試圖將本身下移
      <div>
          <p></p>
      </div>
  結果：

   

• 關於margin的IE6兼容問題

• 1. IE6雙倍margin bug
  當出現連續浮動的元素，攜帶和浮動方向相同的margin時，隊首的元素，會雙倍marign。
      <ul>
          <li></li>
          <li></li>
          <li></li>
      </ul>
  解決方案：
  1）使浮動的方向和margin的方向，相反。
  因此，你就會發現，咱們特別喜歡，浮動的方向和margin的方向相反。而且，前端開發工程師，把這個當作習慣了。
              float: left;
              margin-right: 40px;
  
  2）使用hack（不必，別慣着這個IE6）
  單獨給隊首的元素，寫一個一半的margin
  <li class="no1"></li>
  
  ul li.no1{
      _margin-left:20px;
  }
  
  2.IE6的3px bug
  

    解決辦法：

    不用管，由於根本就不容許用兒子踹父親。因此，若是你出現了3px bug，說明你的代碼不標準。