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

這是個人第一篇掘金文章，但願你們不要嫌棄。我仍是一名在校大學生，就是想把本身所學到的知識寫出來，加深本身的印象，記錄本身成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知識點。

1. 首先我想說一下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屬性，這些你確定每天在用：

一、浮動元素，float 除 none 之外的值； 
  二、定位元素，position（absolute，fixed）； 
  三、display 爲如下其中之一的值 inline-block，table-cell，table-caption； 
  四、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不得了。

3. 下面咱們來講一下清除浮動

浮動前效果看下圖：

浮動後效果看下圖：

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

父級有高度了也能看到他了，那咱們試着多給他幾個孩子。（爲了方便看見我把子元素的背景換成了 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時：

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

總結： 以上是我對我瞭解的一些知識點的總結，但願能夠幫到一些人，同時也讓我加深了對這些知識點的理解和認識，做爲一名自學前端的在校大學生但願大佬們指出錯誤，一塊兒探討。感謝。