兩欄、三欄佈局（聖盃+雙飛翼）

原創 我的绝伦大人 2020-02-21 03:04

一、聖盃佈局

兩邊定寬，中間自適應的三欄佈局 

float+padding+position的方法

實現過程：

第一步：將左中右三部分設爲左浮動，保證可以在一行顯示，中間寬度設爲100%，保證自適應 
第二步：用負margin將左和右移到和中間同一行       
第三步：中間內容用padding,避免中間內容被左右擋住，同時爲左右部分挪出空位
第四步：運用相對定位把左右部分挪回原位    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .header{
            background-color: cyan;
            height:50px;
            width:100%;
        }
        .footer{
            background-color: #0088bb;
            height:50px;
            width:100%;
        }
        .layout{
            /*此處是爲了清除浮動，否則footer將跑到header的下邊*/
            overflow: hidden;
            /*3.12兩步之後元素顯示已經在一行，但是中間主題部分的左右兩邊被左右欄的內容覆蓋了，
            必須用padding，爲左欄和右欄留出適當的位置*/
            padding-left:150px;
            padding-right:100px;
        }
        .layout .main{
            background-color: #4dbcb0;
            height:100px;
            /*1.中間部分需要根據瀏覽器的寬度進行自適應，所以寬度爲100%*/
            width:100%;
            /*1.讓三個元素都浮動就可以保證三個元素在一行裏顯示*/
            float:left;
        }
        .layout .left{
            background-color: #daf1ef;
            height:100px;
            width:150px;
            float:left;
            /*main的寬慰爲100%，所以左右兩欄會被擠到下一行*/
            /*2.必須先讓左邊欄浮動上去，這樣右邊欄才能到最左側，不然的話右邊欄會把左邊欄吞噬掉*/
            margin-left:-100%;
            /*4.就是要讓左欄和右欄回到空位，用相對定位的方法，相對於自己定位*/
            position:relative;
            left:-150px;
        }
        .layout .right{
            background-color: #daf1ef;
            height:100px;
            width:100px;
            float:left;
            /*2.右邊欄也在下一行，應用負margin將右邊欄移上去*/
            margin-left: -100px;
            position:relative;
            left:100px;
        }
    </style>
</head>
<body>
<div class="header">我是頭</div>
<div class="layout">
    <!--1.因爲中間要達到自適應，所以拿中間開刀-->
    <div class="main">主體內容自適應</div>
    <div class="left">左邊欄固定</div>
    <div class="right">右邊欄固定</div>
</div>
<div class="footer">我是尾</div>
</body>
</html>

這裏寫圖片描述
這裏寫圖片描述

中間帶間距的情況

把layout的padding加大，左右兩部分的定位加大，就會出現邊距，左右定位的絕對值都要加上邊距的   
大小，等同於layout的padding值  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .header{
            background-color: cyan;
            height:50px;
            width:100%;
        }
        .footer{
            background-color: #0088bb;
            height:50px;
            width:100%;
        }
        .layout{
            /*此處是爲了清除浮動，否則footer將跑到header的下邊*/
            overflow: hidden;
            /*3.12兩步之後元素顯示已經在一行，但是中間主題部分的左右兩邊被左右欄的內容覆蓋了，
            必須用padding，爲左欄和右欄留出適當的位置*/
            padding-left:150px;
            padding-right:150px; 
            background-color: blue; 
        }
        .layout .main{
            background-color: #4dbcb0;
            height:100px;
            /*1.中間部分需要根據瀏覽器的寬度進行自適應，所以寬度爲100%*/
            width:100%;
            /*1.讓三個元素都浮動就可以保證三個元素在一行裏顯示*/
            float:left;
        }
        .layout .left{
            background-color: #daf1ef;
            height:100px;
            width:130px;
            float:left;
            /*main的寬慰爲100%，所以左右兩欄會被擠到下一行*/
            /*2.必須先讓左邊欄浮動上去，這樣右邊欄才能到最左側，不然的話右邊欄會把左邊欄吞噬掉*/
            margin-left:-100%;
            /*4.就是要讓左欄和右欄回到空位，用相對定位的方法，相對於自己定位*/
            position:relative;
            left:-150px; 
        }
        .layout .right{
            background-color: #daf1ef;
            height:100px;
            width:130px;
            float:left;
            /*2.右邊欄也在下一行，應用負margin將右邊欄移上去*/
            margin-left: -130px;
            position:relative;
            left:150px; 
        }
    </style>
