CSS容易忽略的一些知識點

inline元素、inline-block元素、block元素的區別

1. inline元素根據寬度橫向排列，block元素默認獨佔一行；
2. inline元素沒法設置上下外邊距(margin)、width、height，block元素能夠設置四個方向的外邊距和元素的width、height；
3. inline-block元素則融合了inline元素和block元素，能夠像inline元素橫向排列以及像block元素設置四個方向的外邊距以及width、height；

效果圖以下：

代碼以下：

<div>
    <div style="display: block;width: 100px;height: 100px;background-color: red;margin: 10px;padding: 10px;border: 1px solid grey;">block</div>
    <div style="display: inline-block;width: 100px;height: 100px;background-color: blue;margin: 10px;padding: 10px;border: 1px solid grey;">inline-block</div>
    <div style="display: inline;width: 100px;height: 100px;background-color: yellow;margin: 10px;padding: 10px;border: 1px solid grey;">inline</div>
</div>
複製代碼

咱們給inline元素設置四個方向外邊距，只有左右的外邊距才顯示出了效果。

flex-grow容易忽略的坑

咱們先看看flex-grow的定義：

flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

根據定義咱們能夠得知，當在flex容器內給容器內的項目設置不一樣的flex-grow，能夠根據比例設置項目的空間；

先看第一個例子：

flex容器寬度爲780px，容器內有三個項目，第一個項目固定寬度480px，剩下的兩個項目根據比例分配。

效果圖以下：

代碼以下：

<div style="display: flex;color: grey;width: 780px;">
    <div style="height:100px;flex-basis: 480px;background-color: red;">width480px</div>
    <div style="height:100px;flex-grow: 2;background-color: blue;">flex-grow: 2</div>
    <div style="height:100px;flex-grow: 1;background-color: yellow;">flex-grow: 1</div>
</div>
複製代碼

從效果圖得知，除了固定寬度的項目，另外兩個項目的寬度並未按照咱們所想的那樣分配。

從新去看定義，分配「剩餘空間」彷佛並非咱們理解的那樣，具體這個「剩餘空間」是如何計算我並未具體去研究，在這裏先說說如何解決這個問題。

1. 當剩餘兩個項目內不存在內容的時候，分配的空間就是正確的； 效果圖以下：

   

   代碼以下：

<div style="display: flex;color: grey;width: 780px;">
    <div style="height:100px;flex-basis: 480px;background-color: red;">width480px</div>
    <div style="height:100px;flex-grow: 2;background-color: blue;"></div>
    <div style="height:100px;flex-grow: 1;background-color: yellow;"></div>
</div>
複製代碼

當咱們把除了固定寬度外的項目的內容去掉，分配的空間比例就是正確的，可是這種解決方法確定不是咱們想要的。

2. 給剩餘兩個項目設置flex-basic: 0;

效果圖以下：

代碼以下：

<div style="display: flex;color: grey;width: 780px;">
    <div style="height:100px;flex-basis: 480px;background-color: red;">width480px</div>
    <div style="height:100px;flex-grow: 2;background-color: blue;flex-basis: 0;">flex-grow: 2</div>
    <div style="height:100px;flex-grow: 1;background-color: yellow;flex-basis: 0;">flex-grow: 1</div>
</div>
複製代碼

在這裏當咱們給除了固定寬度外的項目加上flex-basic: 0後，分配的空間就是咱們所指望的那樣了。

若是咱們須要使用flex-grow來分配flex容器內的項目，必定要注意設置flex-basic。由於這裏的「剩餘空間」和flex-basic相關。

下面咱們看看flex-basic的定義：

flex-basic屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。

當咱們一個flex容器內的項目同時存在flex-basic和flex-grow，這個項目的寬度爲flex-basic的值加上flex-grow所分配到的空間。

仍是以上面的代碼舉例，假如咱們給兩個項目的flex-basic設置值爲30px和60px

則剩餘兩個容器的寬度分別爲：

width1 = ((780 - 480 - 30 - 60) * 2 / 3) + 30 = 170

width2 = ((780 - 480 - 30 - 60) * 1 / 3) + 60 = 130

效果圖以下：

代碼以下：

<div style="display: flex;color: grey;width: 780px;">
    <div style="height:100px;flex-basis: 480px;background-color: red;">width480px</div>
    <div style="height:100px;flex-grow: 2;background-color: blue;flex-basis: 30px;">flex-grow: 2</div>
    <div style="height:100px;flex-grow: 1;background-color: yellow;flex-basis: 60px;">flex-grow: 1</div>
</div>
複製代碼

多個class樣式的時候如何取值？

當某個div元素上class的值爲a b c的時候，最後的樣式是如何計算的？

<div class="a b c"></div>
複製代碼

這個問題咱們討論的前提是一樣的樣式屬性；

1. 不考慮權重的狀況下，a b c最終決定元素的樣式爲加載的順序，哪一個class最後加載則顯示爲哪一個class的效果，和書寫順序無關。

• 當a b c都在同一個文件的狀況下，哪一個定義在最後，則以最後的爲準；

.c {
    background-color: green;
}

.b {
    background-color: yellow;
}

.a {
    background-color: red;
}
複製代碼

• 當a b c在不一樣的文件的狀況下，哪一個文件最後加載，則以最後的爲準；

<link rel="stylesheet" href="cssC.css">
    <link rel="stylesheet" href="cssB.css">
    <link rel="stylesheet" href="cssA.css">
複製代碼

2. 若是某個class中設置了!important，則直接以!important的爲準。

3. 其餘時候則按照選擇器的權重來計算樣式。