CSS幾種常見的頁(yè)面布局方式介紹

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

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

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

（3） 問(wèn)題擴(kuò)展

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

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

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

什么是頁(yè)面布局?頁(yè)面布局有什么原則？

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

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

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