引言
圣杯布局和双飞翼布局都是比较经典的三栏布局,两种布局的页面效果基本相同。两种布局都是两侧宽度固定, 中间宽度自适应 且 中间内容优先渲染 的三栏布局。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210610133616282.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70#pic_center)
圣杯布局
圣杯布局DOM结构
<header>this is the header</header>
<main>
<div class="center">this is the center</div>
<div class="left">this is the left</div>
<div class="right">this is the right</div>
</main>
<footer>this is the footer</footer>
内容区域main包含三个div标签,class分别为center、left、right。(顺序很重要,center一定要放到最前面,确保其优先渲染)
圣杯布局样式
第一步,将内容区域设置padding,为左右两栏留出空间。并设置内容区域的各栏宽度,中间栏宽度 100%,让其自适应,两边栏宽度固定。(宽 / 高根据实际情况设置,这是数值是为了演示方便)
main{
padding-left: 200px;
padding-right: 150px;
}
.center {
width: 100%;
height: 200px;
}
.left {
width: 200px;
height: 200px;
}
.right {
width: 150px;
height: 200px;
}
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210610140741381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70#pic_center)
第二步,为三栏分别添加 float: left; (为了演示效果,添加了背景颜色)
修改后的CSS代码如下:
.center {
float: left;
width: 100%;
height: 200px;
background-color: orange;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: red;
}
.right {
float: left;
width: 150px;
height: 200px;
background-color: green;
}
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210610142055770.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70#pic_center)
第三步,通过 margin-left: -100%; 结合相对定位 right: 200px;,设置左边栏。
修改后的CSS代码如下:
.left {
float: left;
width: 200px;
height: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background-color: red;
}
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210610142524462.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70#pic_center)
第四步,通过 margin-right: -150px,设置右边栏,完成圣杯布局。
修改后的CSS代码如下:
.right {
float: left;
width: 150px;
height: 200px;
margin-right: -150px;
background-color: green;
}
圣杯布局最终页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210610142629913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70#pic_center)
完整CSS代码:
body {
min-width: 550px;
}
header, footer{
height: 50px;
background-color: #ccc;
clear: both;
}
main{
padding-left: 200px;
padding-right: 150px;
height: 200px;
}
.center {
float: left;
width: 100%;
height: 200px;
background-color: orange;
}
.left {
float: left;
width: 200px;
height: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background-color: red;
}
.right {
float: left;
width: 150px;
height: 200px;
margin-right: -150px;
background-color: green;
}
圣杯布局总结
- 第一步,将内容区域设置padding,为左右两栏留出空间;
- 第二步,给三栏添加浮动;
- 第三步,通过 margin-left: -100%; 结合相对定位 right自身宽度,完成左边栏;
- 第四步,通过 margin-right 负自身宽度,完成右边栏;
双飞翼布局
双飞翼布局DOM结构
<header>this is the header</header>
<main>
<div class="middle">
<div class="center">
双飞翼布局
</div>
</div>
<div class="left">this is the left</div>
<div class="right">this is the right</div>
</main>
<footer>this is the footer</footer>
main包含三个div标签,class分别为middle、left、right。其中middle包含一个class为center的div标签(和圣杯布局一样,为了确保middle区域优先渲染,将middle放在left、right之上)
双飞翼布局样式
第一步,给middle中的center,设置margin为左右两栏留出空间。(为了页面效果,也为其他区域添加了宽高以及背景颜色)
.center{
margin: 0 200px; //现在最重要的是理解这一行代码
height: 200px;
background: red;
}
//下面是其他区域的样式,不用细看,了解即可
main{
background: purple; //背景颜色:紫色
clear: both;
}
.left{
width: 200px;
height: 200px;
background: green;
}
.right{
width: 200px;
height: 200px;
background: yellow;
}
.middle{
width: 100%;
height: 200px;
background: pink;
}
.center{
margin: 0 200px;
height: 200px;
background: red;
}
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210610204300777.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70)
第二步,同圣杯布局一样,为三栏分别添加 float: left;
修改后的CSS代码如下:
main{
background: purple;
clear: both;
}
.left{
float: left;
width: 200px;
height: 200px;
background: green;
}
.right{
float: left;
width: 200px;
height: 200px;
background: yellow;
}
.middle{
float: left;
width: 100%;
height: 200px;
background: pink;
}
.center{
margin: 0 200px;
height: 200px;
background: red;
}
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210610204706831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70#pic_center)
第三步,给left添加 margin-left: -100%;设置左边栏。
修改后的CSS代码如下:
main{
background: purple;
clear: both;
}
.left{
float: left;
width: 200px;
height: 200px;
background: green;
margin-left: -100%;
}
.right{
float: left;
width: 200px;
height: 200px;
background: yellow;
}
.middle{
float: left;
width: 100%;
height: 200px;
background: pink;
}
.center{
margin: 0 200px;
height: 200px;
background: red;
}
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210610204918856.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70#pic_center)
第四步,给right添加 margin-left: -200px;,设置右边栏,完成双飞翼布局。
完整CSS代码:
header, footer{
height: 50px;
background-color: #ccc;
clear: both;
}
main{
background: purple;
clear: both;
}
.left{
float: left;
width: 200px;
height: 200px;
background: green;
margin-left: -100%;
}
.right{
float: left;
width: 200px;
height: 200px;
background: yellow;
margin-left: -200px;
}
.middle{
float: left;
width: 100%;
height: 200px;
background: pink;
}
.center{
margin: 0 200px;
height: 200px;
background: red;
}
双飞翼布局最终页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210610205250769.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70#pic_center)
双飞翼布局总结
- 第一步,给middle中的center,设置margin为左右两栏留出空间;
- 第二步,同圣杯布局一样,给三栏添加浮动;
- 第三步,通过给left添加 margin-left: -100%; 完成左边栏;
- 第四步,通过给right添加 margin-left: -200px;,完成右边栏;
总结
圣杯布局 、双飞翼布局都使用float布局
圣杯布局 、双飞翼布局两侧都使用margin负值
为防止中间内容被两侧覆盖,圣杯布局使用的padding,双飞翼布局使用的是margin
结语
本小节到此就结束了,谢谢大家的观看!
如有问题欢迎各位指正