margin的用法

時間 2019-11-11

標籤 margin 用法欄目 CSS 简体版

原文原文鏈接

margin的塌陷問題：

　　元素和元素在垂直方向上的margin會有塌陷問題。會以margin數值大的爲準，大的會覆蓋掉小的。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            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;
        }

    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>
</html>

例子

當給兩個標準流下兄弟盒子設置垂直方向上的margin時，那麼以較大的爲準，那麼咱們成這種現象叫塌陷，無法解決。當設置浮動後就不會有塌陷現象了。ide

margin:0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin:0 auto;
            line-height: 300px;
            text-align: center;
        }    
    </style>
</head>
<body>
    <div>顧清秋</div>
</body>
</html>

例子

當div盒子設置 margin: 0 auto;盒子會自動居中。 spa

使用margin: 0 auto; 要注意：

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

　　2.只有標準流下的盒子才能使用margin:0 auto; 當一個盒子浮動了，固定定位，絕對定位(後面會講)，不能用了htm

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

margin屬性是描述兄弟盒子的關係。it

善於使用父盒子的padding來調整子盒子的位置：

使用padding屬性調整上圖紅色盒子的位置：event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .father{
            width: 300px;
            height: 250px;
            padding-top: 50px;
            background-color: skyblue;
        }
        .son{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;

        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>