圣杯布局和双飞翼布局

Jacky爱吃奶酪

已于 2022-12-27 17:35:33 修改

阅读量138

点赞数 1

于 2022-12-27 17:28:16 首次发布

本文链接：https://blog.csdn.net/weixin_52384235/article/details/128455880

版权

浅谈圣杯布局和双飞翼布局

前言

在我们PC机浏览网页的时候，我们经常会看到网页的三栏布局。其中左边的内容和右边的内容都是固定宽度的。而中间的内容是自适应屏幕的宽度的。这就是我们常说的圣杯布局和双飞翼布局。

圣杯布局

首先，我们的圣杯布局中间的内容区域是要自适应我们的屏幕的宽度。所以，我们的中间区域的的宽度要设置为100%。那么如何给左右两栏流出空白，我们可以使用padding来进行留白。

<style>
        *{
            margin:0px;
            padding:0px;
        }

        .header{
            background-color: rgb(6, 133, 245);
        }

        .content{
            overflow: auto;
            padding-left:200px;
            padding-right:100px;
        }

        .content .col{
            float:left;
        }

        .content .center{
            background-color: orange;
            width:100%;
        }

        .content .left{
            position:relative;
            width:200px;
            color:white;
            background-color: brown;
            margin-left:-100%;
            right:200px;
        }

        .content .right{
            width:100px;
            color:white;
            margin-right:-100px;
            background-color: blueviolet;
        }

        .footer{
            clear:both;
            background-color:rgb(6, 133, 245);
        }
    </style>
</head>
<body>
   <div class="header">
        这是顶部
   </div>
   <div class="content">
        <div class="center col">主要内容</div>
        <div class="left col">左边内容</div>
        <div class="right col">右边内容</div> 
   </div>
   <div class="footer">
    这是尾部
   </div>
</body>

主要内容的宽度设置为100%，则它可以自适应宽度。将左栏设置为主要内容的中间时，使用margin-left的负值，margin-left的负值的作用是向左移动对应的像素值。则此时左栏的左边界与主要内容的左边界对齐，再通过使用position:relative,来将左栏继续左移。
这里，要搞清楚一个问题，当我们对左栏和右栏设置margin-left和position的时候，左栏和右栏之所以会排列到主要内容区域的下方是因为主要区域所在的行宽度不够。
如何使得右栏位于中间区域的右边？则使用margin-right为负值。margin-right为负值的作用是当前的可视区域在减小对应的像素值。而并非真实宽度的减小。将margin-right设置为自身宽度值得负值，其实就是欺骗浏览器它的宽度为0px，使得它能够在主要内容区域得右边排列。

效果图：
在这里插入图片描述

双飞翼布局

双飞翼布局主要使用margin来控制左右栏的区域。

<style>
        *{
            margin:0px;
            padding:0px;
        }

        .header{
            background-color: bisque;
        }

        .content .col{
            float:left;
        }

        .content{
            overflow: auto;
        }

        .content .main{
            width:100%;
            background-color: rgb(30, 182, 182);
        }

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

        .content .left{
            width:200px;
            margin-left:-100%;
            background-color: orange;
        }

        .content .right{
            width:100px;
            margin-left:-100px;
            background-color: rgb(142, 99, 182);
        }

        .footer{
            clear:both;
            background-color:bisque;
        }
    </style>
</head>
<body>
    <div class="header">这是顶部</div>
    <div class="content">
        <div class="main col">
            <div class="center">这是中间</div>
        </div>
        <div class="left col">这是左边</div>
        <div class="right col">这是右边</div>
    </div>
    <div class="footer">这是底部</div>
</body>

要使得左栏的内容位于中间区域的左边，首先左栏的内容也要向左边移动。则使用margin-left的负值；要使得右边的区域位于中间内容区域的右边，也需要使用margin-left的负值。

效果图：
在这里插入图片描述