CSS中有哪些常見的布局

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

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

1、常見的單列布局：

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

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

2、如何實現(xiàn)

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

<pclass="header">

<pclass="content">

<pclass="footer">

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

<pclass="header">

<pclass="nav">

<pclass="content">

<pclass="footer">

.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

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

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

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

left

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

right

.parent{

overflow:hidden;

zoom:1;

}

.left{

float:left;

margin-right:20px;

}

.right{

overflow:hidden;

zoom:1;

}

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

2.Flex布局

Flex布局，也叫彈性盒子布局，區(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:auto1fr;

grid-gap:20px

}

三、三欄布局

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

1.圣杯布局

①特點

比較特殊的三欄布局，同樣也是兩邊固定寬度，中間自適應(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;

}

<articleclass="container">

<pclass="center">

圣杯布局

<pclass="left">

<pclass="right">

</article>

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

當(dāng)前題目：CSS中有哪些常見的布局
網(wǎng)頁地址：http://muchs.cn/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)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容