三列布局之圣杯布局和双飞翼布局

最新推荐文章于 2021-09-23 23:49:29 发布

Atiantis0218

最新推荐文章于 2021-09-23 23:49:29 发布

阅读量589

点赞数

本文链接：https://blog.csdn.net/Atiantis0218/article/details/109453299

版权

圣杯布局和双飞翼布局

布局要求
圣杯布局
双飞翼布局
- html布局
- css样式
两种布局的发对比

布局要求

三栏布局
（1）、两边固定当中自适应
（2）、当中列要完整显示

圣杯布局

技术点

浮动：利用浮动搭建完整的布局框架
margin为负值：调整旁边两列的位置（使三列布局到一行上）
相对定位：调整旁边两列的位置（使旁边两列调整到两侧）

html布局

<body>

    <div class="header">header</div>
    <div class="content clearfix">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

css样式

        body{
            /* 设置页面最小宽度 */
            min-width: 600px;
        }
        
        .clearfix:before,
        .clearfix:after{
            content: "";
            display: table;
            clear: both;
        }
        
        .header,.footer{
            height:50px;
            background: #bfa;
            border: 1px solid rgb(97, 100, 97);
        }
        
        .content{
            padding: 0 200px;
            overflow: hidden;
        }
        
        .middle{
            padding-bottom: 10000px;
            margin-bottom: -10000px;
            float: left;
            width: 100%;
            background: rgb(59, 243, 243);
        }
        
        .left,.right{
            padding-bottom: 10000px;
            margin-bottom: -10000px;
            float: left;
            width: 200px;
            background: rgb(243, 166, 211);
        }
        
        .left{
            position: relative;
            right: 200px;
            margin-left: -100%;
        }
        
        .right{
            position: relative;
            left: 200px;
            margin-left: -200px;
        }

有几点需要留意：
1、三列布局要先写middle，然后再是left和right，这是因为在加载页面时，首先需要加载的是middle。
2、给body设置最小宽度，防止页面缩放之后三列发生错位，最小宽度的大小一般设置为2left+right，或者2right+left。
3、理解负边距的作用，left的margin-left:-100%使它上移一行，同时right向左移占据left原先位置，同理，right的margin-left:-200px使它上移并靠右
4、给content设置padding，旨在从中间内容区左右两侧抠出两个空白区，用来存放left和right两列。
5、 left、right需要设置定位，从而使得左右两列分别向左和向右移动到先前抠出的两个空白位置上，设置position:relative以及相应的left、right值。
6、等高布局
由于中间三列并未设置高度，高度靠内容撑开，因此如果出现一列内容比其他两列多，就会导致三列高度不等，如下图所示
在这里插入图片描述
这种情况下就要用到等高布局，做法是将三列的下内边距即padding-bottom设置一个较大的值，比如为10000px，使其内容区扩大，进而有足够的空间填写内容。然后给三列的下外边距margin-bottom设置一个负值：-10000px，使其下边框上移，此时边界以上的高度相同，然后对内容区content设置overflow: hidden属性，使其将超出内容的部分裁剪掉，从而实现一个等高布局，实际上是伪等高布局，因为下方裁剪部分依旧是不等高的，不过裁剪之后用户看到的就是一个等高的三列布局。

双飞翼布局

html布局

<body>
    <div class="header">header</div>
    <div class="content clearfix">
        <div class="middle">
            <div class="middle_inner">
                middle
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

css样式

        body{
            min-width: 600px;
        }
        
        .clearfix::before,
        .clearfix::after{
            content: "";
            display: table;
            clear: both;
        }
        
        .content{
            overflow: hidden;
        }

        .header,.footer{
            height: 50px;
            background: rgb(212, 247, 203);
            border: 1px solid;
        }

        .content .middle{
            width: 100%;
            background: rgb(250, 211, 160);
        }

        .content .left{
            margin-left: -100%;
        }

        .content .right{
            margin-left: -200px;
        }

        .content .left,.content .right{
            
            width: 200px;
            background: rgb(160, 217, 250);
        }

        .content .middle,.content .left,.content .right{
            float: left;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }

        .content .middle_inner{
            padding: 0 200px;
        }

需要注意的点：
1、双飞翼布局前期和圣杯布局相同，当将三列布局到一行上后（如下图所示），圣杯布局的做法是给内容区content设置padding，使三列缩入，再使用相对布局是左右两列左移右移。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201102203029490.png#pic_center
然后双飞翼布局则采用另一种方法，其做法是在html middle布局中嵌套一层

		<div class="middle">
            <div class="middle_inner">
                middle
            </div>
        </div>

圣杯布局的内容区是middle，其宽度设置为了100%，因此无法给其设置padding，因为宽度固定的情况下加padding会加在两侧，这样就超出页面了。针对这个情况，双飞翼布局多嵌套了一层，内容区设置在middle_inner中，此时再给middle设置padding就可以在middle原本大小不变的情况下，在内容区里挤出空间用来存放left和right。

两种布局的发对比

1、两种布局都是把主列middle放在文档流的最前面，让主列优先加载。
2、两种布局的实现有相同之处，都是先让三列浮动，然后通过给外边距设置负值形成三列布局。
3、两种布局的不同之处在于如何处理中间主列middle的位置：
圣杯布局采用父容器的左右内边距+左右两列的相对定位来实现的。
双飞翼布局是将主列嵌套在一个新的父级块中利用主列的左右内布局进行调整。

Atiantis0218

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三列布局之圣杯布局和双飞翼布局

圣杯布局和双飞翼布局布局要求圣杯布局技术点html布局css样式双飞翼布局html布局css样式两种布局的发对比布局要求三栏布局（1）、两边固定当中自适应（2）、当中列要完整显示圣杯布局技术点浮动：利用浮动搭建完整的布局框架margin为负值：调整旁边两列的位置（使三列布局到一行上）相对定位：调整旁边两列的位置（使旁边两列调整到两侧）html布局<body> <div class="header">header</div> &l
复制链接

扫一扫