資訊專欄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下是不支持的！（IE呀！）
表格布局：表格布局雖然沒有什么大的問題，但是在我們要細(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://m.specialneedsforspecialkids.com/yun/117097.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)）...
閱讀 1415·2023-04-26 01:58
閱讀 2294·2021-11-04 16:04
閱讀 1783·2021-08-31 09:42
閱讀 1773·2021-07-25 21:37
閱讀 1074·2019-08-30 15:54
閱讀 2079·2019-08-30 15:53
閱讀 3057·2019-08-29 13:28
閱讀 2696·2019-08-29 10:56
