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. 其他时候则按照选择器的权重来计算样式。