CSS並不簡單--帶你認識不同的margin

這一節主要介紹margin的用法和常見問題的分析。

1、簡介

  margin咱們通常習慣的叫它外邊距，分別能夠設置四個方向的外邊距，這裏再也不贅述賦值語法。

  實際上，咱們一般設置的margin是物理級別的設置，而margin還有start、end、before、after等，這些主要是邏輯級別的設置，若是你感興趣的話，自行Google吧。

  在設置margin時，咱們必需要知道：

• 對於塊級元素，margin在四個方向是多有效；
• 對於內聯元素，margin只在水平方向有效。

2、盒子模型

  說到margin，不得不說一下盒子模型：

• 從內以外content => padding => border => margin

  盒子模型之因此要重點理解，主要是盒子模型的標準不同，也就決定咱們在CSS中設置的width究竟是什麼，這時你們多會想起那幾個計算公式，實際上CSS3的到來，咱們能夠經過box-sizing來設置盒子模型的標準:

• border-box: width從border開始計算；
• content-box: width從content開始計算；
• padding-box: 已經從標準中去除。

3、margin重疊問題

  這種問題主要發生在block元素上而且不是浮動元素（這裏並無描述清楚，在後面會詳細講），下面咱們來看發生的狀況。

一、發生在相鄰的兄弟元素

.a {
        margin: 50px 0;
    }
    .b {
        margin: 100px 0;
    }
複製代碼

  這種狀況發生margin重疊，相鄰兄弟節點之間的距離爲最大margin值，避免這種狀況的最佳方式，在垂直方向上，只設置margin-top或者margin-bottom。

二、發生在父子節點

div(class="b")
    div(class="a")
        div(class="c") C
複製代碼

.a {
        margin: 20px 0;
    }
    .b {
        margin: 100px 0;
    }
複製代碼

  這裏按照咱們的理解應該是a距離b是20像素，c距離a是100像素。可是事實卻不是這樣，這裏咱們能夠經過如下方法解決重疊的問題：

• 父元素設置border；
• 父元素設置padding；
• 父元素設置overflow爲hidden或者scroll，其餘的不適用；
• 父元素設置position爲fixed或者absolute，其餘的不適用。

4、神奇的margin負值

  咱們給一個block元素設置四個方向上的margin會發生什麼:

• top和left設置負值，會將元素向上或者左移動對應的像素距離；
• bottom和right設置負值，則會將相鄰的元素向上或者左移動。

  這裏還有一點，查資料的時候，發現不少人多說margin負值能夠改變元素的寬度，這裏我想更正一下，這並非margin負值的特性，而是margin的特性，好比下面這段CSS，徹底能夠設置塊級元素的寬度。

.item {
        margin: 0 200px;
        height: 200px;
    }
複製代碼

  對於margin賦值在佈局的應用很普遍，好比咱們已知一個元素的寬高，你能夠經過margin負值居中。

.item {
        position: absolute;
        background: red;
        width: 200px;
        height: 200px;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }
複製代碼

5、margin與float

  對於這兩個讓人頭疼的屬性混到一塊兒，我只想說，真的很爆炸。上面我說過「這種問題主要發生在block元素上而且不是浮動元素」，這裏要再補充兩點：

• 相鄰兄弟元素，若是二者可能是浮動元素，則不發生margin重疊；
• 父子元素，若是其中一個是浮動元素，則不會發生margin重疊；

  主要仍是因爲浮動元素不在正常的文檔流中，因此仍是用上清除浮動的方法比較好。(如下爲bootstrap的實現方式)

.clearfix::before, .clearfix::after {
        content: " ";
        display: table;
    }

    .clearfix::after {
        clear: both;
    }
複製代碼

---

  喜歡本文的小夥伴們,歡迎關注個人訂閱號超愛敲代碼,查看更多內容.