一、**布局
二、frameset框架
三、浮動定位加css+div來布局
四、伸縮布局
----浮動後脫離標準流清除浮動：父元素加overflow;hidden;
伸縮項：他的子元素就是伸縮項
在伸縮布局中，預設情況下水平方向是主軸，預設情況下主軸的起點在伸縮容器的左邊，預設情況下所有的伸縮項時從主軸的起點開始的，但是可以通過屬性來修改主軸的起點位置####側軸的對齊方式
flex-direction:用於修改主軸起點的位置;----引數：
1、flex-direction:row:起點在伸縮容器的最左邊，終點在伸縮容器的最右邊，從左到右排版
2、flex-direction:row-reverse;從右到左排版
3、flex-direction:column;（列）把主軸的起點改為上 從上到下
4.flex-direction:column-reverse;把主軸的起點改為下 從下到上
2、flex-end和主軸的終點對齊
3.center和主軸的中點對齊
4、space-between；兩端對齊
flex-start和側軸的起點對齊
----注意點：
沒有兩端對齊和環繞對齊
**align-items:baseline;**基線對齊 讓所有所以伸縮項中的基線在一條直線上對齊
align-items:stretch;拉伸/等高對齊
-----讓所有的伸縮項的高度變為側軸的高度
######如果在伸縮容器中通過align-items：來控制伸縮項的對齊方式，是一次性控制所有伸縮項的對齊方式 如果想單獨的控制某乙個伸縮項在側軸上的對齊方式，那麼需要將控制對齊的方式的屬性寫道伸縮項中
align-items:寫到伸縮容器中/控制所有伸縮項
align-self:寫到伸縮項中/控制編寫對應**的那個伸縮項中
兩個取值一樣只是控制的範圍不一樣
預設情況下如果伸縮容器的一行放不下所有的伸縮項，那麼系統會自動等比壓縮所有的伸縮項
flex-wrap:nowrap;在伸縮容器中有乙個flex-wrap屬性，專門用於控制放不下是否需要換行的
flex-wrap:nowrap;不換行
flex-wrap:wrap;換行
flex-wrap:wrap-reverse;換行反轉
#####換行對齊方式
align-content:;是專門用於設定換行之後的對齊方式的
—取值；
flex-start；換行之後和側軸的起點對齊，一行接一行
flex-endt;換行之後和側軸的終點對齊，將所有換行之後的內容當作乙個整體來操作
center換行之後和側軸的中點對齊
space-between換了之後在側軸上兩端對齊
space-around每一行上下都有空間
stretch以行為單位進行拉伸，拉伸的部分以空白填充，保證拉伸之後所有的行加起來能夠填滿側軸，
布局 Flex伸縮布局
flex是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。採用flex布局的元素，稱為flex容器，簡稱 容器 它的所有子元素自動成為容器成員，成為flex專案，簡稱 專案 總結 通過給父盒子新增flex屬性，來控制子盒子的位...
彈性布局（伸縮布局）
彈性布局 伸縮布局 僅僅是網頁布局中的一種新的解決方案。應用場景 當頁面 現多個盒子一行顯示時，可以考慮使用彈性布局 如 兩端對齊，中間自適應居中，兩行屬性即可實現 display flex justify content space between 問 為什麼彈性盒子中的元素會一行顯示？1.在彈性...
flex布局 彈性布局 伸縮布局
主要介紹下彈性布局的常用的一些屬性 當乙個盒子設定為display flex的時候,盒子會變為乙個彈性盒子,盒子內部的子元素會預設沿著主軸方向排布,此時會引出主軸和側軸的概念。主軸 預設水平向右 類似於x軸 側軸 與主軸垂直的就是側軸,預設垂直向下 類似於y軸 彈性盒子的主軸方向預設水平向右,但是可...