前端 -- margin的用法

margin塌陷問題

當時說到了盒模型，盒模型包含着margin，為什么要在這里說margin呢？因為元素和元素在垂直方向上margin里面有坑。

我們來看一個例子：

html結構：

 

<div class="father">
    <div class="box1"></div>        
    <div class="box2"></div>
</div>

 

css樣式：

       *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            overflow: hidden;
            border: 1px solid gray;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;}
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }

當給兩個標准流下兄弟盒子 設置垂直方向上的margin時，那么以較大的為准，那么我們稱這種現象叫塌陷。沒法解決，我們稱為這種技巧叫“奇淫技巧”。記住這種現象，在布局垂直方向盒子的時候主要margin的用法。

當我們給兩個標准流下的兄弟盒子設置浮動之后，就不會出現margin塌陷的問題。

margin：0 auto;

      div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;

        }
    

當一個div元素設置margin：0 auto;時就會居中盒子，那我們知道margin:0 auto;表示上下外邊距離為0，左右為auto的距離，那么auto是什么意思呢？

設置margin-left:auto；我們發現盒子盡可能大的右邊有很大的距離，沒有什么意義。當設置margin-right:auto；我們發現盒子盡可能大的左邊有很大的距離。當兩條語句並存的時候，我們發現盒子盡可能大的左右兩邊有很大的距離。此時我們就發現盒子居中了。

 

另外如何給盒子設置浮動，那么margin:0 auto失效。

 

使用margin：0 auto;注意點：

1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;

2.只有標准流下的盒子 才能使用margin:0 auto; 

當一個盒子浮動了，固定定位，絕對定位(后面會講)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

 

另外大家一定要知道margin屬性是描述兄弟盒子的關系，而padding描述的是父子盒子的關系

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

如果讓大家實現如圖的效果，應該有不少的同學做不出來。

那么我們來看看這個案例，它的坑在哪里？

下面這個代碼應該是大家都會去寫的代碼。

        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .xiongda{
            width: 100px;
            height: 100px;
            background-color: orange;
            
            margin-top: 30px;
        }

因為父親沒有border，那么兒子margin-top實際上踹的是“流” 踹的是行,所以父親掉下來了，一旦給父親一個border發現就好了。

那么問題來了，我們不可能在頁面中無緣無故的去給盒子加一個border，所以此時的解決方案只有一種。就是使用父親的padding。讓子盒子擠下來。