當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

一文详解CSS常见的五大布局

發(fā)布時間：2023/12/10 CSS 37 豆豆

生活随笔收集整理的這篇文章主要介紹了一文详解CSS常见的五大布局小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、單列布局

常見的單列布局有兩種：

header,content 和 footer 等寬的單列布局
header 與 footer 等寬,content 略窄的單列布局

1.如何實現(xiàn)

對于第一種，先通過對 header,content,footer 統(tǒng)一設(shè)置 width：1000px;或者 max-width：1000px(這兩者的區(qū)別是當屏幕小于 1000px 時，前者會出現(xiàn)滾動條，后者則不會，顯示出實際寬度);然后設(shè)置 margin:auto 實現(xiàn)居中即可得到。

<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 的內(nèi)容寬度不設(shè)置，塊級元素充滿整個屏幕，但 header、content 和 footer 的內(nèi)容區(qū)設(shè)置同一個 width，并通過 margin:auto 實現(xiàn)居中。

<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;
}

二、兩列自適應(yīng)布局

兩列自適應(yīng)布局是指一列由內(nèi)容撐開，另一列撐滿剩余寬度的布局方式

1.float+overflow:hidden

如果是普通的兩列布局，?浮動+普通元素的 margin?便可以實現(xiàn)，但如果是自適應(yīng)的兩列布局，利用?float+overflow:hidden?便可以實現(xiàn)，這種辦法主要通過 overflow 觸發(fā) BFC,而 BFC 不會重疊浮動元素。由于設(shè)置 overflow:hidden 并不會觸發(fā) IE6-瀏覽器的 haslayout 屬性，所以需要設(shè)置 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;
}

注意點:如果側(cè)邊欄在右邊時，注意渲染順序。即在 HTML 中，先寫側(cè)邊欄后寫主內(nèi)容

2.Flexbox 布局

Flexbox 布局，也叫彈性盒子布局，區(qū)區(qū)簡單幾行代碼就可以實現(xiàn)各種頁面的的布局。

//html部分同上
.parent {
display:flex;
}
.right {
margin-left:20px;
flex:1;
}

3.Grid 布局

Grid 布局，是一個基于網(wǎng)格的二維布局系統(tǒng)，目的是用來優(yōu)化用戶界面設(shè)計。

//html部分同上
.parent {
display:grid;
grid-template-columns:auto 1fr;
grid-gap:20px
}

三、三欄布局

特征：中間列自適應(yīng)寬度，旁邊兩側(cè)固定寬度?，實現(xiàn)三欄布局有多種方式：

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> // 右欄部分要寫在中間內(nèi)容之前
<div class="center">
<h2>浮動解決方案</h2>
1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案；
</div>
</article>
</section>
</body>
</html>

這種布局方式，dom 結(jié)構(gòu)必須是先寫浮動部分，然后再中間塊，否則右浮動塊會掉到下一行。浮動布局的優(yōu)點就是比較簡單，兼容性也比較好。但浮動布局是有局限性的，浮動元素脫離文檔流，要做清除浮動，這個處理不好的話，會帶來很多問題，比如父容器高度塌陷等。

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>

絕對定位布局優(yōu)點就是快捷，設(shè)置很方便，而且也不容易出問題。缺點就是，容器脫離了文檔流，后代元素也脫離了文檔流，高度未知的時候，會有問題，這就導致了這種方法的有效性和可使用性是比較差的。

3.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 里新出的一個，它就是為了解決上述兩種方式的不足出現(xiàn)的，是比較完美的一個。目前移動端的布局也都是用 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 布局不兼容的時候，可以嘗試表格布局。當內(nèi)容溢出時會自動撐開父元素。

表格布局也是有缺陷:① 無法設(shè)置欄邊距；② 對 seo 不友好；③ 當其中一個單元格高度超出的時候，兩側(cè)的單元格也是會跟著一起變高的，然而有時候這并不是我們想要的效果。

5.網(wǎng)格布局

<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>網(wǎng)格布局解決方案</h2>
1.這是三欄布局的浮動解決方案； 2.這是三欄布局的浮動解決方案； 3.這是三欄布局的浮動解決方案； 4.這是三欄布局的浮動解決方案； 5.這是三欄布局的浮動解決方案； 6.這是三欄布局的浮動解決方案；
</div>
<div class="right"></div>
</article>
</section>

CSS Grid 是創(chuàng)建網(wǎng)格布局最強大和最簡單的工具。就像表格一樣，網(wǎng)格布局可以讓 Web 設(shè)計師根據(jù)元素按列或行對齊排列，但他和表格不同，網(wǎng)格布局沒有內(nèi)容結(jié)構(gòu)，從而使各種布局不可能與表格一樣。例如，一個網(wǎng)格布局中的子元素都可以定位自己的位置，這樣他們可以重疊和類似元素定位。

但網(wǎng)格布局的兼容性不好。IE10+上支持，而且也僅支持部分屬性。

6.圣杯布局

① 特點

比較特殊的三欄布局，同樣也是兩邊固定寬度，中間自適應(yīng)，唯一區(qū)別是 dom 結(jié)構(gòu)必須是先寫中間列部分，這樣實現(xiàn)中間列可以優(yōu)先加載。

