css常見布局

douzifly 發布于2019-08-30 13:18 / 1735人閱讀

摘要：圣杯布局對于三欄布局來說，左右兩欄一般放置目錄等簡要信息，中間一欄是主要信息。無論是三欄布局還是兩欄布局，以上方法都適用。純浮動布局左右兩欄分別向左右浮動，中間設置值，寬度自適應。

圣杯布局

對于三欄布局來說，左右兩欄一般放置目錄等簡要信息，中間一欄是主要信息。頁面加載時，用戶最希望第一時間看到的是中間一欄內容，所以根據文檔流加載順序（從上到下），中間一欄必須放在左右兩欄的前面。而實際布局需要將中間一欄居中放置，所以在布局的時候就稍有不同，這是就需要用到圣杯布局。（原因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;
        }

運行結果：

需要注意的地方：

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

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

當left負外邊距使得left脫離container時，會升上去。（right同理）

第三步中left和right升上去后會左右擋住center，所以需要container設置padding，在將left和right定位。

當然這里只是簡單的舉例，為使代碼更加簡潔清楚，container沒有加清浮動，此時他的高度為0.

圣杯布局的進化：雙飛翼布局

雙飛翼布局是在圣杯布局上進行改進，當left和right設置負margin，會上升并擋住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;
        }

與圣杯運行結果一樣。

　　需要注意的是

這里是在center里面套了一個div，再設置margin值。

left和right沒有使用定位。

圣杯布局的退化

前面兩個布局是考慮到中間一欄先加載，但有些場景并不需要，此時可以很快的得到簡單的三欄布局。

　　代碼示例如下：




    圣杯布局退化
    
    


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

結果與圣杯布局一樣。

　　需要注意的是:

在HTML中left放在center的前面。

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

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

純浮動布局

左右兩欄分別向左右浮動，中間設置margin值，寬度自適應。

代碼如下：




    純浮動
    
    


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

運行結果與圣杯布局一樣。

　　需要注意的點：

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

center的width應為auto。

絕對定位

純浮動是利用浮動將左右兩欄定位，這里也可以絕對定位。center依舊設置margin值留出左右空位。

代碼如下：




    絕對定位
    
    


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

運行結果與圣杯布局一樣。

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

以上就是幾種常見的布局，可根據不同的場景選擇相應的布局。如有錯誤的地方還望指出，有更好的布局歡迎補充。
新年的第一篇博客完成啦，接下來要將之前所學的知識寫成一篇篇博文，2017年加油吧！！！

云服務器 GPU云服務器 css布局 css布局教程學習css布局 div布局布局html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115460.html

前端面試之CSS總結(上)

摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 評論0 收藏0
幾種常見的CSS布局

摘要：本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式，本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決，下文會介紹雙飛翼布局特點同樣也是三欄布局，在圣杯布局基礎上進一步優化，解決了圣杯布局錯亂問題，實現了內容與布局的分離。本文概要本文將介紹如下幾種常見的布局： showImg(https://segmentfault.com/img/remote/14600000...

荊兆峰 2019-08-29 17:13 評論0 收藏0
CSS常見布局與居中

摘要：常用于控制頁面布局的定位機制普通流相對定位絕對定位和固定定位。左右布局最常用的就是通過浮動左浮或右浮來實現浮動。可以通過設置左右的外邊距為值來居中包括圖片。這里，就CSS左右布局，左中右布局，水平與垂直居中，進行討論。 CSS常用于控制頁面布局的定位機制：普通流、相對定位、絕對定位和固定定位。還可以使用float屬性來讓元素浮動。 1.左右布局最常用的就是通過浮動（左浮或右浮）來實...

April 2019-08-30 15:54 評論0 收藏0