</head>
<body>
<div class="header">我是頭</div>
<div class="layout">
    <!--1.因爲中間要達到自適應，所以拿中間開刀-->
    <div class="main">主體內容自適應</div>
    <div class="left">左邊欄固定</div>
    <div class="right">右邊欄固定</div>
</div>
<div class="footer">我是尾</div>
</body>
</html>

二、雙飛翼佈局(先渲染main)

爲了避免左右兩部分使用relative,以後無法修改定位，雙飛翼爲中間內容單獨加了一個容器以便margin   
來爲左右留出空白；

float+margin

實現過程：

第一步：將左中右三部分設爲左浮動，保證可以在一行顯示，中間寬度設爲100%，保證自適應 
第二步：用負margin將左和右移到和中間同一行  
第三步：將內部盒子用margin,把主要內容擠出來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .header{
            background-color: cyan;
            height:50px;
            width:100%;
        }
        .footer{
            background-color: #0088bb;
            height:50px;
            width:100%;
        }
        .layout{
            /*此處是爲了清除浮動，否則footer將跑到header的下邊*/
            overflow: hidden;
        }
        .layout .main{
            background-color: #4dbcb0;
            /*1.中間部分需要根據瀏覽器的寬度進行自適應，所以寬度爲100%*/
            width:100%;
            /*1.讓三個元素都浮動就可以保證三個元素在一行裏顯示*/
            float:left;
        }
        .layout .left{
            background-color: #daf1ef;
            width:150px;
            float:left;
            /*main的寬慰爲100%，所以左右兩欄會被擠到下一行*/
            /*2.必須先讓左邊欄浮動上去，這樣右邊欄才能到最左側，不然的話右邊欄會把左邊欄吞噬掉*/
            margin-left:-100%;
            /* 等高佈局 */
            margin-bottom:-9999px;
            padding-bottom:9999px;
            overflow: hidden;
        }
        .layout .right{
            background-color: #daf1ef;
            width:100px;
            float:left;
            /*2.右邊欄也在下一行，應用負margin將右邊欄移上去*/
            margin-left: -100px;

             /* 等高佈局,拉成無限長，再收回來，多餘部分隱藏 */
            margin-bottom:-9999px;
            padding-bottom:9999px;
            overflow: hidden;
        }
        .inner{
            margin-left:150px;
            margin-right:100px; 
        }
    </style>
</head>
<body>
<div class="header">我是頭</div>
<div class="layout">
    <!--1.因爲中間要達到自適應，所以拿中間開刀-->
    <div class="main">
        <!--此處是雙飛翼佈局的關鍵，也是他和聖盃佈局的區別，在內部創建一個元素，避免使用相對定位-->
        <div class="inner">
            主體內容自適應
            <p>我是中間</p>
            <p>我是中間</p>
            <p>我是中間</p>
            <p>我是中間</p>
        </div>
    </div>
    <div class="left">左邊欄固定</div>
    <div class="right">右邊欄固定</div>
</div>
<div class="footer">我是尾</div>
</body>
</html>

這裏寫圖片描述

中間帶邊距的情況

只要把margin的值加大就好，注意背景色的區分    

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .header{
            background-color: cyan;
            height:50px;
            width:100%;
        }
        .footer{
            background-color: #0088bb;
            height:50px;
            width:100%;
        }
        .layout{
            /*此處是爲了清除浮動，否則footer將跑到header的下邊*/
            overflow: hidden;
        }
        .layout .main{
            /*1.中間部分需要根據瀏覽器的寬度進行自適應，所以寬度爲100%*/
            width:100%;
            /*1.讓三個元素都浮動就可以保證三個元素在一行裏顯示*/
            float:left;
        }
        .layout .left{
            background-color: #daf1ef;
            width:150px;
            float:left;
            /*main的寬慰爲100%，所以左右兩欄會被擠到下一行*/
            /*2.必須先讓左邊欄浮動上去，這樣右邊欄才能到最左側，不然的話右邊欄會把左邊欄吞噬掉*/
            margin-left:-100%;
            /* 等高佈局 */
            margin-bottom:-9999px;
            padding-bottom:9999px;
            overflow: hidden;
        }
        .layout .right{
            background-color: #daf1ef;
            width:100px;
            float:left;
            /*2.右邊欄也在下一行，應用負margin將右邊欄移上去*/
            margin-left: -100px;

             /* 等高佈局 */
            margin-bottom:-9999px;
            padding-bottom:9999px;
            overflow: hidden;
        }
        .inner{
            margin-left:170px;
            margin-right:120px; 
            background-color: #4dbcb0;

        }
    </style>
