擊右上方紅色按鈕關注“web秀”,讓你真正秀起來
布局是CSS中一個很重要的部分,也是最不好處理的一部分,其他諸如字體大小、顏色等等都是很容易的。總結一下使用過的CSS常用布局,包括水平居中、垂直居中、單列布局、多列布局等,以及flex布局,希望能給前端同學一些幫助。
CSS常用布局方式
這里就不做過多的說明了,前面有文章,詳細講過,沒有看的小伙伴請點擊:這15種CSS居中的方式,你都用過哪幾種?
主要有兩種:
第一種
<header style="background-color: red; width: 600px; margin: 0 auto;">頭部</header> <main style="background-color: green; width: 600px; margin: 0 auto;">內容</main> <footer style="background-color: yellow; width: 600px; margin: 0 auto;">尾部</footer>
CSS常用布局方式
第二種
<header style="background-color: red;">頭部</header> <main style="background-color: green; width: 600px; margin: 0 auto;">內容</main> <footer style="background-color: yellow;">尾部</footer>
CSS常用布局方式
float + margin
用float將邊欄與主要內容拉到一行,然后設置主要內容的margin。
<main style="background-color: red;"> <aside style="background-color: yellow; float: left; width: 50px;">邊欄</aside> <section style="background-color: green; margin-left: 50px;">主要內容</section> </main>
CSS常用布局方式
position: absolute + margin
左邊欄
<main style="background-color: red; position: relative;"> <aside style="background-color: yellow; position: absolute; left: 0; width: 50px;">邊欄</aside> <section style="background-color: green; margin-left: 50px;">主要內容</section> </main>
CSS常用布局方式
右邊欄
<main style="background-color: red; position: relative;"> <aside style="background-color: yellow; position: absolute; right: 0; width: 50px;">邊欄</aside> <section style="background-color: green; margin-right: 50px;">主要內容</section> </main>
CSS常用布局方式
比較經典有圣杯布局,以及據說是淘寶UED(玉伯)提出的雙飛翼布局。
圣杯布局
CSS常用布局方式
CSS常用布局方式
雙飛翼布局
CSS常用布局方式
CSS常用布局方式
CSS常用布局方式
flex布局目前已經很常用了,瀏覽器支持得也很好
CSS常用布局方式
后續提供文章,詳細說明。
喜歡小編的點擊關注,了解更多知識!
源碼地址:請點擊下方“了解更多”。
頁布局對改善網站的外觀非常重要。
請慎重設計您的網頁布局。
在線實例
使用 <div> 元素的網頁布局
如何使用 <div> 元素添加布局。
使用 <table> 元素的網頁布局
如何使用 <table> 元素添加布局。
網站布局
大多數網站會把內容安排到多個列中(就像雜志或報紙那樣)。
大多數網站可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位,或者為頁面創建背景以及色彩豐富的外觀。
雖然我們可以使用HTML table標簽來設計出漂亮的布局,但是table標簽是不建議作為布局工具使用的 - 表格不是布局工具。 |
HTML 布局 - 使用<div> 元素
div 元素是用于分組 HTML 元素的塊級元素。
下面的例子使用五個 div 元素來創建多列布局:
實例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的網頁標題</h1></div><divid="menu"style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</div><divid="content"style="background-color:#EEEEEE;height:200px;width:400px;float:left;">內容在這里</div><divid="footer"style="background-color:#FFA500;clear:both;text-align:center;">版權 ? runoob.com</div></div></body></html>
上面的 HTML 代碼會產生如下結果:
HTML 布局 - 使用表格
使用 HTML <table> 標簽是創建布局的一種簡單的方式。
大多數站點可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位,或者為頁面創建背景以及色彩豐富的外觀。
即使可以使用 HTML 表格來創建漂亮的布局,但設計表格的目的是呈現表格化數據 - 表格不是布局工具! |
下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來橫跨兩列:
實例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的網頁標題</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">內容在這里</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">版權 ? runoob.com</td></tr></table></body></html>
上面的 HTML 代碼會產生以下結果:
HTML 布局 - 有用的提示
Tip: 使用 CSS 最大的好處是,如果把 CSS 代碼存放到外部樣式表中,那么站點會更易于維護。通過編輯單一的文件,就可以改變所有頁面的布局。如需學習更多有關 CSS 的知識,請訪問我們的CSS 教程。
Tip: 由于創建高級的布局非常耗時,使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板(您可以使用這些預先構建好的網站布局,并優化它們)。
HTML 布局標簽
標簽 | 描述 |
---|---|
<div> | 定義文檔區塊,塊級(block-level) |
<span> | 定義 span,用來組合文檔中的行內元素。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
文概要
本文將介紹如下幾種常見的布局:
一、單列布局
常見的單列布局有兩種:
1.如何實現
對于第一種,先通過對 header,content,footer 統一設置 width:1000px;或者 max-width:1000px(這兩者的區別是當屏幕小于 1000px 時,前者會出現滾動條,后者則不會,顯示出實際寬度);然后設置 margin:auto 實現居中即可得到。
<div class="header"></div> <div class="content"></div> <div class="footer"></div> .header{ margin:0 auto; max-width: 960px; height:100px; background-color: blue; } .content{ margin: 0 auto; max-width: 960px; height: 400px; background-color: aquamarine; } .footer{ margin: 0 auto; max-width: 960px; height: 100px; background-color: aqua; }
對于第二種,header、footer 的內容寬度不設置,塊級元素充滿整個屏幕,但 header、content 和 footer 的內容區設置同一個 width,并通過 margin:auto 實現居中。
<div class="header"> <div class="nav"></div> </div> <div class="content"></div> <div class="footer"></div> .header{ margin:0 auto; max-width: 960px; height:100px; background-color: blue; } .nav{ margin: 0 auto; max-width: 800px; background-color: darkgray; height: 50px; } .content{ margin: 0 auto; max-width: 800px; height: 400px; background-color: aquamarine; } .footer{ margin: 0 auto; max-width: 960px; height: 100px; background-color: aqua; }
二、兩列自適應布局
兩列自適應布局是指一列由內容撐開,另一列撐滿剩余寬度的布局方式
1.float+overflow:hidden
如果是普通的兩列布局, 浮動+普通元素的 margin 便可以實現,但如果是自適應的兩列布局,利用 float+overflow:hidden 便可以實現,這種辦法主要通過 overflow 觸發 BFC,而 BFC 不會重疊浮動元素。由于設置 overflow:hidden 并不會觸發 IE6-瀏覽器的 haslayout 屬性,所以需要設置 zoom:1 來兼容 IE6-瀏覽器。具體代碼如下:
<div class="parent" style="background-color: lightgrey;"> <div class="left" style="background-color: lightblue;"> <p>left</p> </div> <div class="right" style="background-color: lightgreen;"> <p>right</p> <p>right</p> </div> </div> .parent { overflow: hidden; zoom: 1; } .left { float: left; margin-right: 20px; } .right { overflow: hidden; zoom: 1; }
注意點:如果側邊欄在右邊時,注意渲染順序。即在 HTML 中,先寫側邊欄后寫主內容
2.Flexbox 布局
Flexbox 布局,也叫彈性盒子布局,區區簡單幾行代碼就可以實現各種頁面的的布局。
//html部分同上 .parent { display:flex; } .right { margin-left:20px; flex:1; }
3.Grid 布局
Grid 布局,是一個基于網格的二維布局系統,目的是用來優化用戶界面設計。
//html部分同上 .parent { display:grid; grid-template-columns:auto 1fr; grid-gap:20px }
三、三欄布局
特征:中間列自適應寬度,旁邊兩側固定寬度 ,實現三欄布局有多種方式:
1.浮動布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layout</title> <style media="screen"> html * { padding: 0; margin: 0; } .layout article div { min-height: 150px; } </style> </head> <body> <!--浮動布局 --> <section class="layout float"> <style media="screen"> .layout.float . left { float: left; width: 300px; background: red; } .layout.float .center { background: yellow; } .layout.float . right { float: right; width: 300px; background: blue; } </style> <h1>三欄布局</h1> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> // 右欄部分要寫在中間內容之前 <div class="center"> <h2>浮動解決方案</h2> 1.這是三欄布局的浮動解決方案; 2.這是三欄布局的浮動解決方案; 3.這是三欄布局的浮動解決方案; 4.這是三欄布局的浮動解決方案; 5.這是三欄布局的浮動解決方案; 6.這是三欄布局的浮動解決方案; </div> </article> </section> </body> </html>
這種布局方式,dom 結構必須是先寫浮動部分,然后再中間塊,否則右浮動塊會掉到下一行。浮動布局的優點就是比較簡單,兼容性也比較好。但浮動布局是有局限性的,浮動元素脫離文檔流,要做清除浮動,這個處理不好的話,會帶來很多問題,比如父容器高度塌陷等 。
2.絕對定位布局
<!--絕對布局 --> <section class="layout absolute"> <style> .layout.absolute . left-center- right>div{ position: absolute;//三塊都是絕對定位 } .layout.absolute . left { left:0; width: 300px; background: red; } .layout.absolute .center { right: 300px; left: 300px;//離左右各三百 background: yellow; } .layout.absolute . right { right: 0; width: 300px; background: blue; } </style> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>絕對定位解決方案</h2> 1.這是三欄布局的浮動解決方案; 2.這是三欄布局的浮動解決方案; 3.這是三欄布局的浮動解決方案; 4.這是三欄布局的浮動解決方案; 5.這是三欄布局的浮動解決方案; 6.這是三欄布局的浮動解決方案; </div> <div class="right"></div> </article> </section>
絕對定位布局優點就是快捷,設置很方便,而且也不容易出問題。缺點就是,容器脫離了文檔流,后代元素也脫離了文檔流,高度未知的時候,會有問題,這就導致了這種方法的有效性和可使用性是比較差的。
3.flexbox 布局
<!--flexbox布局--> <section class="layout flexbox"> <style> .layout.flexbox .left-center- right{ display: flex; } .layout.flexbox .left { width: 300px; background: red; } .layout.flexbox .center { background: yellow; flex: 1; } .layout.flexbox .right { width: 300px; background: blue; } </style> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>flexbox解決方案</h2> 1.這是三欄布局的浮動解決方案; 2.這是三欄布局的浮動解決方案; 3.這是三欄布局的浮動解決方案; 4.這是三欄布局的浮動解決方案; 5.這是三欄布局的浮動解決方案; 6.這是三欄布局的浮動解決方案; </div> <div class="right"></div> </article> </section>
flexbox 布局是 css3 里新出的一個,它就是為了解決上述兩種方式的不足出現的,是比較完美的一個。目前移動端的布局也都是用 flexbox。 flexbox 的缺點就是 IE10 開始支持,但是 IE10 的是-ms 形式的。
4.表格布局
<!--表格布局--> <section class="layout table"> <style> .layout.table . left-center- right { display: table; height: 150px; width: 100%; } .layout.table . left-center- right>div { display: table-cell; } .layout.table . left { width: 300px; background: red; } .layout.table .center { background: yellow; } .layout.table . right { width: 300px; background: blue; } </style> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>表格布局解決方案</h2> 1.這是三欄布局的浮動解決方案; 2.這是三欄布局的浮動解決方案; 3.這是三欄布局的浮動解決方案; 4.這是三欄布局的浮動解決方案; 5.這是三欄布局的浮動解決方案; 6.這是三欄布局的浮動解決方案; </div> <div class="right"></div> </article> </section>
表格布局的兼容性很好,在 flex 布局不兼容的時候,可以嘗試表格布局。當內容溢出時會自動撐開父元素 。
表格布局也是有缺陷:① 無法設置欄邊距;② 對 seo 不友好;③ 當其中一個單元格高度超出的時候,兩側的單元格也是會跟著一起變高的,然而有時候這并不是我們想要的效果。
5.網格布局
<!--網格布局--> <section class="layout grid"> <style> .layout.grid .left-center- right { display: grid; width: 100%; grid-template-columns: 300px auto 300px; grid-template-rows: 150px;//行高 } .layout.grid .left { background: red; } .layout.grid .center { background: yellow; } .layout.grid .right { background: blue; } </style> <h1>三欄布局</h1> <article class="left-center-right"> <div class="left"></div> <div class="center"> <h2>網格布局解決方案</h2> 1.這是三欄布局的浮動解決方案; 2.這是三欄布局的浮動解決方案; 3.這是三欄布局的浮動解決方案; 4.這是三欄布局的浮動解決方案; 5.這是三欄布局的浮動解決方案; 6.這是三欄布局的浮動解決方案; </div> <div class="right"></div> </article> </section>
CSS Grid 是創建網格布局最強大和最簡單的工具。就像表格一樣,網格布局可以讓 Web 設計師根據元素按列或行對齊排列,但他和表格不同,網格布局沒有內容結構,從而使各種布局不可能與表格一樣。例如,一個網格布局中的子元素都可以定位自己的位置,這樣他們可以重疊和類似元素定位 。
但網格布局的兼容性不好。IE10+上支持,而且也僅支持部分屬性 。
6.圣杯布局
① 特點
比較特殊的三欄布局,同樣也是兩邊固定寬度,中間自適應,唯一區別是 dom 結構必須是先寫中間列部分,這樣實現中間列可以優先加載 。
.container { padding-left: 220px;//為左右欄騰出空間 padding-right: 220px; } .left { float: left; width: 200px; height: 400px; background: red; margin-left: -100%; position: relative; left: -220px; } .center { float: left; width: 100%; height: 500px; background: yellow; } .right { float: left; width: 200px; height: 400px; background: blue; margin-left: -200px; position: relative; right: -220px; } <article class="container"> <div class="center"> <h2>圣杯布局</h2> </div> <div class="left"></div> <div class="right"></div> </article>
② 實現步驟
③ 缺點
7.雙飛翼布局
① 特點
同樣也是三欄布局,在圣杯布局基礎上進一步優化,解決了圣杯布局錯亂問題,實現了內容與布局的分離。而且任何一欄都可以是最高欄,不會出問題 。
.container { min-width: 600px;//確保中間內容可以顯示出來,兩倍 left寬+ right寬 } .left { float: left; width: 200px; height: 400px; background: red; margin-left: -100%; } .center { float: left; width: 100%; height: 500px; background: yellow; } .center .inner { margin: 0 200px; //新增部分 } .right { float: left; width: 200px; height: 400px; background: blue; margin-left: -200px; } <article class="container"> <div class="center"> <div class="inner">雙飛翼布局</div> </div> <div class="left"></div> <div class="right"></div> </article>
② 實現步驟(前兩步與圣杯布局一樣)
③ 缺點
多加一層 dom 樹節點,增加渲染樹生成的計算量 。
④ 圣杯布局和雙飛翼布局實現方式對比:
四、等高列布局
等高布局是指子元素在父元素中高度相等的布局方式。等高布局的實現包括偽等高和真等高,偽等高只是看上去等高而已,真等高是實實在在的等高。
1.利用背景圖片
這種方法是我們實現等高列最早使用的一種方法,就是使用背景圖片,在列的父元素上使用這個背景圖進行Y軸的鋪放,從而實現一種等高列的假象。實現方法簡單,兼容性強,不需要太多的css樣式就可以輕松實現,但此方法不適合流體布局等高列的布局。
在制作樣式之前需要一張類似下面的背景圖:
<div class=”container clearfix”> <div class=”left”></div> <div class=”content”></div> <div class=”right”></div> </div> .container { background: url("column.png") repeat-y; width: 960px; margin: 0 auto; } .left { float: left; width: 220px; } .content { float: left; width: 480px; } .right { float: left; width: 220px; }
2.利用正padding+負margin
我們通過等布局便可解決圣杯布局的第二點缺點,因為背景是在 padding 區域顯示的, 設置一個大數值的 padding-bottom,再設置相同數值的負的 margin-bottom,并在所有列外面加上一個容器,并設置 overflow:hidden 把溢出背景切掉 。這種可能實現多列等高布局,并且也能實現列與列之間分隔線效果,結構簡單,兼容所有瀏覽器。新增代碼如下:
.center, .left, .right { padding-bottom: 10000px; margin-bottom: -10000px; } .container { padding-left: 220px; padding-right: 220px; overflow: hidden;//把溢出背景切掉 }
3.模仿表格布局
這是一種非常簡單,易于實現的方法。不過兼容性不好,在ie6-7無法正常運行。
<div class="container table"> <div class="containerInner tableRow"> <div class="column tableCell cell1"> <div class="left aside"> .... </div> </div> <div class="column tableCell cell2"> <div class="content section"> ... </div> </div> <div class="column tableCell cell3"> <div class="right aside"> ... </div> </div> </div> </div> .table { width: auto; min-width: 1000px; margin: 0 auto; padding: 0; display: table; } .tableRow { display: table-row; } .tableCell { display: table-cell; width: 33%; } .cell1 { background: #f00; height: 800px; } .cell2 { background: #0f0; } .cell3 { background: #00f; }
4.使用邊框和定位
這種方法是使用邊框和絕對定位來實現一個假的高度相等列的效果。結構簡單,兼容各瀏覽器,容易掌握。假設你需要實現一個兩列等高布局,側欄高度要和主內容高度相等。
#wrapper { width: 960px; margin: 0 auto; } #mainContent { border-right: 220px solid #dfdfdf; position: absolute; width: 740px; height: 800px; background: green; } #sidebar { background: #dfdfdf; margin-left: 740px; position: absolute; height: 800px; width: 220px; } <div id="wrapper"> <div id="mainContent">...</div> <div id="sidebar">...</div> </div>
五、粘連布局
1.特點
具體代碼如下:
main
main
main
footer
* { margin: 0; padding: 0; } html, body { height: 100%;//高度一層層繼承下來 } #wrap { min-height: 100%; background: pink; text-align: center; overflow: hidden; } #wrap .main { padding-bottom: 50px; } #footer { height: 50px; line-height: 50px; background: deeppink; text-align: center; margin-top: -50px; }
2.實現步驟
(1)footer 必須是一個獨立的結構,與 wrap 沒有任何嵌套關系
(2)wrap 區域的高度通過設置 min-height,變為視口高度
(3)footer 要使用 margin 為負來確定自己的位置
(4)在 main 區域需要設置 padding-bottom。這也是為了防止負 margin 導致 footer 覆蓋任何實際內容。
參考文章
*請認真填寫需求信息,我們會在24小時內與您取得聯系。