CSS + HTML 小知識點大雜燴（margin合併、塌陷，清除浮動）

這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學生，就是想把自己所學到的知識寫出來，加深自己的印象，記錄自己成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知識點。

首先我想說一下margin合併和margin塌陷這兩個小‘bug’。

先讓我來解釋一下什麼是外邊距合併： 所謂的外邊距合併就是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
按我個人的理解，margin合併一般是兄弟之間，margin塌陷一般是父子之間。
我們先說一下margin合併，話不多說，直接上程式碼。
- 建立兩個div <div class="app"></div><div class="app2"></div>
- 樣式如下.app { height: 60px; margin-bottom: 100px; background-color: #165; } .app2 { height: 60px; margin-top: 100px; background-color: #981; }
  當我們給.app加上margin-bottom: 100px時，
  但當我們給.app2也加上margin-top: 100px;時，發現根本沒有變化。
  這就是margin合併，在兄弟元素之間會選擇較大的一個margin值作為最後的margin值。
下面說一下margin塌陷。
同樣的建立兩個div<div class="app"> <div class="app2"></div> </div>

我們給大的也就是.app設定margin-top: 100px;變成這樣：

我們在給.app2設定margin-top:100xp;發現沒動。

這時候就感覺是不是設定錯了或寫錯了，可是怎麼看都是對的，但結果為什麼是這樣的我明明給.app2加了margin-top:100px;的樣式了啊，它為什麼不動，此時我們試著加大.app2的margin-top值神奇的發現動了,但不僅它動還帶著它爸一起動，這是要帶全家跑的節奏啊。此時是不是感覺很奇怪為什麼啊？因為在垂直方向上的maigin會合並，就好像父級沒有了頂一樣，露天的了，而且他們還會取最大的一個，你說貪不貪,看個玩笑啊。

看下面錯誤的解決方法：當我們給.app加上border-top: 10px solid yellowgreen（加10px只是為了方便看見）時，發現我們的bug也得到了解決。

是不是很開心，但你不覺得奇怪嗎？多出來一個border啊。去掉？那這個問題沒解決啊。那怎麼辦，你是不是想著減小它，那我們試試，我把10px改成了1px。是不是感覺看不見了，

但我們放大還是能看得見。這時你是不是想起來改顏色，那我們改個顏色。我把顏色改成了transparent，這肯定看不見吧，而且也解決了這個問題。是不是很開心，但要是用這種方法解決我覺得我就沒有寫的必要了。記住我們不要輕易去改變DOM結構不要為了解決一些問題去新增沒有實際意義的標籤或樣式。

2.在說解決方案之前先讓我們瞭解一下什麼是BFC（不是KFC啊）。 BFC(Block formattingcontext)直譯為"塊級格式化上下文"它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。簡單來說就是你能通過BFC來改變一個元素的渲染規則。聽著是不是很厲害。

那BFC是不是一個屬性或元素啊，NO！不過他好像沒多大的作用但它就偏偏解決了這個所謂的bug，好像就是為它而生的。那怎麼樣觸發一個元素的BFC呢，很簡單，你幾乎隨時都在觸發一個元素的BFC，是不是很懵逼,什麼！。下面介紹幾個css屬性，這些你肯定天天在用：

  1、浮動元素，float 除 none 以外的值； 
  2、定位元素，position（absolute，fixed）； 
  3、display 為以下其中之一的值 inline-block，table-cell，table-caption； 
  4、overflow 除了 visible 以外的值（hidden，auto，scroll）；```
複製程式碼

是不是很熟悉，上面列出來的都能觸發一個個盒子的BFC，就是這麼簡單。當我們給.app加上display: inline-block;時：

發現.app2的頂變成了.app不再是瀏覽器了。或者我們在給.app設定成overflow: hidden發現也能解決margin合併的問題：

只不過超出部分隱藏了。這就帶來了第二個問題：我們該用哪個呢？其實我也不知道，是不是很驚訝，不知道你寫什麼寫一會底下評論區噴死你。其實我是真不知道用哪一個，它要根據你實際的需求來決定用哪一個。有弊有利需要你自己權衡。如果你的需求是超出部分不要隱藏那你設定一個overflow: hidden是不是很尷尬。

好了，margin塌陷解決了，那就剩margin合併了，同樣應用上面的BFC規則。

將兄弟元素分別作為子元素放在塊級元素內，然後將其父級元素的渲染規則該為BFC。

但不推薦使用，為什麼？因為你這樣會改變HTML文件結構，沒事你改它幹什麼，能不動就不動。那我們該怎麼解決？接下來我要放大招了，別嚇到你。我的解決辦法是：不解決! ,對你沒看錯不解決!。

就是直接改變其中一個的外邊距的值。

其實當你遇到margin合併時你為什麼要子設定一個父設定一個，最後還想著改變他們的渲染規則有甚者改變HTML結構，它既然取大的值那你就給它個大的。比如你想要他們上下間距是200px，你非得一個margin-top: 100px，一個margin-bottom: 100px，你直接取一個margin-top | margin-bottom : 200px不得了。

下面我們來說一下清除浮動

浮動前效果看下圖：

浮動後效果看下圖：

你可能會說有什麼區別？是沒什麼區別，但你沒發現你看不到父級了，因為父級的高度沒有了（我沒有為父級指定固定的高度）。說白了是它裡面沒東西了所以撐不起它。那你會說，給他一個不得了。好，聽你的。

父級有高度了也能看到他了，那我們試著多給他幾個孩子。（為了方便看見我把子元素的背景換成了border，希望不會影響到你）。

孩子超出去了，你可能覺得沒什麼，可是我們想要的是隨著子級的增多父級高度自動增加。那我們怎麼辦，回到主題清除浮動。那怎麼清除呢？你會想到clear: both，那我們來試試。

加上了一個p標籤，設定了clear: both問題解決了。

但你是不是改了結構，那說明不可取試著換換別的方法吧。記不記得偽元素？說白了父級之所有沒有高度是因為子級浮動脫離了文件流跟父級不在一個流裡了，所以父級看不到他們，高度自然就不會被撐開了。既然提到了偽元素那我們就用偽元素來解決。我們給父級設定::after { content: ""; clear: both; } 看看。發現沒變化，哈哈。你可能忘了偽元素是行內元素，只有塊元素才能清除浮動。在這裡再說一下，所有的行內元素就是帶有inline的都能看到浮動元素，塊元素看不到浮動元素。當我們把after變成塊元素後發現浮動被清除了。

其實清除浮動不只這種方法，只要你觸發了父級的BFC同樣也能清除浮動。我這裡就不演示了，究其原因是因為：我說過只有塊級元素看不到浮動元素，當你使用上面推薦的幾種觸發BFC的方法時，其實你是把他們變成了行內元素，所以高度就被撐開了。所以我們最好float後，主動清除一下浮動，避免以後遇到很奇怪的問題。

3.用HTML + CSS畫一個等腰梯形。

HTML部分：<div class="app"></div>

CSS部分：

.app {
        width: 0;
        height: 0;
        border: 100px solid #561;
}
複製程式碼

首先，先讓我們畫一個三角形。
- 我們先來看看border 的上、右、下、左是怎麼分的。

別吐槽我的審美，我是真不知道用什麼顏色。border就是這麼分的，有沒有看到三角形。這樣我們把其他三個方向的border設定成透明的一個三角形就畫出來了。

border-top: 100px solid transparent;
        border-bottom: 100px solid #561; 
        border-left: 100px solid transparent; 
        border-right: 100px solid transparent; 
複製程式碼

這跟梯形有什麼關係，是沒關係，但是又有很大的關係。下面不解釋了，直接上程式碼。

.app {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: #561;
    }
    .app::after {
        content: "";
        position: absolute;
        right: -100px;
        border: 50px solid transparent;
        border-bottom-color: #561; 
        border-left-color: #561; 
    }
    .app::before {
        content: "";
        position: absolute;
        left: -100px;
        border: 50px solid transparent;
        border-bottom-color: #561; 
        border-right-color: #561;
    }
複製程式碼

這只是我個人的理解和實現。 4.說一些小知識點

其實我們設定字型大小的時候設定的是字型的高度。
其實一個元素的line-height也能決定一個元素的高度。

.app {
        width: 100px;
        color: #fff;
        background-color: #561;
    }
複製程式碼

當我們設定line-height=100px時：

變成了這樣，其實這也是垂直居中的一個原理吧。

總結： 以上是我對我瞭解的一些知識點的總結，希望可以幫到一些人，同時也讓我加深了對這些知識點的理解和認識，作為一名自學前端的在校大學生希望大佬們指出錯誤，一起探討。感謝。

CSS + HTML 小知識點大雜燴（margin合併、塌陷，清除浮動）

相關文章