摘要:代碼實例等分布局公式轉化因此,我們需要解決兩個問題如何讓總寬度增加即如何讓每個寬包含即使用原理用法原理增大父框的實際寬度后,使用屬性進行布局的輔助。
前端布局非常重要的一環就是頁面框架的搭建,也是最基礎的一環。在頁面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我們就來總結總結前端干貨中的CSS布局。
居中布局 水平居中1)使用inline-block+text-align
(1)原理、用法
原理:先將子框由塊級元素改變為行內塊元素,再通過設置行內塊元素居中以達到水平居中。
用法:對子框設置display:inline-block,對父框設置text-align:center。
(2)代碼實例
left
right
right
.left { float:left; width:100px; margin-right:20px; } .right { overflow:hidden; }(3)優缺點
優點:簡單
缺點:不支持ie6
2)使用float+margin
(1)原理、用法原理:通過將左框脫離文本流,加上右框向右移動一定的距離,以達到視覺上的多列布局。
用法:先將左框設置為float:left、margin-left,再設置右框margin-left。
(2)代碼實例
left
right
right
.left { float:left; width:100px; } .right { margin-left:120px; }(3)優缺點
優點:簡單,易理解
缺點:兼容性存在一定問題,ie6下有3px的bug。right下的p清除浮動將產生bug
3)使用float+margin(改良版)
(1)原理、用法原理:在1)的基礎之上,通過向右框添加一個父框,再加上設置左、右父框屬性使之產生BFC以去除bug。
用法:先將左框設置為float:left、margin-left、position:relative,再設置右父框float:right、width:100%、margin-left,最后設置實際的右框margin-left。
(2)代碼實例
left
right
right
.left { float:left; width:100px; position:relative; } .right-fix { float:right; width:100%; margin-left:-100px; } .right { margin-left:120px; }(3)優缺點
優點:簡單,易理解
4)使用table
(1)原理、用法原理:通過將父框設置為表格,將左右邊框轉化為類似于同一行的td,從而達到多列布局。
用法:先將父框設置為display:table、width:100%、table-layout:fixed,再設置左右框display:table-cell,最后設置左框width、padding-right。
(2)代碼實例
left
right
right
.parent { display:table; width:100%; table-layout:fixed; } .left { width:100px; padding-right:20px; } .right,.left { display:table-cell; }5)使用flex
(1)原理、用法原理:通過設置CSS3布局利器flex中的flex屬性以達到多列布局。
用法:先將父框設置為display:flex,再設置左框flex:1,最后設置左框width、margin-right。
(2)代碼實例
left
right
right
.parent { display:flex; } .left { width:100px; margin-right:20px; } .right { flex:1; }(3)優缺點
優點:flex很強大
缺點:兼容性存在一定問題,性能存在一定問題
兩列定寬+一列自適應(1)原理、用法
原理:這種情況與兩列定寬查不多。
用法:先將左、中框設置為float:left、width、margin-right,再設置右框overflow:hidden。
(2)代碼實例
left
center
right
right
.left,.center { float:left; width:100px; margin-right:20px; } .right { overflow:hidden; }不定寬+自適應1)使用float+overflow
(1)原理、用法原理:這種情況與兩列定寬查不多。
用法:先將左框設置為float:left、margin-right,再設置右框overflow: hidden,最后設置左框中的內容width。
(2)代碼實例
left
right
right
.left{ float: left; margin-right: 20px; } .right{ overflow: hidden; } .left p{ width: 200px; }(3)優缺點
優點:簡單
缺點:ie6下兼容性存在一定問題
2)使用table
(1)原理、用法原理:通過將父框改變為表格,將左右框轉換為類似于同一行的td以達到多列布局,設置父框寬度100%,給左框子元素一個固定寬度從而達到自適應。
用法:先將父框設置為display: table、width: 100%,再設置左、右框display: table-cell,最后設置左框width: 0.1%、padding-right以及左框中的內容width。
(2)代碼實例
left
right
right
.parent{ display: table; width: 100%; } .left,.right{ display: table-cell; } .left{ width: 0.1%; padding-right: 20px; } .left p{ width:200px; }(3)優缺點
缺點:ie6 ie7不支持
3)使用flex
(1)原理、用法原理:通過設置CSS3布局利器flex中的flex屬性以達到多列布局,加上給左框中的內容定寬、給右框設置flex達到不定款+自適應。
用法:先將父框設置為display:flex,再設置右框flex:1,最后設置左框margin-right:20px、左框中的內容width。
(2)代碼實例
left
right
right
.parent { display:flex; } .left { margin-right:20px; } .right { flex:1; } .left p{ width: 200px; }(3)優缺點
優點:flex很強大
缺點:兼容性存在一定問題,性能存在一定問題
兩列不定寬+一列自適應(1)原理、用法
原理:這個情況與一列不定寬+一列自適應查不多。
用法:先將左、中框設置為float:left、margin-right,再設置右框overflow:hidden,最后給左中框中的內容設置width。
(2)代碼實例
left
center
right
right
.left,.center{ float: left; margin-right: 20px; } .right{ overflow: hidden; } .left p,.center p{ width: 100px; }等分布局公式轉化: l = w * n + g * (n-1) -> l = w * n + g * n - g -> l + g = (w + g) * n因此,我們需要解決兩個問題:
如何讓總寬度增加g(即:L+g)
如何讓每個寬包含g(即:w+g)
1)使用float
(1)原理、用法原理:增大父框的實際寬度后,使用CSS3屬性box-sizing進行布局的輔助。
用法:先將父框設置為margin-left: -*px,再設置子框float: left、width: 25%、padding-left、box-sizing: border-box。
(2)代碼實例
1
2
3
4
.parent{ margin-left: -20px;//l增加g } .column{ float: left; width: 25%; padding-left: 20px; box-sizing: border-box;//包含padding區域 w+g }(3)優缺點
優點:兼容性較好
缺點:ie6 ie7百分比兼容存在一定問題
2)使用table
(1)原理、用法原理:通過增加一個父框的修正框,增大其寬度,并將父框轉換為table,將子框轉換為tabel-cell進行布局。
用法:先將父框的修正框設置為margin-left: -*px,再設置父框display: table、width:100%、table-layout: fixed,設置子框display: table-cell、padding-left。
(2)代碼實例
1
2
3
4
.parent-fix{ margin-left: -20px;//l+g } .parent{ display: table; width:100%; table-layout: fixed; } .column{ display: table-cell; padding-left: 20px;//w+g }(3)優缺點
優點:結構和塊數無關聯
缺點:增加了一層
3)使用flex
(1)原理、用法原理:通過設置CSS3布局利器flex中的flex屬性以達到等分布局。
用法:將父框設置為display: flex,再設置子框flex: 1,最后設置子框與子框的間距margin-left。
(2)代碼實例
1
2
3
4
.parent{ display: flex; } .column{ flex: 1; } .column+.column{ margin-left:20px; }(3)優缺點
優點:代碼量少,與塊數無關
缺點:兼容性存在一定問題
定寬+自適應+兩塊高度一樣高1)使用float
(1)原理、用法原理:通過過分加大左右子框的高度,輔助超出隱藏,以達到視覺上的等高。
用法:將父框設置overflow: hidden,再設置左右子框padding-bottom: 9999px、margin-bottom: -9999px,最后設置左框float: left、width、margin-right,右框overflow: hidden。
(2)代碼實例
left
right
right
p{ background: none!important; } .left,.right{ background: #444; } .parent{ overflow: hidden; } .left,.right{ padding-bottom: 9999px; margin-bottom: -9999px; } .left{ float: left; width: 100px; margin-right: 20px; } .right{ overflow: hidden; }(3)優缺點
優點:兼容性好
缺點:偽等高,不是真正意義上的等高
2)使用table
(1)原理、用法原理:將父框轉化為tabel,將子框轉化為tabel-cell布局,以達到定寬+自適應+兩塊高度一樣高。
用法:先將父框設置為display:table、width:100%、table-layout:fixed,再設置左右框為display:table-cell,最后設置左框width、padding-right。
(2)代碼實例
left
right
right
.parent { display:table; width:100%; table-layout:fixed; } .left { width:100px; padding-right:20px; } .right,.left { display:table-cell; }3)使用flex
(1)原理、用法原理:通過設置CSS3布局利器flex中的flex屬性以達到定寬+自適應+兩塊高度一樣高。
用法:將父框設置為display: flex,再設置左框width、margin-right,最后設置右框flex:1。
(2)代碼實例
left
right
right
.parent { display:flex; } .left { width:100px; margin-right:20px; } .right { flex:1; }(3)優缺點
優點:代碼少,flex很強大
缺點:兼容性存在一定問題
4)使用display
(1)原理、用法原理:通過設置display中的CSS3的-webkit-box屬性以達到定寬+自適應+兩塊高度一樣高。
用法:將父框設置為display: -webkit-box、width: 100%,再設置左框width、margin-right,最后設置右框-webkit-box-flex: 1。
(2)代碼實例
leftright.parent { width: 100%; display: -webkit-box; } .left { width:100px; margin-right: 20px; } .right { -webkit-box-flex: 1; }(3)優缺點
缺點:兼容性存在較大的問題
全屏布局 全屏布局的特點滾動條不是全局滾動條,而是出現在內容區域里,往往是主內容區域
瀏覽器變大時,撐滿窗口
全屏布局的方法1)使用position
(1)原理、用法原理:將上下部分固定,中間部分使用定寬+自適應+兩塊高度一樣高。
用法:見實例。
(2)代碼實例
topleftrightbottomhtml,body,.parent{ margin:0; height:100%; overflow:hidden; } body{ color:white; } .top{ position:absolute; top:0; left:0; right:0; height:100px; background:blue; } .left{ position:absolute; left:0; top:100px; bottom:50px; width:200px; background:red; } .right{ position:absolute; left:200px; top:100px; bottom:50px; right:0; background:pink; overflow: auto; } .right .inner{ min-height: 1000px; } .bottom{ position:absolute; left:0; right:0; bottom:0; height:50px; background: black; }(3)優缺點
優點:兼容性好,ie6下不支持
2)使用flex
(1)原理、用法原理:通過靈活使用CSS3布局利器flex中的flex屬性和flex-direction屬性以達到全屏布局。
用法:見實例。
(2)代碼實例
topleftrightbottomhtml,body,.parent{ margin:0; height:100%; overflow:hidden; } body{ color: white; } .parent{ display: flex; flex-direction: column; } .top{ height:100px; background: blue; } .bottom{ height:50px; background: black; } .middle{ flex:1; display:flex; } .left{ width:200px; background: red; } .right{ flex: 1; overflow: auto; background:pink; } .right .inner{ min-height: 1000px; }(3)優缺點
缺點:兼容性差,ie9及ie9以下不兼容
1)使用flex
(1)原理、用法原理:通過靈活使用CSS3布局利器flex中的flex屬性和flex-direction屬性以達到全屏布局。
用法:見實例。
(2)代碼實例
topleftrightbottomhtml,body,.parent{ margin:0; height:100%; overflow:hidden; } body{ color:white; } .parent{ display:flex; flex-direction:column; } .top{ background:blue; } .bottom{ background:black; } .middle{ flex:1; display:flex; } .left{ background: red; } .right{ flex:1; overflow:auto; background: pink; } .right .inner{ min-height:1000px; }全屏布局相關方案的兼容性、性能和自適應一覽表
方案 兼容性 性能 是否自適應 Position 好 好 部分自適應 Flex 較差 差 可自適應 Grid 差 較好 可自適應 當然,最最最最最后,如果您喜歡這片文章,可以瘋狂點贊和收藏喔!!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115761.html
相關文章
如何居中一個元素(終結版)
摘要:源代碼演示利用將要水平排列的塊狀元素設為,然后在父級元素上設置,達到與上面的行內元素的水平居中一樣的效果。 前言 本文主要介紹水平居中,垂直居中,還有水平垂直居中各種辦法,思維導圖如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖,請猛戳Github個人博客 一、水平居中 1.行內元素水平居...
如何居中一個元素(終結版)
摘要:源代碼演示利用將要水平排列的塊狀元素設為,然后在父級元素上設置,達到與上面的行內元素的水平居中一樣的效果。 前言 本文主要介紹水平居中,垂直居中,還有水平垂直居中各種辦法,思維導圖如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖,請猛戳Github個人博客 一、水平居中 1.行內元素水平居...
如何居中一個元素(終結版)
摘要:源代碼演示利用將要水平排列的塊狀元素設為,然后在父級元素上設置,達到與上面的行內元素的水平居中一樣的效果。 前言 本文主要介紹水平居中,垂直居中,還有水平垂直居中各種辦法,思維導圖如下: showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導圖,請猛戳Github個人博客 一、水平居中 1.行內元素水平居...
發表評論
0條評論
BlackMass
男|高級講師
TA的文章
閱讀更多
tensorflow測試代碼
閱讀 3514·2023-04-25 17:35
Linux是什么系統?為什么要學習Linux?
閱讀 2587·2021-11-24 09:39
親測使用分區助手軟件可視化電腦磁盤分區和擴容合并
閱讀 2525·2021-10-18 13:32
程序員的算法趣題Q49: 欲速則不達
閱讀 3409·2021-10-11 10:58
《Python技能樹》Python簡介
閱讀 1630·2021-09-26 09:55
怎么擺脫主機的控制-怎樣擺脫電腦主機控制?
閱讀 6134·2021-09-22 15:47
TmhHost:日本/香港/美國CN2 GIA/高防云服務器8折三個月79.2元起
閱讀 959·2021-08-26 14:15
面試官常問——vue篇
閱讀 3466·2019-08-30 15:55
閱讀需要支付1元查看