CSS margin屬性詳解

弘護(hù)正法 2019-10-17

展開全文

我發(fā)現(xiàn)當(dāng)我想寫好一篇博文的時候，希望以后能有人看到，會對別人也有一定的幫助，這時候?qū)τ谄渲械膬?nèi)容就變得深思熟慮起來，讓自己查閱盡可能多的資料，這樣的方式正好可以彌補我某些方面的不足，讓我能夠深入了解一些可能平常不太注意的知識點，哈哈，但可能還是會存在局限性：P。如果能堅持寫博文的話，一定會是一件超棒的事情。這些就只是我自己的碎碎念：）~

盒子模型

講到margin，不可避免的就又要說到盒子模型，盒子模型包括了：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性（這里只說W3C標(biāo)準(zhǔn)的盒子模型）。如下圖所示：

這里寫圖片描述

margin相關(guān)屬性

margin簡寫屬性在一個聲明中設(shè)置所有外邊距屬性。該屬性可以有1-4個值。margin的默認(rèn)值是0。沒有繼承性，也就是說給父元素設(shè)置的margin值并不會自動傳遞到子元素中。

一個參數(shù)

margin: 10px;

所有4個外邊距都是10px

兩個參數(shù)

margin: 10px 5px;

上外邊距和下外邊距是10px
右外邊距和左外邊距是5px

三個參數(shù)

margin: 10px 5px 15px;

上外邊距是10px
右外邊距和左外邊距是5px
下外邊距是15px

四個參數(shù)

margin: 10px 5px 15px 20px;

上外邊距是10px
右外邊距是5px
下外邊距是15px
左外邊距是20px

設(shè)置四個外邊距的順序是上、右、下、左，請記住順時針即可。

margin外邊距合并

塊級元素的垂直相鄰?fù)膺吘鄷喜?
如下圖所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        div {
            margin: 20px;
            color: #fff;
        }
        .top {
            background: green;
        }
        .bottom {
            background: orange;
        }
    </style>
</head>
<body>
    <div class="top">margin: 20px</div>
    <div class="bottom">margin: 20px</div>
</body>
</html>

且其垂直相鄰?fù)膺吘嗪喜⒅蟮闹禐樯显氐南峦膺吘嗪拖略氐纳贤膺吘嗟妮^大值。
如下圖所示：
這里寫圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        div {
            color: #fff;
        }
        .top {
            background: green;
            margin: 40px;
        }
        .bottom {
            background: orange;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="top">margin: 40px</div>
    <div class="bottom">margin: 20px</div>
</body>
</html>

而行內(nèi)元素實際上不占上下外邊距。
如下圖所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        span {
            margin: 20px;
            background: orange;
            color: #fff;
        }
    </style>
</head>
<body>
    <span>margin: 20px</span>
</body>
</html>

行內(nèi)元素的的左右外邊距不會合并。
如下圖所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        span {
            margin: 20px;
            background: orange;
            color: #fff;
        }
    </style>
</head>
<body>
    <span>margin: 20px</span>
    <span>margin: 20px</span>
</body>
</html>

浮動元素的外邊距也不會合并。
如下圖所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        div {
            float: left;
            margin: 20px;
            background: orange;
            color: #fff;
        }
    </style>
</head>
<body>
    <div>margin: 20px</div>
    <div>margin: 20px</div>
    <div>margin: 20px</div>
    <div>margin: 20px</div>
    <div>margin: 20px</div>
    <div>margin: 20px</div>
    <div>margin: 20px</div>
</body>
</html>

margin負(fù)值

左右固定，中間自適應(yīng)（雙飛翼）

雙飛翼布局的好處：
1、主要的內(nèi)容先加載的優(yōu)化；
2、在瀏覽器上的兼容性非常好，IE6及以上都支持；
3、實現(xiàn)不同的布局方式，可以通過調(diào)整相關(guān)CSS屬性即可實現(xiàn)。
實現(xiàn)效果如下圖所示：
這里寫圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            color: #fff;
            height: 200px;
        }
        .center {
            float: left;
            width: 100%;
        }
        .center .content {
            margin: 0 210px 0 110px;
            background: orange;
        }
        .left {
            float: left;
            width: 100px;
            margin-left: -100%;
            background: green;
        }
        .right {
            float: left;
            margin-left: -200px;
            width: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="center">
        <div class="content">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>

用于水平垂直居中

一個居中的div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            background: orange;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

這種使得元素居中的方法的缺點就是：你必須知道這個絕對定位元素寬度以及高度才能通過設(shè)置負(fù)margin值，使其相對于瀏覽器窗口（父元素）居中，若對于不確定寬度和高度，則不能用這種方法，可以使用：