两栏、三栏布局（圣杯+双飞翼）

最新推荐文章于 2022-05-12 14:02:04 发布

我的绝伦大人

最新推荐文章于 2022-05-12 14:02:04 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/yushuangyushuang/article/details/79243440

CSS 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了多种网页布局方法，包括圣杯布局、双飞翼布局、绝对定位布局、自身浮动法及现代的Flex布局，并对每种布局的特点进行了对比分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、圣杯布局

两边定宽，中间自适应的三栏布局 

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>