.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>

② 實現(xiàn)步驟

三個部分都設(shè)定為左浮動，?否則左右兩邊內(nèi)容上不去，就不可能與中間列同一行?。然后設(shè)置 center 的寬度為 100%(?實現(xiàn)中間列內(nèi)容自適應(yīng)?)，此時，left 和 right 部分會跳到下一行

通過設(shè)置 margin-left 為負值讓 left 和 right 部分回到與 center 部分同一行

通過設(shè)置父容器的 padding-left 和 padding-right，讓左右兩邊留出間隙。

通過設(shè)置相對定位，讓 left 和 right 部分移動到兩邊。

③ 缺點

center 部分的最小寬度不能小于 left 部分的寬度，否則會 left 部分掉到下一行
如果其中一列內(nèi)容高度拉長(如下圖)，其他兩列的背景并不會自動填充。(借助等高布局正padding+負margin可解決，下文會介紹)

7.雙飛翼布局

① 特點

同樣也是三欄布局，在圣杯布局基礎(chǔ)上進一步優(yōu)化，解決了圣杯布局錯亂問題，實現(xiàn)了內(nèi)容與布局的分離。而且任何一欄都可以是最高欄，不會出問題。

.container {
min-width: 600px;//確保中間內(nèi)容可以顯示出來，兩倍 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>

② 實現(xiàn)步驟(前兩步與圣杯布局一樣)

三個部分都設(shè)定為左浮動，然后設(shè)置 center 的寬度為 100%，此時，left 和 right 部分會跳到下一行；
通過設(shè)置 margin-left 為負值讓 left 和 right 部分回到與 center 部分同一行；
center 部分增加一個內(nèi)層 div，并設(shè) margin: 0 200px；

③ 缺點

多加一層 dom 樹節(jié)點，增加渲染樹生成的計算量?。

④ 圣杯布局和雙飛翼布局實現(xiàn)方式對比:

兩種布局方式都是把主列放在文檔流最前面，使主列優(yōu)先加載。
兩種布局方式在實現(xiàn)上也有相同之處，都是讓三列浮動，然后通過負外邊距形成三列布局。
兩種布局方式的不同之處在于如何處理中間主列的位置：?圣杯布局是利用父容器的左、右內(nèi)邊距+兩個從列相對定位?; 雙飛翼布局是把主列嵌套在一個新的父級塊中利用主列的左、右外邊距進行布局調(diào)整

四、等高列布局

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的實現(xiàn)包括偽等高和真等高,偽等高只是看上去等高而已,真等高是實實在在的等高。

1.利用背景圖片

這種方法是我們實現(xiàn)等高列最早使用的一種方法，就是使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現(xiàn)一種等高列的假象。實現(xiàn)方法簡單，兼容性強，不需要太多的css樣式就可以輕松實現(xiàn),但此方法不適合流體布局等高列的布局。

在制作樣式之前需要一張類似下面的背景圖：

<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 區(qū)域顯示的，設(shè)置一個大數(shù)值的 padding-bottom，再設(shè)置相同數(shù)值的負的 margin-bottom，并在所有列外面加上一個容器，并設(shè)置 overflow:hidden 把溢出背景切掉。這種可能實現(xiàn)多列等高布局，并且也能實現(xiàn)列與列之間分隔線效果，結(jié)構(gòu)簡單，兼容所有瀏覽器。新增代碼如下：

.center,
.left,
.right {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.container {
padding-left: 220px;
padding-right: 220px;
overflow: hidden;//把溢出背景切掉
}

3.模仿表格布局

這是一種非常簡單，易于實現(xiàn)的方法。不過兼容性不好，在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.使用邊框和定位

這種方法是使用邊框和絕對定位來實現(xiàn)一個假的高度相等列的效果。結(jié)構(gòu)簡單，兼容各瀏覽器，容易掌握。假設(shè)你需要實現(xiàn)一個兩列等高布局，側(cè)欄高度要和主內(nèi)容高度相等。

#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.特點

有一塊內(nèi)容 <main> ，當 <main> 的高康足夠長的時候，緊跟在 <main> 后面的元素 <footer> 會跟在 <main> 元素的后面。
當 <main> 元素比較短的時候(比如小于屏幕的高度),我們期望這個 <footer> 元素能夠“粘連”在屏幕的底部

具體代碼如下：

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.實現(xiàn)步驟

(1)footer 必須是一個獨立的結(jié)構(gòu)，與 wrap 沒有任何嵌套關(guān)系

(2)wrap 區(qū)域的高度通過設(shè)置 min-height，變?yōu)橐暱诟叨?/span>

(3)footer 要使用 margin 為負來確定自己的位置

(4)在 main 區(qū)域需要設(shè)置 padding-bottom。這也是為了防止負 margin 導致 footer 覆蓋任何實際內(nèi)容。

總結(jié)

以上是生活随笔為你收集整理的一文详解CSS常见的五大布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：关于用display：table让元素居
下一篇： CSS 基本样式