</head>
<body>
<div class="header">我是頭</div>
<div class="layout">
    <!--1.因爲中間要達到自適應，所以拿中間開刀-->
    <div class="main">
        <!--此處是雙飛翼佈局的關鍵，也是他和聖盃佈局的區別，在內部創建一個元素，避免使用相對定位-->
        <div class="inner">
            主體內容自適應
            <p>我是中間</p>
            <p>我是中間</p>
            <p>我是中間</p>
            <p>我是中間</p>
        </div>
    </div>
    <div class="left">左邊欄固定</div>
    <div class="right">右邊欄固定</div>
</div>
<div class="footer">我是尾</div>
</body>
</html>

這裏寫圖片描述

總結：聖盃佈局和雙飛翼佈局的區別·

1、DOM結構不同，相對於聖盃，雙飛翼爲中間內容單獨加了一個容器以便margin來爲左右留出空白；
2、聖盃用padding來爲左右留白，雙飛翼用margin；
3、聖盃要結合浮動和定位來使左右定位，雙飛翼只用浮動即可。

三、三欄佈局方法總結

第一種： 絕對定位 （不用width:100%）

絕對定位法原理是將左右兩邊使用absolute定位，因爲絕對定位使其脫離文檔流，後面的center  
會自然流動到他們上面，然後使用margin屬性，留出左右元素的寬度，既可以使中間元素自適應屏幕  
寬度。
該法佈局的好處，三個div順序可以任意改變。不足是 因爲絕對定位，所以如果頁面上還有其他內容，top的值需要小心處理
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    html,body{
        margin:0; //使內容達到瀏覽器的兩端
        padding:0;
        background-color: antiquewhite;
        height:100%;
    }
    div{height:50%}
    #left{
        width:200px;
        background-color: chartreuse;
        position:absolute;
        top:0;
        left:0;
    }
    #middle{
        background-color: aquamarine;
        margin-left:200px;
        margin-right:200px; 
        /* 注意：這裏不能寫width:100%,否則頁面效果錯亂 */
    }
    #middle p{
        background-color: yellow;
    }
    #right{
        width:200px;
        background-color: aqua;
        position:absolute;
        top:0;
        right:0;
    }
</style>
<body>
    <div id="left">左邊</div>
    <div id="middle">我是中間
        <p>中間內容1987年5月4日出生於四川成都。中國內地男演員、歌手、製片人。2007年參加《加油好男兒》出道，同年發行首張EP《四葉草》；2009年發行首張個人專輯《小先生》；2010年主演電視劇《幸福一定強》和《幸福最晴天》，獲2011年國劇盛典最佳新演員獎；2013年憑藉電視劇《千金歸來》獲得樂視盛典最受歡迎男演員獎；2014年因電視劇《古劍奇譚...</p>
        <p>中間內容</p>
        <p>中間內容</p>
        <p>中間內容</p>
    </div>
    <div id="right">右邊</div>
</body>
</html>

這裏寫圖片描述

第二種：自身浮動法（不用width:100%）

  自身浮動法的原理就是使用對左右使用分別使用float:left和float:right，float使左右兩個元素   
  脫離文檔流，中間元素正常在正常文檔流中，使用margin指定左右外邊距對其進行一個定位。
該佈局法的好處是受外界影響小，但是不足是 三個元素的順序，center一定要放在最後，這是和絕對定位不一樣的地方，center佔據文檔流位置，所以一定要放在最後，左右兩個元素位置沒有關係。當瀏覽器窗口很小的時候，右邊元素會被擊倒下一行。
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
         *{
            padding:0;
            margin:0;
        }
        #left_self,#right_self{ 
            width: 200px;
            height: 200px; 
            background-color: #ffe6b8 
        }  
        #left_self {
            float: left;
        }  
        #right_self{
            float: right;
        }  
        #center_self{
            /* 中間有邊距的 */
            margin: 0 210px;
            height: 200px; 
            background-color: #a0b3d6;
            /* 不加width:100%; */
        }  
    </style>
</head>
<body>
    <div id = "left_self">我是左邊</div>  
    <div id = "right_self">我是右邊</div>  
    <div id = "center_self">我是中間</div>  
</body>
</html>

這裏寫圖片描述

第三種：雙飛翼佈局（見上文）

第四種：flex佈局

利用order屬性可以變換位置，利用flex屬性保證自適應，html順序隨意

