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