css常見布局

douzifly 發(fā)布于2019-08-30 13:18 / 1719人閱讀

摘要：圣杯布局對(duì)于三欄布局來說，左右兩欄一般放置目錄等簡(jiǎn)要信息，中間一欄是主要信息。無論是三欄布局還是兩欄布局，以上方法都適用。純浮動(dòng)布局左右兩欄分別向左右浮動(dòng)，中間設(shè)置值，寬度自適應(yīng)。

圣杯布局

對(duì)于三欄布局來說，左右兩欄一般放置目錄等簡(jiǎn)要信息，中間一欄是主要信息。頁(yè)面加載時(shí)，用戶最希望第一時(shí)間看到的是中間一欄內(nèi)容，所以根據(jù)文檔流加載順序（從上到下），中間一欄必須放在左右兩欄的前面。而實(shí)際布局需要將中間一欄居中放置，所以在布局的時(shí)候就稍有不同，這是就需要用到圣杯布局。（原因or背景)

下面是代碼示例：




    圣杯布局
    
    


    Header
    
        Center
        Left
        Right
    
    Footer

body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .container{
            padding-left:150px;
            padding-right:200px;
        }
        .left{
            background: #34934D;
            width:150px;
            float:left;
            margin-left:-100%;
            position: relative;
            left:-150px;
        }
        .center{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #EF4400;
            width:200px;
            float:left;
            margin-left:-200px;
            position:relative;
            right:-200px;
        }

運(yùn)行結(jié)果：

需要注意的地方：

在HTML中center是在left和right前面。

左右兩欄的寬度是固定的，中間一欄寬度是隨瀏覽器寬度變化而變化

當(dāng)left負(fù)外邊距使得left脫離container時(shí)，會(huì)升上去。（right同理）

第三步中l(wèi)eft和right升上去后會(huì)左右擋住center，所以需要container設(shè)置padding，在將left和right定位。

當(dāng)然這里只是簡(jiǎn)單的舉例，為使代碼更加簡(jiǎn)潔清楚，container沒有加清浮動(dòng)，此時(shí)他的高度為0.

圣杯布局的進(jìn)化：雙飛翼布局

雙飛翼布局是在圣杯布局上進(jìn)行改進(jìn)，當(dāng)left和right設(shè)置負(fù)margin，會(huì)上升并擋住center，圣杯布局是采用padding+relative定位，而雙飛翼布局是采用margin解決。

　　具體代碼如下




    雙飛翼布局
    
    


    Header
    
        
            Center
        
        Left
        Right
    
    Footer

