简单老旧的三栏布局方式:圣杯布局、双飞翼布局
前言
随着前端技术的不断发展,flex和grid布局是趋势所在,但是一些项目仍然使用圣杯布局和双飞翼布局方式,学习其实现方法也可以对我们对于html.css的盒模型理解加深。一、圣杯布局
1.代码如图
<!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>
<style>
body {
width: 80%;
text-align: center;
margin: 0 auto;
min-width: 600px;
}
header,
footer {
height: 100px;
background-color: darkgray;
border: 1px solid #ccc;
}
.main,
.left,
.right {
float: left;
height: 200px;
}
/* 清楚浮动 */
.clearfix::after {
content: '';
display: block;
clear: both;
}
.bd {
padding: 0 200px;
background-color: darkorchid;
line-height: 200px;
}
.left {
width: 200px;
margin-left: -200px;
background-color: darkgreen;
position: relative;
left: -200px;
}
.right {
width: 200px;
background-color: darkkhaki;
margin-left: -200px;
position: relative;
right: -200px;
}
.main {
width: 100%;
background-color: darkorange;
}
</style>
</head>
<body>
<header></header>
<div class="bd clearfix">
<div class="main">主体</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<footer></footer>
</body>
</html>
2.效果图
3.原理解释
1.未添加浮动和定位时如图,此时,由于主体、左侧、右侧均为块元素,效果如图所示(已设置bd盒子padding左右内边距200px)
2.主体和左侧右侧添加浮动后,由于主体的宽度与父盒子宽度一致,所以左侧和右侧两个盒子并未不能与主体盒子在一行放开,此时被挤在第二行,想让左侧盒子上移一层值主体最左边,需要添加外边距,外边距为父盒子的宽度,但父盒子宽度为变化的值,所以设置左侧外边距为margin-left:100%;
3.添加左侧的外边距后,右侧由于向左浮动,变成如下图所示的位置,此时也需要将右侧上移至主体行的最右侧,所以也需要添加一个负的外边距值,值为右侧盒子的宽度。
4.添加完浮动后的效果如下,但此时由于紫色盒子的内边距存在,左侧和右侧盒子将盖住主体的一部分内容,此时需要添加定位将左侧盒子和右侧盒子继续移动,左侧盒子需要移动左侧盒子的距离,也就是紫色盒子的左内边距 ,右侧盒子同理。
5.添加定位后的图如下 此时拖动改变窗口大小,主体部分会动态变化,而左侧和右侧大小固定不变。
二、双飞翼布局
1.代码如下
<!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>
<style>
header,
footer {
width: 100%;
height: 100px;
background-color: gainsboro;
}
body {
width: 80%;
margin: 0 auto;
text-align: center;
}
.box {
float: left;
height: 100px;
width: 100%;
height: 100px;
}
.main {
margin: 0 200px;
height: 100%;
background-color: darksalmon;
}
.left {
float: left;
width: 200px;
height: 100px;
margin-left: -100%;
background-color: darkseagreen;
}
.right {
float: left;
width: 200px;
height: 100px;
margin-left: -200px;
background-color: dimgray;
}
.clearfix {
contain: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<header></header>
<div class="box">
<div class="main">主体</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
<footer class="clearfix"></footer>
</body>
</html>
代码如下(示例):
2.效果图
2.原理解释
双飞翼布局未采用定位,而是将主体部分单独包裹在一个盒子中,对该盒子设置浮动,对主体盒子只进行外边距的设置,左边距为左侧盒子的宽度,右边距为右侧盒子的宽度,此时对左侧盒子,右侧盒子,主体部分的父盒子添加浮动后,主体先排列上,然后左侧盒子和右侧盒子设置负外边距使其处于同一行,实现最终效果。
注意事项
1.由于盒子添加浮动后会产生塌陷问题,所以要注意清除浮动。
2.使用css3新盒子模型会简化代码。
1.相比较两种布局方式:
1)圣杯布局较为直观。
2)双飞翼布局css代码量较少。
问题解答
1.为什么不能一个左浮动,一个右浮动?
一左一右浮动会使结构变得不稳定,尽量全部是使用左浮动。
2.为什么一定要把主体部分放在前面?
以为代码是从上往下执行的,主体部分是核心内容,一般优先级更高。
3.为什么不用calc?
css表达式是一种强大且危险的方式,w3c也不推荐。