再说流性布局 display:flex ,以及看到的其他一些css 细节

1.overflow对a无效，如果一个”a “元素里面容纳了太多的文字，设定overflow:hidden是没有用的，文字还是会溢出。

哪怕设置了display:block, 还是没用！

2.display: inline-flex 的意义在于改变了外围容器的大小，与里面的元素是block 还是 inline 没啥关系。inline-flex会让外围的容器随着内容的大小而改变，尽可能小得包裹住内容(如果没设宽和高的话)。

3.align-items除flex-start, flex-end, center 外，还可以取baseline,含义是项目的第一行文字的基线（底线）对齐，以及strech，意思是如果项目没指定高度，就拉伸到占满div.

4.flex的值为auto的意思是(flex-grow,flex-shrink,flex-basis)->(1,1,auto):

跟啥都不设还不一样，啥都不设，结果是item有空间不放大，但没空间会缩小。

flex-grow为1，即如果存在剩余空间则项目等分剩余空间, 即使设了width和height也没用（原始默认为0，即不放大）

flex-shrink为1，即默认值，如果空间不足则缩小.

flex-basis为auto ,即默认值，项目本身的大小。

flex-grow,flex-shrink的放大缩小都遵循相同值等比例的原则。

flex的值为none的意思是(flex-flow,flex-shrink,flex-basis)->(0,0,auto)

flex-grow=0, 不放大，flex-shrink=0,不缩小，flex-basis=auto, 项目的原本大小。

flex-basis指item占据的main size 主轴空间。如果设成了固定的px或者%，那它将占据固定的空间而不是根据本身的大小来定。注意%相对的是容器的大小

5.关于父元素中如何定位一个子元素且让它无论怎么动都跑不出父元素：

父元素相对定位，子元素绝对定位且以百分比写top；

貌似还是不行。。。更好的方法应该是限定width和height。。

6.background-position 设百分比，指的是父子的x%的位置彼此对齐。