CSS幾種常見的頁面布局方式介紹

flex布局又稱彈性盒子，簡單代碼量少，可以不用左右浮動了
Flexbox布局在定義伸縮項目大小時伸縮容器會預留一些可用空間，讓你可以調(diào)節(jié)伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的多余空間平均分配多個伸縮項目，當然，如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據(jù)一定的比例減少伸縮項目的大小，使其不溢出伸縮容器。綜合而言，F(xiàn)lexbox布局功能主要具有以下幾點：
第一，屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局；
第二，可以指定伸縮項目沿著主軸或側(cè)軸按比例分配額外空間（伸縮容器額外空間），從而調(diào)整伸縮項目的大??；
第三，可以指定伸縮項目沿著主軸或側(cè)軸將伸縮容器額外空間，分配到伸縮項目之前、之后或之間；
第四，可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍；
第五，可以控制元素在頁面上的布局方向；
第六，可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項目順序。

rem布局
rem根據(jù)頁面寬度和的頁面的根元素來控制大小，移動端常用方式之一
響應式布局，一套代碼適應pc和移動端，設置好幾個尺寸分別的樣式，根據(jù)頁面的寬度來改變樣式
流式布局也叫百分比布局。把元素的寬,高,margin,padding不再用固定數(shù)值,改用百分比,這樣元素的高,margin,padding 會根據(jù)頁面的尺寸隨時調(diào)整，已達到適應當前頁面的目的
百分比是基于元素父級的大小計算得來的；
元素的水平或者豎直間距都是相對于父級的寬度計算的.(margin&padding)
邊框不能用百分比設置
浮動布局關鍵詞，float，可以設置left或者right，他使元素脫離文檔流進而達到布局的目的，也是目前一個比較主流的布局方式，但是使用浮動的結(jié)束以后，別忘記清除浮動

定位布局
定位布局也是目前比較常用的一種布局方式，關鍵詞： position: fixed;固定布局，將元素固定在一個位置，不隨頁面移動而移動，position: relative;相對定位，相對于元素自身定位，不脫離文檔流，相當于定義一個參照物，一般和絕對定位結(jié)合使用，position: absolute;絕對定位，脫離文檔流，一般和相對定位結(jié)合使用，如果不定義相對定義，將會相對于整個瀏覽器定位，所以定位布局，一般情況下都是相對定位和絕對定位結(jié)合著來，相當定位相當于劃定一個勢力范圍，制定一個封閉的容器塊，然后絕對定位就行對于相對定位來定位，從而達到有效的布局。

（3） 問題擴展

結(jié)合布局方式，那么常見的就是css布局方式，對于css樣式一般需要涉及到的就是實現(xiàn)以下三種布局：
實現(xiàn)div的水平居中和垂直居中
多元素水平居中
實現(xiàn)柵格化布局

（4）結(jié)合項目中使用

1）rem布局先設置根元素（font-size: 100px）方便計算，然后比如div需要100px寬度就是1rem 以此類推
2）流式布局以百分比為主要形式，讓屏幕自適應，這種布局方式定義靈活，能夠根據(jù)屏幕的情況變化，但是這種方式設計的效果不太容易控制，一般移動端結(jié)合rem用的比較多，pc端用的不是非常多

什么是頁面布局?頁面布局有什么原則？

彈性盒布局常用屬性列舉【web前端】

流式布局介紹：流式布局的優(yōu)勢和不足

傳智教育前端開發(fā)高手班