2022-09-01 什么是双飞翼布局?什么是圣杯布局?如何实现双飞翼布局和圣杯布局?它们有什么区别?
发布时间
阅读量：
阅读量
文章目录
-
-
- 一.圣杯布局
-
- 1.圣杯布局的效果和要求
-
- 效果
- 要求
-
2.圣杯布局的实现方式[重要]
-
-
2.1.使用浮动实现圣杯布局
-
- 思路
- 代码
- 效果
-
2.2.使用弹性盒实现圣杯布局
-
- 思路
- 代码
- 效果
-
2.3.使用定位实现圣杯布局
-
- 思路
- 代码
-
2.4.使用网格布局grid实现圣杯布局
-
- 思路
- 代码
-
二.双飞翼布局
-
- 1.双飞翼布局的效果和要求
-
-
- 效果
- 要求
-
2.圣杯布局和双飞翼布局的区别[重要]
-
一.圣杯布局
1.圣杯布局的效果和要求
效果
要求
- 头部和底部固定高度,宽度占100%
- 中间的container是一个三栏布局,即左右固定宽高,中间自适应
- container的高度要占到页面的大部分
2.圣杯布局的实现方式[重要]
2.1.使用浮动实现圣杯布局
思路
- step1:设置头部和底部的样式
- step2:设置container的三列布局:子元素都设置浮动和相对定位,注意要把center放最前,同时footer要清除浮动
- step3:container的左右子元素设置固定宽度,中间元素宽度设置为100%
- step4:此时左右子盒子被挤压到下一行,left要设置margin-left:-100%让它回到上一行
- step5:left移上去后会遮挡center的内容,需为container父盒子设置左右padding分别为left和right的宽度
- step6:把右侧right也提上去
代码
<style>
* {
margin: 0;
padding: 0;
}
/* step1:设置头部和底部的样式 */
.header,.footer {
background: #339999;
text-align: center;
height: 50px;
line-height: 50px;
}
/* footer要清除浮动 */
.footer {
clear: both;
}
/* step2:设置container的三列布局:子元素都设置浮动和相对定位 */
.container {
/* step5:left移上去后会遮挡center的内容,
需在container设置左右padding分别为left和right的宽度 */
padding-left: 200px;
padding-right: 200px;
text-align: center;
line-height: 100px;
}
/* step3:container的左右子元素设置固定宽度,中间元素宽度设置为100% */
.container>*{
width: 200px;
height: 100px;
float:left;
position: relative;
}
.center {
background: #336666;
width: 100% !important;
position: relative;
}
.left {
background: #336699;
/* step4:此时左右子盒子被挤压到下一行,left要设置margin-left:-100%让它回到上一行 */
margin-left: -100%;
right: 200px;
}
.right {
background: #336699;
float: right;
/* step6:把右侧right也提上去 */
margin-right: -200px;
}
</style>
<body>
<div class="header">header</div>
<div class="container">
<!-- 注意要把center放最前 -->
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
效果
2.2.使用弹性盒实现圣杯布局
思路
- step1:设置头部和底部的样式
- step2:设置container的弹性布局,左右子元素设置固定宽度
- step3:为需要自适应宽度的center设置flex:1
代码
<style>
* {
margin: 0;
padding: 0;
}
/* step1:设置头部和底部的样式 */
.header,.footer {
background: #339999;
text-align: center;
height: 50px;
line-height: 50px;
}
/* step2:设置container的弹性布局,左右子元素设置固定宽度 */
.container {
text-align: center;
line-height: 100px;
height: 100px;
display: flex;
}
.container>*{
width: 200px;
}
/* step3:为需要自适应宽度的center设置flex:1 */
.center {
background: #336666;
flex: 1;
}
.left {
background: #336699;
}
.right {
background: #336699;
}
</style>
<body>
<div class="header">header</div>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
效果
同上
2.3.使用定位实现圣杯布局
思路
- step1:设置头部和底部的样式
- step2:left和right的宽度为20%,center的宽度自适应
- step3:container中设置子绝父相
代码
/* step1:设置头部和底部的样式 */
.header,.footer{
background: #339999;
text-align: center;
height: 50px;
line-height: 50px;
}
.container{
height: 100px;
/* step3:container中设置子绝父相 */
position: relative;
text-align: center;
height: 100px;
line-height: 100px;
}
/* step2:left和right的宽度为20%,center的宽度为60% */
.container>*{
width: 20%;
height: 100%;
/* step3:container中设置子绝父相 */
position: absolute;
top: 0;
background: #336699;
}
.left{
left: 0;
}
.center{
width: 60%;
background: #336666;
left: 20%;
}
.right{
right: 0;
}
2.4.使用网格布局grid实现圣杯布局
思路
step1:设置头部和底部的样式
step2:为body设置display:grid
step3:header设置grid-row:1以及grid-column:1/5(header占据第1行和1`5列)
step4:footer设置grid-row:3以及grid-column:1/5(footer占据第1行和1`5列)
step5:left设置grid-row:2以及grid-column:1/2(left占据第2行和1`2列)
step6:center设置grid-row:2以及grid-column:2/4(center占据第2行和2`4列)
step7:right设置grid-row:2以及grid-column:4/5(right占据第2行和4`5列)
代码
/* step1:设置头部和底部的样式 */
.header,.footer {
background: #339999;
text-align: center;
height: 50px;
line-height: 50px;
}
/* step3:header设置grid-row:1以及grid-column:1/5(header占据第1行和1`5列) */
.header {
grid-row: 1;
grid-column: 1/5;
}
/* step4:footer设置grid-row:3以及grid-column:1/5(footer占据第1行和1`5列) */
.footer {
grid-row: 3;
grid-column: 1/5;
}
.container{
text-align: center;
height: 100px;
line-height: 100px;
/* step2:为body设置display:grid */
display: grid;
}
.container>*{
grid-row: 2;
background: #336699;
}
/* step5:left设置grid-row:2以及grid-column:1/2(left占据第2行和1`2列) */
.left {
grid-column: 1/2;
}
/* step6:center设置grid-row:2以及grid-column:2/4(center占据第2行和2`4列) */
.center {
grid-column: 2/4;
background: #336666;
}
/* step7:right设置grid-row:2以及grid-column:4/5(right占据第2行和4`5列) */
.right {
grid-column: 4/5;
}
二.双飞翼布局
1.双飞翼布局的效果和要求
效果
圣杯布局和双飞翼布局达到的效果基本相同，
都是侧边两栏宽度固定，中间栏宽度自适应
要求
与圣杯布局的要求相同
2.圣杯布局和双飞翼布局的区别[重要]
在解决中间部分被挡住的问题时，采取的解决办法不一样:
- 圣杯布局是在父元素上设置了padding-left和padding-right，然后给左右两边的内容设置position为relative，通过左右移来使左右内容得以展现，
- 双飞翼布局是在center中再加一个div来放置内容，然后给新div设置margin-left和margin-right
全部评论 (0)
还没有任何评论哟~