前言
开门见山,圣杯布局和双飞翼布局都是为了实现两边定宽,中间自适应的布局,只是在实现的方法上有些许不同,因此不要被这两个奇怪叫法的东西迷惑了。事实上,圣杯布局和双飞翼布局在设计思路上也有些相似之处,我将会一步步带领大家认识,并在后面为大家总结。
如果想了解掌握什么是传统模型、flex、grid布局,可以看看上一篇文章:
传统模型、Flex和Grid布局
如果感觉这两个布局理解起来较难,那么你可能是新人,可以看看另外一篇文章:
左右布局(传统模型、flex、grid的实现)
圣杯布局
HTML
<main>
<div class="center contain">center</div>
<div class="left contain">left</div>
<div class="right contain">right</div>
</main>
消除浏览器默认:
html,body{
padding: 0;
margin: 0;
}
首先,我们先设置三个div的统一高度和float属性;并且设置center的width为100%,left和right的width为100px;
.contain{
float: left;
height: 300px;
}
.center{
background-color: bisque;
width: 100%;
}
.left{
background-color: rebeccapurple;
width: 100px;
}
.right{
background-color: salmon;
width: 100px;
}
设置后:
图1-1
接着我们要想办法将 left 先进入到 center 的左边,注意这里说的是“进入”,看图中的文字“center”消失就理解了,这里用margin-left:-100%
,-100%是要让 left 的左外边距向左移动父元素的宽的100%,因为 center 的宽度为100%
同理,我们将 right 进入到 center 的右边,这里margin-left:-100px
,得到
到这里会发现基本成型了,但是别忘记 center 还有部分被遮挡,于是将整个父元素的内容层压缩
main{
padding: 0 100px;
}
如下,仔细观察多出来的空白部分
接着我们只需要把左右两个 div 移动到两边的位置
.left{
position: relative;
left:-100px;
}
.right{
position: relative;
left:100px;/*也可以right:-100px*/
}
这样就完成了我们圣杯布局啦~鼓励鼓励!!!
效果图就是开头那个,就不截图了,希望大家到这里能自己实操一下
双飞翼布局
其实双飞翼和圣杯布局前期做的事情都一样,即做到文字图1-3的效果,为了不被说是凑字数,滑动指头回去瞄一眼呗。
由图1-3中基本成型的布局中,我们要思考另外一种方式令 center 不再被遮挡,因此不同于圣杯布局的就是针对 center 自身进行改变,那么就给 center 增加一个子元素
<div class="center contain">
<div class="center-child">
center-child
</div>
</div>
通过对子元素设置左右外边距:margin:0 100px
,便能达到想要的结果。
因此,我们知道圣杯布局是在三个 div 并列后调整了父元素的内边距padding
属性后移动左右两边的 div 实现的,而双飞翼布局则是在并列后在 center 中添加多一个子元素并对子元素进行外边距margin
属性的调整实现的,其目的都只是为了解决中间的 div 层被遮挡的问题,那么下面我们将分别用 flex 和 grid 布局对这种三栏布局进行实现
flex实现
html
<main>
<div id="center">center</div>
<div id="left">left</div>
<div id="right">right</div>
</main>
CSS
main{
display: flex;
height: 300px;
}
#center{
background-color: bisque;
order: 0;
flex: 1;
}
#left{
background-color: rebeccapurple;
order: -1;
width: 100px;
}
#right{
background-color: salmon;
order: 1;
width: 100px;
}
其中,容器设置display: flex
,中间栏需要自适应则flex: 1
,另外order
属性能定义排列顺序。
grid实现
main{
display: grid;
height: 300px;
grid-template-columns: 100px auto 100px;
grid-template-areas: "left center right";
}
#center{
background-color: bisque;
grid-area: center;
}
#left{
background-color: rebeccapurple;
grid-area: left;
}
#right{
background-color: salmon;
grid-area: right;
}
grid布局相当于在容器设计好整个布局,也就是布局已经固定了,再将项目进行排列。
网友评论