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

目前創(chuàng)新互聯(lián)已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、敘永網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

css布局方式：1、單列布局，包括header、content、footer等寬的單列布局和header、footer占滿屏幕寬度，content略窄的單列布局；2、兩列自適應(yīng)布局；3、三欄布局，包括圣杯布局、雙飛翼布局。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

一、單列布局

常見(jiàn)的單列布局有兩種：

header、content、footer等寬的單列布局

實(shí)現(xiàn)：
對(duì)header、content、footer都用width或者max-width設(shè)置同樣的寬度（當(dāng)屏幕小于設(shè)置的寬度時(shí)，前者會(huì)出現(xiàn)滾動(dòng)條，后者顯示的是屏幕的實(shí)際寬度），然后再用margin:0 auto;實(shí)現(xiàn)水平居中。
html部分：

css部分：

header、footer占滿屏幕寬度，content略窄的單列布局

實(shí)現(xiàn)：

對(duì)header、footer不設(shè)置寬度，塊級(jí)元素會(huì)占滿屏幕寬度，對(duì)content用width或者max-width設(shè)置同樣的寬度（區(qū)別同上），然后再用margin:0 auto;實(shí)現(xiàn)水平居中。

html部分同上

css部分：

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

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

使用float+overflow:hidden實(shí)現(xiàn)
自適應(yīng)的兩列布局主要是通過(guò)overflow:hidden觸發(fā)BFC（格式化上下文，是Web頁(yè)面中盒模型布局的CSS渲染模式，指一個(gè)獨(dú)立的渲染區(qū)域或者說(shuō)是一個(gè)隔離的獨(dú)立容器。）來(lái)實(shí)現(xiàn)，BFC其中一個(gè)特性就是不重疊浮動(dòng)元素。
html部分：

css部分：

使用flex布局實(shí)現(xiàn)
flex布局也叫彈性盒子布局，可以很方便的實(shí)現(xiàn)布局方式，缺點(diǎn)是不兼容IE10以下的。
html部分同上。
css部分：

flex是flex-grow(定義項(xiàng)目的方法比例)、flex-shrink(定義項(xiàng)目的縮寫比例)、flex-basis(定義了在分配多余空間前，項(xiàng)目占據(jù)的主軸空間)的縮寫，flex:1相當(dāng)于flex-grow:1;flex-shrink:1;flex-basis:0；

使用grid布局實(shí)現(xiàn)
grid布局，是一個(gè)基于網(wǎng)格的二維布局系統(tǒng)，用來(lái)優(yōu)化用戶界面設(shè)計(jì)。
html部分同上。
css部分：

三、三欄布局

三欄布局是指兩側(cè)欄目固定寬度，中間欄目自適應(yīng)寬度。本文主要介紹圣杯布局和雙飛翼布局。

圣杯布局

特點(diǎn)：dom結(jié)構(gòu)必須先寫中間列部分，這樣中間列可以優(yōu)先加載。

html部分：

css實(shí)現(xiàn)步驟：

1、將三個(gè)列部分都設(shè)置為左浮動(dòng)，將中間列的寬度設(shè)置為100%，這樣可以實(shí)現(xiàn)中間自適應(yīng)，這時(shí)候，left和right會(huì)被擠到下一行。

2、將left與right都設(shè)置margin-left的值為負(fù)值，這樣可以使left與right回到與center同一行。

3、設(shè)置父元素container的padding-left與padding-right，為left列部分和right列部分騰出空間。

4、設(shè)置left列部分的和right列部分為相對(duì)定位，設(shè)置它們的left與right屬性。

完整css代碼：

缺點(diǎn)
有一個(gè)最小寬度，當(dāng)頁(yè)面小于最小寬度時(shí)布局就會(huì)亂掉。所以最好給body設(shè)置一個(gè)min-width。這個(gè)min-width肯定不能是試出來(lái)的，怎么計(jì)算呢？就是left-width * 2 + right-width，至于為什么，簡(jiǎn)單的說(shuō)就是：“由于設(shè)置了相對(duì)定位，所以當(dāng)left原來(lái)的位置和right的位置產(chǎn)生重疊時(shí)，由于浮動(dòng)的原因一行放不下就會(huì)換行”。所以布局就被打亂了。使用雙飛翼布局就可以避免這個(gè)問(wèn)題。

雙飛翼布局
與圣杯布局差不多，不過(guò)雙飛翼布局改變了一下DOM文檔結(jié)構(gòu)。
html部分：

css實(shí)現(xiàn)步驟：
1、設(shè)置left、right、center的float為left，再將center的width設(shè)置為100%。
2、設(shè)置left的margin-left為-100%，設(shè)置right的margin-left為它寬度的負(fù)值。
3、設(shè)置center里面的inner的margin屬性值。
完整css代碼：

效果：

兩種三欄布局的對(duì)比：
1、兩種布局都把主流文檔放在最前面，使主列優(yōu)先加載。
2、雙飛翼布局比圣杯布局少了一個(gè)relative定位，css結(jié)構(gòu)更加簡(jiǎn)單。但是圣杯的html布局可能更加地一步了然。
3、兩種布局都是左右定寬，中間寬度自適應(yīng)的布局結(jié)構(gòu)，都用到了margin-left負(fù)值進(jìn)行定位。

還有一些其他的css布局方式再繼續(xù)探索趴~還有頭發(fā)可以掉，加油！

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

文章名稱：css的布局方式有哪些
網(wǎng)站路徑：http://www.rwnh.cn/article38/gpogpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、標(biāo)簽優(yōu)化、網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、網(wǎng)站策劃、定制網(wǎng)站

廣告

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