#yyds幹貨盤點# 布局

一、布局

布局就是對頁面的功能區域進行規劃與劃分，規定頁面元素的區域大小和位置。

二、布局方式

1. table 布局
2. div + css 布局

css ：   1. float浮動     2.position定位（絕對 相對 固定）

3.flex 彈性盒布局

三、定位position

定位就是确定元素的位置，定位永遠沒有絕對的位置，都有參考系。

1. 絕對定位 absolute
2. 相對定位 relative
3. 固定定位 fixed

定位時，修改元素位置，使用 top bottom left right 屬性。

一、絕對定位

頁面的視口（viewport：頁面的可見區域），top bottom left right：這四個屬性用于描述元素的四邊，距離視口的四邊的距離。

絕對定位參考系可以修改，在父元素上添加定位屬性，修改之後的參考系将變為父元素的上下左右邊框。

二、相對定位

使用定位前的初始位置，就是相對定位的參考位置，top bottom left right：這四個屬性用于描述元素初始位置到元素移動後的實際位置的距離。

三、固定定位

和絕對定位相同，但是無法修改參考系，top bottom left right：這四個屬性用于描述元素的四邊，距離視口的四邊的距離。

四、flex布局

在一個父元素下有多個子元素，同時需要對多個子元素進行排列時就可以使用flex布局。

父元素上的屬性

1. display: flex 開啟flex布局
2. justify-content: 主要軸對齊方式

1. flex-start: 對齊主軸起點
2. flex-end: 對齊主軸終點
3. center：居中
4. space-around: 子元素主軸上間距相等排列
5. space-between: 兩端對齊，中間均勻分布
6. space-evenly: 均勻分布

1. align-items: 交叉軸對齊方式

1.  flex-start: 對齊交叉軸起點
2. flex-end: 對齊交叉軸終點
3. center：居中
4. stretch：在交叉軸上拉伸填滿（前提是，元素的交叉軸的寬度或高度不固定）

1. flex-direction: 設定主要軸方向

1. row 從左到右
2. row-reverse 從右到左
3. column 從上到下
4. column-reverse 從下到上

子元素上的屬性

1. align-self: 目前子元素在交叉軸上的對齊方式， 取值和 align-items 相同
2. flex-grow: 讓子元素成長，意思是，若主軸有剩餘空間，那麼子元素撐滿剩餘空間