flex屬性是flex-grow、flex-shrink和flex-basis的縮寫
flex-grow：放大比例，默認爲0-如果存在剩餘空間也不放大
flex-shrink：縮小比例，默認爲1-如果空間不足項目將縮小
flex-basis：在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小
如果縮寫【flex：1】—-則其計算值爲【1 1 0%】
如果縮寫【flex：auto】—-則其計算值爲【1 1 auto】
如果縮寫【flex：none】—-則其計算值爲【0 0 auto】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三欄佈局（flex）</title>
    <style>
        * {
            text-align: center;
        }
        .header {
            height: 50px;
            line-height: 50px;
            background-color: #ff6666;
        }
        .content {
            display: flex;                /* √ */
        }
        .content .main { 
            order: 1;                     /* order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0 */
            flex:1 1 auto;             
            height: 300px;
            line-height: 300px;
            margin: 0 20px;
            background-color: lightcoral;
        }
        .content .left, .content .right {
            background-color: antiquewhite;
            flex:0 0 100px;           /* flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。*/
        }
        .content .right {
            order: 2;                 /* order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。*/
        }
        .footer {
            height: 50px;
            line-height: 50px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<div>
    <!--頭部-->
    <div class="header">header</div>

    <!--主題內容-->
    <div class="content">
        <div class="main">main</div>     <!-- 將main放在前面讓其先加載出來 -->
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

    <!-- 底部-->
    <div class="footer">footer</div>
</div>
</body>
</html>

這裏寫圖片描述

四、兩欄佈局總結（左邊固定，右側自適應）

第一種：float+BFC

注意：設置左盒子margin-right直接設置

原理：左側元素浮動，右側元素設爲BFC，有間距設置浮動元素外邊距即可 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
    overflow: auto;
    }
    .left {
    width: 120px;
    float:left;
    margin-right:20px;
    border: 5px solid #ddd;
    }
    .right {
    border: 5px solid #ddd;
    overflow:auto;
    }
    </style>
</head>
<body>
<div class="wrapper" id="wrapper">
  <div class="left">
    左邊固定寬度，高度不固定 </br> </br></br></br>高度有可能會很小，也可能很大。
  </div>
  <div class="right">
    這裏的內容可能比左側高，也可能比左側低。寬度需要自適應。</br>
    基本的樣式是，兩個div相距20px, 左側div寬 120px
  </div>
</div>
</body>
</html>

這裏寫圖片描述

第二種：單純float

左側元素float,右側元素用margin-left>=左側元素寬度，對浮動元素設置margin-left是不起作用的，只會把右側的字擠走    

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
    overflow: auto;
    }
    .left {
    width: 120px;
    float:left;
    border: 5px solid #ddd;
    }
    .right {
    border: 5px solid #ddd;
    margin-left:150px; 
    }
    </style>
</head>
<body>
<div class="wrapper" id="wrapper">
  <div class="left">
    左邊固定寬度，高度不固定 </br> </br></br></br>高度有可能會很小，也可能很大。
  </div>
  <div class="right">
    這裏的內容可能比左側高，也可能比左側低。寬度需要自適應。</br>
    基本的樣式是，兩個div相距20px, 左側div寬 120px
  </div>
</div>
</body>
</html>

第三種：absolute+margin-left （不好用）

左側絕對定位，右側設置外邊距，左盒子比右盒子高時，要用min-height屬性   

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
    min-height:200px;  /*  針對左側盒子高於右側的情況 */
    }
    .left {
    width: 120px;
    position:absolute;
    border: 5px solid #ddd;
    }
    .right {
    border: 5px solid #ddd;
    margin-left:150px; 
    }
    </style>
</head>
<body>
<div class="wrapper" id="wrapper">
  <div class="left">
    左邊固定寬度，高度不固定 </br> </br></br></br>高度有可能會很小，也可能很大。
  </div>
  <div class="right">
    這裏的內容可能比左側高，也可能比左側低。寬度需要自適應。</br>
    基本的樣式是，兩個div相距20px, 左側div寬 120px
  </div>
</div>
</body>
</html>

第四種：flex佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    html,body{
        margin:0; //使內容達到瀏覽器的兩端
        padding:0;
        background-color: antiquewhite;
        text-align:center;
        height:100%;
    }
    body{
        display:flex;
    }
    #left{
        background-color:yellow;
        flex:0 0 200px;
    }
    #right{
        background-color: chartreuse;
        flex:1 1 auto;
    }
</style>
<body>
    <div id="left">固定寬度</div>
    <div id="right">自適應</div>
