权重与优先级
权重
从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0
优先级
权重相同，写在后面的覆盖前面的 使用 !important 达到最大优先级，都使用 !important 时，权重大的优先级高
flex布局
基础知识
-
flex 是什么属性的缩写
flex-grow、flex-shrink和flex-basis的简写 -
flex 1 1是什么的缩写(= flex 1)
- flex-grow: 1;
- flex-shrink: 1;
- flex-basis: 0%;
注意点：此时flex-basis 为0 item元素所占空间不受width的影响
- 尺寸的计算规则 最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸
- 基础尺寸由CSS
flex-basis属性，width等属性以及box-sizing盒模型共同决定； - 弹性增长指的是
flex-grow属性，弹性收缩指的是flex-shrink属性； - 最大最小尺寸限制指的是
min-width/max-width等CSS属性，以及min-content最小内容尺寸
- flex-basis vs width
- flex-basis的优先级高于width，flex- basis为
auto的时候的计算规则是：子项的基本尺寸根据其自身的尺寸决定。而这个自身尺寸与下面这几个方面有关：
box-sizing盒模型（这个已经介绍过了）；width/min-width/max-width等CSS属性设置；content内容（min-content最小宽度）；
2.flex-basis width的差异
width:100px和flex-basis:100px表现不一样呢？就是最小内容宽度较大的时候
width:100px+flex-basis:auto= 元素自身100px- content +
flex-basis:100px= max(content, flex-basis) = 大于等于100px
常见布局
space-between并且最后一行左对齐
xxx:last-child{
margin-right:auto
}
常见的坑
- flex-end造成无法滚动
<div class="container">
<item>列表1</item>
<item>列表2</item>
<item>列表3</item>
<item>列表4</item>
<item>列表5</item>
<item>列表6</item>
<item>列表7</item>
<item>列表8</item>
</div>
结果：前几项看不见了，而且无法滚动 原因：滚动条在设计的时候，就约定了，只有容器下方（或右侧）内容有多余，才需要滚动，因为不可能说后续的阅读信息在阅读起点的上面，这不符合真实世界的阅读逻辑。
- 子元素撑大flex item父元素的问题
flex 容器的 min-width 属性值为 auto，是由浏览器自行计算的，在这里它取了
元素的宽度，使得宽度成为了一整行
的宽度。那么要解决这个问题，可以把flex item父元素的 min-width 改为0，即最小宽度是0，那么就可以正常收缩了
常用属性
vertical- align
- 生效条件
只有一个元素属于
inline或是inline-block（table-cell也可以理解为inline-block水平vertical-align属性才会起作用。所以，类似下面的代码就不会起作用： 所谓inline-block水平的元素，就是既可以“吸”又可以“咬”的元素，既可以与inline水平元素混排，又能设置高宽属性的元素。哪些元素呢，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。
