flex 左右布局_面试必考点:前端布局知识
前言
這里所要介紹的布局知識(shí)主要是在解決三列布局模式而出現(xiàn)的幾種布局解法,其中包含了經(jīng)典的圣杯布局,雙飛翼布局,絕對(duì)定位的布局方式,還包含2009年W3C所提出的Flex布局方式和以CSS3所帶來的calc計(jì)算函數(shù)來解決三列布局的方式。
本文會(huì)通過實(shí)例的方式講解,帶你了解為什么沒有一種一勞永逸的方法解決三列布局的問題,看看分別在使用這些方式時(shí)分別都遇到了哪些的問題,通過分析解決,讓你明白這幾種方式的各自的優(yōu)缺點(diǎn)與適用場(chǎng)景。
一、三列布局是什么
指共有三列,但是左右兩列是寬度固定,中間一列寬度根據(jù)屏幕寬度自適應(yīng)的布局方式,這是一種比較常見的布局方式,很多網(wǎng)站首頁均采用這種方式布局,比如像下面比較熟悉的菜鳥教程官網(wǎng)。
二、三列布局解決方法
我自己是一名從事了多年開發(fā)的web前端老程序員,目前辭職在做自己的web前端私人定制課程,今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關(guān)注我并在后臺(tái)私信我:前端,即可免費(fèi)獲取。1. 圣杯布局
圣杯布局,一個(gè)經(jīng)典的三列布局解決方法,至于為什么 叫這個(gè)名字,我理解是布局完成后像個(gè)圣杯,接下來一步一步實(shí)現(xiàn)一下圣杯布局。
① 完成基礎(chǔ)效果
②. 將左側(cè)欄,右側(cè)欄移到與內(nèi)容欄同樣高度,這里先利用float浮動(dòng)元素。
注意浮動(dòng)完成之后,footer元素被蓋在內(nèi)容塊下面了。
③. 利用margin-left的負(fù)值將左側(cè)欄,右側(cè)欄和內(nèi)容欄移到同一高度。將左側(cè)欄margin-left賦值為-100%;然后將右側(cè)欄margin-left賦值為負(fù)的自身寬度。
注意:這里的左右側(cè)欄都是附在內(nèi)容欄上的,內(nèi)容欄被壓在下面。
④. 將底部footer區(qū)域利用clear屬性清除content內(nèi)的浮動(dòng)元素透出來。
⑤. 將內(nèi)容欄被左右壓在底下的部分,通過content添加padding屬性透出來。
.content { padding: 0 200px;}這個(gè)時(shí)候真整個(gè) content的內(nèi)容都被padding縮放了,怎么辦呢?
⑥. 左右側(cè)邊欄利用position: relative,移出內(nèi)容區(qū)域。
整個(gè)布局就完成了,你可以左右拉伸屏幕,內(nèi)容區(qū)域?yàn)樽詣?dòng)縮放,符合咱們 開始時(shí)的需求。
圣杯布局的問題:當(dāng)縮放到一定程度,會(huì)發(fā)現(xiàn)整個(gè)頁面結(jié)構(gòu)將會(huì)變亂。
當(dāng)然利用min-width可以解決這個(gè)問題,因?yàn)閙in-width是后續(xù)css3中所出現(xiàn)的內(nèi)容,在當(dāng)時(shí)min-width還沒有的情況下,圣杯布局就存在這個(gè)問題。然而這個(gè)問題可以解決嗎?接下來進(jìn)入雙飛翼布局。
2. 圣杯雙飛翼布局
雙飛翼布局是圣杯布局演化而來的,且是旨在要解決圣杯布局所遇到的問題,即縮小到一定程度后頁面布局依舊正常,因?yàn)榇a和圣杯基本一致,只是結(jié)構(gòu)略有差異,這里不一步一步拆解。
從上面的DOM結(jié)構(gòu)來看,雙飛翼布局與圣杯布局最大的不同點(diǎn)便是在此,雙飛翼布局中,將中間欄放在一個(gè)div內(nèi)部包裹起來了,多了一層DOM結(jié)構(gòu)。
下面看看樣式。
從上面雙飛翼的布局來看,css中沒有了position定位布局的內(nèi)容了,感覺簡(jiǎn)明而清晰了。
雙飛翼布局的問題:相比于圣杯布局多了一層DOM結(jié)構(gòu),導(dǎo)致頁面渲染性能下降。
3. 絕對(duì)定位布局
如果作為一個(gè)初學(xué)者,讓我解決這個(gè)問題,我一定會(huì)選擇絕對(duì)定位布局,因?yàn)榻^對(duì)定位布局是最簡(jiǎn)單最容易理解的一種三列布局解決方式。
思路非常簡(jiǎn)單,列為以下幾步。
①. 將內(nèi)容區(qū)域給margin值,居中且留出左右側(cè)邊欄的寬度。
②. 將外層content添加position:relative屬性。
③. 將左右側(cè)邊欄設(shè)置絕對(duì)定位屬性,position: absoluate,進(jìn)行布局在與內(nèi)容欄同高的位置。
④. 分別設(shè)置left:0與right:0 屬性,保持內(nèi)容塊與左右側(cè)欄有順序且不重合排列。
css相關(guān)內(nèi)容也非常容易理解,基本都是常用的定位相關(guān)內(nèi)容。
上面的布局代碼雖然非常容易理解,但是它卻有一個(gè)致命的問題。
定位布局的問題:因?yàn)樽笥覀?cè)的高度是絕對(duì)定位脫離文檔流的,此時(shí)footer區(qū)域只會(huì)在內(nèi)容區(qū)塊下,而不是由內(nèi)容塊和左右側(cè)欄三塊區(qū)域的高度而決定,所以在某些場(chǎng)景下是不能滿足需求的,如呈現(xiàn)出下面的效果。
4. Flex布局
flex布局是2009年W3C所提出的一種新的布局方式,在目前是非常好用且常見的布局方式,我感覺能解決頁面上百分之90的布局問題,但是因?yàn)槌鰜淼谋容^晚,會(huì)有部分瀏覽器兼容性的問題。
代碼完全是簡(jiǎn)約而又大方,而且沒有上面三種布局所產(chǎn)生的問題,真是三列布局必備良品。
flex布局的問題:唯一能說的問題就是兼容性問題了。
flex布局解決三欄布局無疑絕對(duì)是最方便的,如果現(xiàn)在我遇到三列布局的問題,毋庸置疑我會(huì)選擇flex布局來解決,盡管有一些低版本瀏覽器的兼容性,9012年的今天請(qǐng)放心使用。
5. CSS3的calc函數(shù)
思路非常容易理解,就是中間三塊區(qū)域加float浮動(dòng)起來,從左到右依次按順序排列,因?yàn)樽笥覂蓚?cè)寬度已知,而中間塊寬度需要自適應(yīng),所以只要在屏幕寬度變化的時(shí)候,通過css3的方法實(shí)時(shí)計(jì)算出中間內(nèi)容塊自適應(yīng)的寬度即可,非常符合人們的思維習(xí)慣。
calc是css3支持的css計(jì)算函數(shù),它能動(dòng)態(tài)的計(jì)算出一個(gè)值,打破傳統(tǒng)css概念,讓你的css也能做計(jì)算。
使用用法:calc(表達(dá)式)
calc() 的使用注意點(diǎn):運(yùn)算符前后都需要保留一個(gè)空格,例如:width: calc(100% - 400px);
任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算;
calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算;
calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則;
css3計(jì)算屬性布局的問題:也是兼容性問題了,從下面可以看出來很多瀏覽器還是不支持的。
三、總結(jié)
上面就是經(jīng)典的三列布局相關(guān)的知識(shí),雖然圣杯布局和雙飛翼布局在現(xiàn)在很少被用到,但是作為一個(gè)前端開發(fā)者,還是要了解這些經(jīng)典的布局相關(guān)知識(shí),從而在面試出現(xiàn)的時(shí)候能夠從容應(yīng)對(duì)。
實(shí)際上,在9012年的今天,其實(shí)在目前開發(fā)中百分之九十的布局都是可以通過flex布局來解決的,只要你沒有IE低版本的用戶需求,掌握Flex布局是非常重要的。
最后所介紹的css3計(jì)算屬性解決三列布局是一種比較貼近數(shù)學(xué)思想的角度出發(fā),從計(jì)算的方式來解決自適應(yīng)下的寬度變化,但是兼容性還是較差,所以作為實(shí)際解決方案還是不妥,就當(dāng)是了解CSS3新世界的敲門磚吧。
如上內(nèi)容如有錯(cuò)誤或者認(rèn)識(shí)偏差,如有問題,希望大家留言指正,以免誤人,若有什么問題請(qǐng)留言,會(huì)盡力回答之。
原文鏈接https://mp.weixin.qq.com/s/bPfdwdF1SR9Pt03zNhNebw作者:TingRongGao
總結(jié)
以上是生活随笔為你收集整理的flex 左右布局_面试必考点:前端布局知识的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Mysql事项,视图,函数,触发器命令
- 下一篇: settimeout需要清除吗_前端20