margin的知識點

FreeeLinux發表於2017-07-10

margin的塌陷現象

標準文件流中，豎直方向的margin不能疊加，以較大的為準。不是標準流的盒子沒有塌陷現象。

盒子居中margin:0 auto;

margin的值可以為auto，表示自動，當left, right的值都為auto的時候，表示居中。
margin: 0 auto;表示上下0，左右auto。

注意：

  1. 使用margin:0 auto的盒子必須有width。
  2. 只有標準流的盒子才能使用該方式居中。
  3. 只能居中盒子，而不是居中文字，居中文字要用text-align: center;來實現。

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

如果父親沒有border，那麼兒子實際上踹的是流，踹的是行，所以父親整體會掉下來。

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
        p {
            margin-top: 10px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
 <body>
    <div>
        <p>文字</p>
    </div>  
 </body>

父親下來了：
這裡寫圖片描述
兒子下來了：
這裡寫圖片描述

關於margin的IE6相容問題

IE6雙倍margin bug。
當出現連續浮動的元素，攜帶和浮動方向相同的margin時，隊首的元素，會出現雙倍margin。
這裡寫圖片描述
解決方案：
1. 使浮動的方向和margin的方向相反，float:left 和 margin: right配合使用。
2. 使用hack，_margin_left，你懂得 :)

IE6的3px bug

右浮動，但是使用了margin-left，IE6會多出3px。
這裡寫圖片描述

解決方法：
不用管，因為根本就不允許用兒子踹父親（使用padding）。所以，如果你出現了3px bug，說明你的程式碼不標準。

相關文章