這篇文章將為大家詳細(xì)講解有關(guān)CSS中有哪些常見的布局，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站優(yōu)化、成都全網(wǎng)營銷、競價(jià)托管、品牌運(yùn)營等營銷獲客服務(wù)。創(chuàng)新互聯(lián)建站擁有網(wǎng)絡(luò)營銷運(yùn)營團(tuán)隊(duì)，以豐富的互聯(lián)網(wǎng)營銷經(jīng)驗(yàn)助力企業(yè)精準(zhǔn)獲客，真正落地解決中小企業(yè)營銷獲客難題，做到“讓獲客更簡單”。自創(chuàng)立至今，成功用技術(shù)實(shí)力解決了企業(yè)“網(wǎng)站建設(shè)、網(wǎng)絡(luò)品牌塑造、網(wǎng)絡(luò)營銷”三大難題，同時(shí)降低了營銷成本，提高了有效客戶轉(zhuǎn)化率，獲得了眾多企業(yè)客戶的高度認(rèn)可！

1、常見的單列布局：

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

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

2、如何實(shí)現(xiàn)

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

<pclass="header"></p>

<pclass="content"></p>

<pclass="footer"></p>

.header{

margin:0auto;

max-width:960px;

height:100px;

background-color:blue;

}

.content{

margin:0auto;

max-width:960px;

height:400px;

background-color:aquamarine;

}

.footer{

margin:0auto;

max-width:960px;

height:100px;

background-color:aqua;

}

對于第二種，header、footer的內(nèi)容寬度不設(shè)置，塊級元素充滿整個(gè)屏幕，但header、content和footer的內(nèi)容區(qū)設(shè)置同一個(gè)width，并通過margin:auto實(shí)現(xiàn)居中。

<pclass="header">

<pclass="nav"></p>

</p>

<pclass="content"></p>

<pclass="footer"></p>

.header{

margin:0auto;

max-width:960px;

height:100px;

background-color:blue;

}

.nav{

margin:0auto;

max-width:800px;

background-color:darkgray;

height:50px;

}

.content{

margin:0auto;

max-width:800px;

height:400px;

background-color:aquamarine;

}

.footer{

margin:0auto;

max-width:960px;

height:100px;

background-color:aqua;

}

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

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

1.float+overflow:hidden

如果是普通的兩列布局，浮動(dòng)+普通元素的margin便可以實(shí)現(xiàn)，但如果是自適應(yīng)的兩列布局，利用float+overflow:hidden便可以實(shí)現(xiàn)，這種辦法主要通過overflow觸發(fā)BFC,而BFC不會(huì)重疊浮動(dòng)元素。由于設(shè)置overflow:hidden并不會(huì)觸發(fā)IE6-瀏覽器的haslayout屬性，所以需要設(shè)置zoom:1來兼容IE6-瀏覽器。具體代碼如下：

<pclass="parent"style="background-color:lightgrey;">

<pclass="left"style="background-color:lightblue;">

<p>left</p>

</p>

<pclass="right"style="background-color:lightgreen;">

<p>right</p>

<p>right</p>

</p>

</p>

.parent{

overflow:hidden;

zoom:1;

}

.left{

float:left;

margin-right:20px;

}

.right{

overflow:hidden;

zoom:1;

}

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

2.Flex布局

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

//html部分同上

.parent{

display:flex;

}

.right{

margin-left:20px;

flex:1;

}

3.grid布局

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

//html部分同上

.parent{

display:grid;

grid-template-columns:auto1fr;

grid-gap:20px

}

三、三欄布局

特征：中間列自適應(yīng)寬度，旁邊兩側(cè)固定寬度，實(shí)現(xiàn)三欄布局有多種方式（可以猛戳實(shí)現(xiàn)三欄布局的幾種方法),本文著重介紹圣杯布局和雙飛翼布局。

1.圣杯布局

①特點(diǎn)

比較特殊的三欄布局，同樣也是兩邊固定寬度，中間自適應(yīng)，唯一區(qū)別是dom結(jié)構(gòu)必須是先寫中間列部分，這樣實(shí)現(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;

}

<articleclass="container">

<pclass="center">

<p>圣杯布局</p>

</p>

<pclass="left"></p>

<pclass="right"></p>

</article>

關(guān)于“CSS中有哪些常見的布局”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

當(dāng)前題目：CSS中有哪些常見的布局
網(wǎng)頁地址：http://chinadenli.net/article34/ihjhse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、云服務(wù)器、品牌網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)