圣杯布局
首先需要了解圣杯布局的概念:圣杯布局是指左右宽度固定中间自适应的布局方式,是一个经典的布局
实现方式
在这里我使用的是flex方式来实现我们的圣杯布局。
布局思路:1,需要有三个盒子上中下排列;
2,头部盒子和底部盒子给个宽高背景颜色就行;
3,圣杯布局的主要是中间内容部分,所以大部分在中间的盒子中完成:
首先HTML结构如下:
<div class="header">
<h1>头部</h1>
</div>
<div class="content">
<div class="left">
<h1>左</h1>
</div>
<div class="middle">
<h1>中</h1>
</div>
<div class="right">
<h1>右</h1>
</div>
</div>
<div class="footer">
<h1>底部</h1>
</div>
在这里我们需要注意的是,结构的嵌套,不要将结构嵌套错误。
圣杯布局实现主要是css样式实现:
- 对于中间的大盒子,也就是父盒子,给上flex属性(具体使用可以参照官网)。
- 中间父盒子中的三个子盒子,左右两个盒子给定宽度,
- 父盒子中的中间子盒子,设置属性flex= 1即可
接下就是CSS样式:
/* 样式初始化,也称为四无大法 */
* {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 60px;
background-color: aqua;
text-align: center;
}
.content {
display: flex;
justify-content: space-between;
height: 600px;
color: #fff;
}
.left {
width: 100px;
height: 100%;
background-color: red;
text-align: center;
}
.right {
width: 100px;
height: 100%;
background-color: pink;
text-align: center;
}
.middle {
/* flex为1,就是表示占据宽度剩余的全部 */
flex: 1;
height: 100%;
background-color: royalblue;
text-align: center;
}
.footer {
width: 100%;
height: 60px;
background-color: aqua;
text-align: center;
}
效果图如下:
这就是使用flex实现圣杯布局的方法,当然还有其他的方式可以实现圣杯布局。也欢迎大家在此分享其他的方法。