首页 > 其他分享> > 圣杯，双飞翼

圣杯，双飞翼

2021-05-16 12:33:15 作者：互联网

圣杯，双飞翼模型

相同点

两边顶宽，中间自适应的三栏布局。 中间栏要在放在文档流前面以优先渲染。

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
且最终呈现出来的结果也是一样的。
在这里插入图片描述

不同点

虽然最终结果与前几步都是一样的，但是双飞翼㔿圣杯还是有很大的不同的，不同之处就在于他们两个对于该页面的实现方式是不同的，圣杯是讲三个部分放在了一个盒子中，大盒子内部进行调整，而双飞翼是三个并列的盒子，而中间内容则是放在了第一个盒子里面，相当于是三个盒子在同一行上进行调整。

在这里插入图片描述

圣杯模型

代码

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="head">这个是头部</div>
    <div class="center">
        <!-- <div class="left"> 这个是左边嘞</div> -->
        <div class="middle"> 这个是不会被挡到的中间这个是不会被挡到的中间这个是不会被挡到的中间这个是不会被挡到的中间这个是不会被挡到的中间这个是不会被挡到的中间这个是不会被挡到的中间这个是不会被挡到的中间</div>
        <div class="left"> 这个是左边嘞</div>
        <div class="right"> 这个是右边</div>
    </div>
    <div class="foot">这个是尾部</div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
.head {
    height: 50px;
    background-color: aqua;
}
.center {
    height: 100px;
    padding: 0 80px;
}
.center .left {
    width: 80px;
    height: 100px;
    float: left;
    background-color: blanchedalmond;
    position: relative;
    margin-left: -100%;
    left: -80px;
}
.center .middle {
    width: 100%;
    height: 100px;
    float: left;
    background-color: rgb(255, 153, 0);
    position: relative;
}
.center .right {
    width: 80px;
    height: 100px;
    float: left;
    background-color: blanchedalmond;
    position: relative;
    margin-left: -80px;
    right: -80px;
}
.foot {
    height: 50px;
    background-color: aqua;
}

在这里插入图片描述

该图是我一开始醉的时候的第一步的结果，我当时是吧左中右三个盒子按照顺序写的，而结果也没出现预期中中间盒子跑到前边去的结果，想了半天怎么把左盒子放下来，最终还是向到了可以把中间盒子写到前面先进性渲染，这样中间盒子就会在第一行显示了。

在这里插入图片描述
这个就是把盒子位置改变后的结果了。

在这里插入图片描述
首先是对于左盒子进行相对定位，用负的外边距与相对定位将左盒子固定在左边的位置。

在这里插入图片描述
右盒子也是同理，固定弯右盒子后对中间盒子的外边距进行设置，使其刚好空出左右两个盒子的位置。

在这里插入图片描述
完成~

双飞翼模型

由于疏忽，中间过程忘了截图QAQ

代码

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="head">这个是头部</div>
    <div class="center">
        <div class="middle">
            这个不会被挡住的中间~这个不会被挡住的中间~这个不会被挡住的中间~这个不会被挡住的中间~这个不会被挡住的中间~
        </div>
    </div>
    <div class="left">这个是左边</div>
    <div class="right">这个是右边</div>
    <div class="foot">这个是尾部</div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
.head {
    width: 100%;
    height: 50px;
    background-color: aqua;
    
}
.center,.left,.right {
    float: left;
}
.center {
    width: 100%;
    
}
.center .middle {
    height: 100px;
    background-color: rgb(255, 153, 0);
    margin: 0 80px;

}
.left {
    width: 80px;
    height: 100px;
    margin-left: -100%;
    background-color: blanchedalmond;

}
.right {
    width: 80px;
    height: 100px;
    margin-left: -80px;
    background-color: blanchedalmond;

}
.foot {
    float: left;
    width: 100%;
    height: 50px;
    background-color: aqua;
}

在这里插入图片描述

在这里插入图片描述
相比于圣杯模型，还是双飞翼更简单一点，因为双飞翼模型不用定位，只用边距就可以了，只需要进行与圣杯模型最后一步差不多的操作，对中间盒子的外边距进行设置，然后让盛夏的两个盒子上去填补空位就可以啦。

标签：盒子,中间,color,height,双飞翼,background,圣杯,left
来源： https://blog.csdn.net/weixin_51226264/article/details/116886900