全國(guó)咨詢(xún)/投訴熱線:400-618-4000

首頁(yè)技術(shù)文章正文

常見(jiàn)的布局方式有幾種?哪幾種是必須要掌握的

更新時(shí)間:2021-07-27 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

CSS常見(jiàn)的有以下7種,必須要掌握的是前3種:
flex彈性盒子(彈性布局);
rem布局(一般都是flex+rem使用的比較多);
響應(yīng)式布局(響應(yīng)式布局的原理,和適配方案必修掌握);
固定布局 / 流式布局(百分比布局)/ 浮動(dòng)布局 / 定位布局;


Flexbox布局

flex布局又稱(chēng)彈性盒子,簡(jiǎn)單代碼量少,可以不用左右浮動(dòng)了
Flexbox布局在定義伸縮項(xiàng)目大小時(shí)伸縮容器會(huì)預(yù)留一些可用空間,讓你可以調(diào)節(jié)伸縮項(xiàng)目的相對(duì)大小和位置。例如,你可以確保伸縮容器中的多余空間平均分配多個(gè)伸縮項(xiàng)目,當(dāng)然,如果你的伸縮容器沒(méi)有足夠大的空間放置伸縮項(xiàng)目時(shí),瀏覽器會(huì)根據(jù)一定的比例減少伸縮項(xiàng)目的大小,使其不溢出伸縮容器。綜合而言,F(xiàn)lexbox布局功能主要具有以下幾點(diǎn):
第一,屏幕和瀏覽器窗口大小發(fā)生改變也可以靈活調(diào)整布局;
第二,可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸按比例分配額外空間(伸縮容器額外空間),從而調(diào)整伸縮項(xiàng)目的大?。?br style="box-sizing: border-box; margin: 0px;"/>第三,可以指定伸縮項(xiàng)目沿著主軸或側(cè)軸將伸縮容器額外空間,分配到伸縮項(xiàng)目之前、之后或之間;
第四,可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周?chē)?br style="box-sizing: border-box; margin: 0px;"/>第五,可以控制元素在頁(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é)合布局方式,那么常見(jiàn)的就是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 以此類(lèi)推
2)流式布局以百分比為主要形式,讓屏幕自適應(yīng),這種布局方式定義靈活,能夠根據(jù)屏幕的情況變化,但是這種方式設(shè)計(jì)的效果不太容易控制,一般移動(dòng)端結(jié)合rem用的比較多,pc端用的不是非常多





猜你喜歡:

頁(yè)面布局的排列規(guī)則是什么?怎樣清除浮動(dòng)標(biāo)簽?

try-except語(yǔ)句與else子句聯(lián)合使用處理可能出現(xiàn)的程序異常

什么是匿名函數(shù)?它與普通函數(shù)有哪些不同?

黑馬程序員前端與移動(dòng)開(kāi)發(fā)培訓(xùn)

分享到:
在線咨詢(xún) 我要報(bào)名
和我們?cè)诰€交談!