新的一周開始了，冷風吹得人懶洋洋不想動彈.趁著總結iOS新特性之前繼續學習CSS布局。
Absolute
絕對布局，破壞了流結構，會直接覆蓋在其他流結構布局元素上。
position:absolute;
① 未設置left right bottom top時，位置不變只不過流結構中不會保留該元素的區域。
②設置left right bottom top時，會相對父元素(非static)進行絕對布局
舉個例子: top = 0并不是屏幕的y = 0的位置，而是父視圖中 y = 0的位置
- 設置兩個值(如left和top、bottom和right)
- 設置三個值(如left、top和right)
- 設置四個值
上文中有一個重點，絕對布局是相對于父元素（非static）而言的，舉個例子: 當父視圖的高度 > 屏幕的高度
position: absolute;
① 父元素position: static ，那么該absolute子元素相對于屏幕布局
②父元素position:relative，那么absolute子元素相對于父元素布局
Position: fixed
在未滑動的狀態下設置left right top bottom 的效果和absolute一致，但是不管什么情況下這四個值都是相對于屏幕而言。
Position: sticky
元素在保留在流結構中的位置，當滑動到距離 top left right bottom設置的值時，便會停止在該位置，如同當滾動到某個位置時，某個view會懸停到某個位置不動的效果。在頁面中設置多個sticky元素時，下面為sticky的元素會從上面蓋過上面元素的效果:
靜止狀態
Section B(sticky)滑動靠近頂部時
① 當同時設置了top = 0px 和bottom = 0px，并不會和fixed一樣覆蓋整個父視圖的區域，而是在該view信息流中的y位置進入屏幕前使用bottom = 0px，固定在底部:
② 在信息流中的y位置進入屏幕時，滾著滾動，直到滿足top = 0px
grid 網格布局
和flex彈性布局不同的地方是通過畫格子的方式能快速的進行二維空間布局。
grid-template-columns
默認為一列，通過設置該屬性值設置尺寸，判斷每行的column數。通過數值和百分比進行布局時：
① 當只有一個值時，如40%
② 當設置多個值時，且總和不超過屏幕寬度，如 40% +60% = 100%
③ 當設置多個值時，總和超過屏幕的寬度,窗口可橫向滑動，如40% + 60% + 40% = 140%
使用彈性單位fr，可以按比例分配容器的大小。
總共分成4份，第一列占1份，第二列占2份
使用關鍵字auto，會填滿容器的可用空間：
但是對于設置彈性單位fr，則會默認為auto的列設置文本的寬度:
對齊方式
① justify-items: grid-item在布局區域水平方向左右對齊方式
②justify-content:給content items在水平方向分配空間
和flex相似，space-around: item間距是邊距的2倍；space-evenly: 間距和邊距一致。
③ justify-self: 修改某個item在水平方向上的對齊方式。效果和justify-items一樣，只不過是針對某個item而言
在豎直方向上，實現以上的效果，只需要將justify替換成align
align-items 、align-content 、 align-item
④ place-content: align-content 和justify-content的縮寫（注意順序！！）。可同時設置水平和垂直方向content的對齊方式
place-content: start end;
⑤place-items: align-items 和justify-items的縮寫（注意順序！！）。可同時設置水平和垂直方向items的對齊方式
Flex 布局縮放因子Flex-shrink 和Flex-grow計算
三個元素寬度分別為 200px 300px 400px，縮小因子分別為: 1 2 3
容器寬度為800px
所以這時候因為會縮小各個flex-shrink != 0的元素。之前錯誤的理解是:
而正確的理解為:
①當flex-shrink的總和 > 1時，表示要縮放整個超出的部分
②當flex-shrink的總和 < 1 時，表示只是縮放（超出部分 * flex-shrink）的部分
具體可參考:Flex彈性布局縮放因子探究
按照前端學習流程，下一步就進入了JS相關的學習了[撒花]
