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