再說流性布局 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%的位置彼此對齊。