圣杯布局和双飞翼布局的区别,作用以及优缺点

本文介绍了前端布局中的两种经典解决方案——圣杯布局和双飞翼布局,它们都用于实现三栏布局,其中两侧宽度固定,中间自适应。圣杯布局通过设置父元素padding和子元素相对定位实现,而双飞翼布局则在中间栏内添加子元素调整margin。两者各有优劣,圣杯布局避免额外DOM节点但可能在某些情况下变形,而双飞翼布局则稳定但增加了一层DOM结构。这两种布局方式对于前端开发者来说是必备的知识。

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

作用:

圣杯布局和双飞翼布局解决的问题是相同的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。

圣杯布局:

为了让中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。

优缺点:

不需要添加dom节点

缺点:如果将浏览器无线放大时,「圣杯」将会「破碎」掉。当middle部分的宽小于left部分时就会发生布局混乱。(middle<left即会变形)

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           #bd{
                padding: 0 200px 0 180px;
                height: 100px;
            }          
               #middle{
                float: left;
                width: 100%;     
               height: 500px;
                background:blue;
                
            }
            #left{
                float:left;
                width:180px;
                height:500px;
                margin-left:-100%;
                background: #0c9;
                position: relative;
                left: -180px;
            }
            #right{
                float: left;
                width: 200px;
                height: 500px;
                margin-left: -200px;
                background: #0c9;
                position: relative;
                right: -200px;
            }
    </style>
</head>
<body>
    <div id="bd">
            <div id="middle">middle</div>
            <div id="left">left</div>
            <div id="right">right</div>       
             </div>
                
</body>
</html>

其中:

左右栏通过添加负的margin放到正确的位置了,此段代码是为了摆正中间栏的位置
#bd{
                padding: 0 200px 0 180px;
                height: 100px;
            }
中间栏的位置摆正之后,左栏的位置也相应右移,通过相对定位的left恢复到正确位置
#left{
                
                position: relative;
                left: -180px;
            }
中间栏的位置摆正之后,右栏的位置也相应左移,通过相对定位的right恢复到正确位置
#right{
                
                position: relative;
                right: -200px;
            }

 

双飞翼布局:

为了让中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该div里用margin-left和margin-right为左右两栏div留出位置。

优缺点:

优点:不会像圣杯布局那样变形

缺点是:多加了一层dom节点

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        .mian>div{
            float: left;
        }
        .left{
            width: 200px;
            background-color: cyan;
            margin-left: -100%;
        }
        .right{
            width: 200px;
            background-color: darkorange;
            margin-left: -200px;
        }
        .midden{
            width: 100%;
            background-color: deepskyblue;
        }
        .centent{
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
</head>
<body>
    <div class="mian">
        <div class="midden">
   <div class="centent">中间</div>
        </div>
        <div class="left">
             左边
        </div>
        <div class="right">右边</div>
    </div>
</body>
</html>

圣杯与双飞翼的区别

       圣杯布局和双飞翼布局达到的效果基本相同,都是侧边两栏宽度固定,中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时,采取的解决办法不一样,圣杯布局是在父元素上设置了padding-left和padding-right,在给左右两边的内容设置position为relative,通过左移和右移来使得左右两边的内容得以很好的展现,而双飞翼则是在center这个div中再加了一个div来放置内容,在给这个新的div设置margin-left和margin-right 。`

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值