</body>
</html>
我的絕倫大人
發佈了31 篇原創文章 · 獲贊 9 · 訪問量 1萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

我實現了客戶要求的五彩斑斕的黑！！！

五彩斑斕的黑？？？？五彩斑斕？？？還黑？？之前只是笑笑就過去了。。那麼能不能實現呢，，，今天他來了！！！ 效果圖:展示出來的效果顏色和光暈的顏色都是用c3寫成的動畫效果，由於不支持上傳視頻，就截了幾幀的圖片，有想要自己實現這個動畫

SC前端 2020-07-08 10:39:04

CSS預處理器和後處理器

css預處理器 一、什麼是css預處理器？ CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增加了一些編程的特性，將CSS作爲目標生成文件，然後開發者就只要使用這種語言進行編碼工作。通俗的說，CSS

我的绝伦大人 2020-07-08 09:19:30

css剩餘部分

一、link和@import的區別 頁面中引入的方式有三種： 1.在行內定義style屬性 2.頁面頭部內嵌<style>標籤 3.通過link和@import鏈接樣式表 <link rel="styles

我的绝伦大人 2020-07-08 09:19:30

【Python】CSS選擇器語法

常用語法 語法 說明 * 選擇所有節點 #container 選擇id爲container的節點 .container 選擇所有class包含container的節點 div,p 選擇所有 div 元素和

岚清子 2020-07-08 09:13:33

bootstrap側邊導航欄的實現

https://blog.csdn.net/kebi007/article/details/76038251 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

吃鱼的羊 2020-07-08 05:50:47

移動web端css實現文本單行省略及多行省略

單行省略： selector{ text-overflow: ellipsis;/*這就是省略號嘍*/ overflow: hidden;/*設置超過的隱藏*/ white-space: nowrap;/*設置不斷行*/

Tyler-阿信 2020-07-08 04:54:20

CSS hack 整理（更新於20141109）

瀏覽器的兼容性一直是個頭疼的問題，使用“欺騙”技術可使各個瀏覽器效果一致，花了些時間整理了各個瀏覽器的HACK，主要包括IE系列和最新版本的Chrome、Safari、Firefox、 Opera，比較全面的記錄下Hack，內容包括3部分

Tyler-阿信 2020-07-08 04:54:20

CSS實現button按鈕閃爍效果

最近有個奇葩需求，我們客戶要求按鈕要像星星一樣一閃一閃的！！！.......... <el-button type="success" class="flash animated infinite">按鈕</el-button> .

橘猫猫猫猫丶 2020-07-08 04:09:33

CSS＋JS實現瀏覽器不保存用戶名密碼

因爲信息安全問題，客戶要求在輸入密碼的時候，不讓瀏覽器彈出是否保存用戶名密碼的框框..... 調查發現只要將input的type指定爲password就會提示，所以想了這麼個辦法... 只試過IE11和Chrome，其他瀏覽器不知道好不好

橘猫猫猫猫丶 2020-07-08 04:09:33

自用省市級聯及定位

省市二級級聯===========================***///初始化省級聯==============================

iteye_3912 2020-07-08 01:01:43

CSS 基礎（020_下拉式菜單）

原始地址：http://www.w3schools.com/css/css_dropdowns.asp 翻譯： CSS 下拉式菜單（CSS Dropdowns） 使用 CSS 創建可懸停、下拉式菜單。 演示：下拉式菜單示例 移

柯南道尔2606 2020-07-07 23:39:15

CSS 基礎（019_導航欄）

原始網址：http://www.w3schools.com/css/css_navbar.asp 翻譯： CSS 導航欄 演示：導航欄 <!DOCTYPE html> <html lang="en-US"><head><me

柯南道尔2606 2020-07-07 23:39:15

CSS 基礎（009_Max-width）

原始網址：http://www.w3schools.com/css/css_max-width.asp 翻譯： CSS Layout - width and max-width 使用 width，max-width 和 marg

柯南道尔2606 2020-07-07 23:39:15

CSS3 基礎（005_3D 變換）

原始網址：http://www.w3schools.com/css/css3_3dtransforms.asp 翻譯： CSS3 3D 變換（CSS3 3D Transforms） CSS 3D 變換 CSS3 允許你使用 3D

柯南道尔2606 2020-07-07 23:39:15

CSS 基礎（014_Align）

原始網址：http://www.w3schools.com/css/css_align.asp 翻譯： CSS Layout - Horizontal & Vertical Align <!DOCTYPE html> <html

柯南道尔2606 2020-07-07 23:39:15