資訊專欄INFORMATION COLUMN
摘要：五種方法的優(yōu)缺點(diǎn)浮動(dòng)兼容性好，如果對(duì)兼容性有明確的要求使用浮動(dòng)應(yīng)該滿足需求，但是一定要處理好與周邊元素的關(guān)系，因?yàn)橐徊蛔⒁飧?dòng)就可能造成頁面布局混亂等問題，不過解決浮動(dòng)帶來的副作用方法也不少這里我們不做討論。
第一種方法 float
浮動(dòng)解決方案
第一種解決方案基本上沒有什么難度，平時(shí)應(yīng)該也會(huì)用到很多！
絕對(duì)定位方案2
第二種方法也是輕松實(shí)現(xiàn)效果。
第三種方法：flexbox第四種方法：表格布局flex方案
table方案
table方案同樣實(shí)現(xiàn)，只是現(xiàn)在我們可能已經(jīng)很少使用表格布局了。頁面渲染性能也要差一點(diǎn)！
grid方案
網(wǎng)格布局方法也實(shí)現(xiàn)了，CSS3的網(wǎng)格布局有點(diǎn)類似于bootstrap的柵格化布局，都是以網(wǎng)格的方式來劃分元素所占的區(qū)塊。
問題沒有結(jié)束，我們繼續(xù)討論。五種解決方案哪一個(gè)更好呢？筆者一直認(rèn)為技術(shù)沒有好壞之分，完全取決于你用在什么地方。
五種方法的優(yōu)缺點(diǎn)：浮動(dòng)：兼容性好，如果對(duì)兼容性有明確的要求使用浮動(dòng)應(yīng)該滿足需求，但是一定要處理好與周邊元素的關(guān)系，因?yàn)橐徊蛔⒁飧?dòng)就可能造成頁面布局混亂等問題，不過解決浮動(dòng)帶來的副作用方法也不少這里我們不做討論。
絕對(duì)定位：簡(jiǎn)單直接，但是會(huì)使父元素脫離正常文檔流里面的子元素也會(huì)跟著脫離。
flex:目前看來比較完美，不過現(xiàn)在稍微完美一點(diǎn)的技術(shù)都存在或多或少的兼容性問題，同樣這個(gè)樣式IE8下是不支持的?。↖E呀?。?/p>
表格布局：表格布局雖然沒有什么大的問題，但是在我們要細(xì)化結(jié)構(gòu)的時(shí)候會(huì)顯得很繁瑣，同時(shí)表格布局三個(gè)單元格的高度會(huì)一起變動(dòng)也不利于我們進(jìn)行布局。
網(wǎng)格布局：代碼優(yōu)美簡(jiǎn)潔，不過還是兼容性問題。但是未來是美好的！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53463.html
摘要：五種方法的優(yōu)缺點(diǎn)浮動(dòng)兼容性好，如果對(duì)兼容性有明確的要求使用浮動(dòng)應(yīng)該滿足需求，但是一定要處理好與周邊元素的關(guān)系，因?yàn)橐徊蛔⒁飧?dòng)就可能造成頁面布局混亂等問題，不過解決浮動(dòng)帶來的副作用方法也不少這里我們不做討論。 第一種方法 float *{ padding:0; margin:0; } .big div{ heig...
摘要：?jiǎn)栴}已知高度，寫出三欄布局，其中左右兩欄寬度各位，中間自適應(yīng)回答效果示例解決方案浮動(dòng)絕對(duì)定位彈性布局表格布局網(wǎng)格布局。方案二絕對(duì)定位將和的都設(shè)置脫離文檔流，給的設(shè)置左右兩邊距離即左右兩邊盒子的實(shí)際寬度。 問題： 已知高度，寫出三欄布局，其中左右兩欄寬度各位200px，中間自適應(yīng)showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...
摘要：前言在做頁面時(shí)，我們往往會(huì)碰到頁面布局相關(guān)的內(nèi)容，面試時(shí)也經(jīng)常會(huì)被問到，那么今天我就來總結(jié)一下關(guān)于頁面布局的內(nèi)容。問題如何實(shí)現(xiàn)三欄布局高度固定，左中右的結(jié)構(gòu)假設(shè)高度已知，請(qǐng)寫出三欄布局，其中左右寬度均為，中間自適應(yīng)。 前言 ??在做頁面時(shí)，我們往往會(huì)碰到頁面布局相關(guān)的內(nèi)容，面試時(shí)也經(jīng)常會(huì)被問到，那么今天我就來總結(jié)一下關(guān)于頁面布局的內(nèi)容。 問題：如何實(shí)現(xiàn)三欄布局（高度固定，左中右的結(jié)構(gòu)）...
閱讀 1136·2021-11-24 09:38
閱讀 3243·2021-11-19 09:56
閱讀 2965·2021-11-18 10:02
閱讀 735·2019-08-29 12:50
閱讀 2572·2019-08-28 18:30
閱讀 867·2019-08-28 18:10
閱讀 3675·2019-08-26 11:36
閱讀 2650·2019-08-23 18:23