body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .left{
            background: #34934D;
            width:150px;
            float:left;
            margin-left:-100%;

        }
        .center{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .center-inner{
            margin-left: 150px;
            margin-right: 200px;
        }
        .right{
            background: #EF4400;
            width:200px;
            float:left;
            margin-left:-200px;
        }

與圣杯運(yùn)行結(jié)果一樣。

　　需要注意的是

這里是在center里面套了一個(gè)div，再設(shè)置margin值。

left和right沒有使用定位。

圣杯布局的退化

前面兩個(gè)布局是考慮到中間一欄先加載，但有些場(chǎng)景并不需要，此時(shí)可以很快的得到簡(jiǎn)單的三欄布局。

　　代碼示例如下：




    圣杯布局退化
    
    


    Header
    
        Left
        Center
        Right
    
    Footer

body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .container{
            padding-left: 150px;
            padding-right: 200px;
        }
        .left{
            background: #34934D;
            width:150px;
            float:left;
            margin-left:-150px;

        }
        .center{
            background: #D6D6D6;
            width:100%;
            float:left;

        }
        .right{
            background: #EF4400;
            width:200px;
            float:right;
            margin-right: -200px;
        }

結(jié)果與圣杯布局一樣。

　　需要注意的是:

在HTML中l(wèi)eft放在center的前面。

主要實(shí)現(xiàn)的思路：根據(jù)文檔流從上到下為：left-center-right。首先將container設(shè)置左右padding，在將left和right設(shè)置負(fù)margin值，使其剛好落在container的padding中。

無論是三欄布局還是兩欄布局，以上方法都適用。

純浮動(dòng)布局

左右兩欄分別向左右浮動(dòng)，中間設(shè)置margin值，寬度自適應(yīng)。

代碼如下：




    純浮動(dòng)
    
    


    Header
    
        Left
        Right
        Center
    
    Footer

body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .left{
            background: #34934D;
            width:150px;
            float:left;

        }
        .center{
            background: #D6D6D6;
            margin-left: 150px;
            margin-right: 200px;

        }
        .right{
            background: #EF4400;
            width:200px;
            float:right;
        }

運(yùn)行結(jié)果與圣杯布局一樣。

　　需要注意的點(diǎn)：

浮動(dòng)的left和right需要放在center前面。浮動(dòng)前面有非浮動(dòng)的元素，后面浮動(dòng)元素只能在其后面。

center的width應(yīng)為auto。

絕對(duì)定位

純浮動(dòng)是利用浮動(dòng)將左右兩欄定位，這里也可以絕對(duì)定位。center依舊設(shè)置margin值留出左右空位。

代碼如下：




    絕對(duì)定位
    
    


    Header
    
        Left
        Right
        Center
    
    Footer

body{padding:0;margin:0}
        .header,.footer{width:100%;  background: #666;height:30px;clear:both;}
        .container{
            position: relative;
        }
        .left{
            background: #34934D;
            width:150px;
            position: absolute;
            top: 0px;
            left: 0px;

        }
        .center{
            background: #D6D6D6;
            margin-left: 150px;
            margin-right: 200px;

        }
        .right{
            background: #EF4400;
            width:200px;
            position: absolute;
            top: 0px;
            right: 0px;
        }

運(yùn)行結(jié)果與圣杯布局一樣。

需要注意：container需要加position：relative（或其他非static）。

以上就是幾種常見的布局，可根據(jù)不同的場(chǎng)景選擇相應(yīng)的布局。如有錯(cuò)誤的地方還望指出，有更好的布局歡迎補(bǔ)充。
新年的第一篇博客完成啦，接下來要將之前所學(xué)的知識(shí)寫成一篇篇博文，2017年加油吧?。?！

GPU云服務(wù)器云服務(wù)器 css布局 css布局教程學(xué)習(xí)css布局 div布局布局html

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115460.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

douzifly

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Windows 內(nèi)核驅(qū)動(dòng)開發(fā)環(huán)境 VS2019+WDK11

閱讀 1573·2021-09-23 11:21
Sharktech：鯊魚機(jī)房洛杉磯云服務(wù)器,$49/月,贈(zèng)送$50;16核/32G內(nèi)存/400G S

閱讀 2344·2021-09-07 10:13
阿里云免費(fèi)領(lǐng)1年云服務(wù)器活動(dòng)：2核/2G內(nèi)存/1M帶寬/40G系統(tǒng)盤

閱讀 834·2021-09-02 10:19
前端項(xiàng)目修改默認(rèn)滾動(dòng)條樣式

閱讀 1124·2019-08-30 15:44
css常見布局

閱讀 1720·2019-08-30 13:18
css-開發(fā)總結(jié)

閱讀 1912·2019-08-30 11:15
總結(jié)：前端開發(fā)中讓元素水平垂直居中的方法

閱讀 1104·2019-08-29 17:17
webpack從0到1超詳細(xì)超基礎(chǔ)學(xué)習(xí)教程

閱讀 2016·2019-08-29 15:31

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

css常見布局

相關(guān)文章

**前端面試之CSS總結(jié)(上)**

**幾種常見的CSS布局**

**幾種常見的CSS布局**

**幾種常見的CSS布局**