圣杯布局和双飞翼布局
圣杯布局
效果：两边定宽，中间自适应，且中间部分优先加载
实现思路
- 浮动成一行
- 利用margin负值，padding将左右部分移动到中间部分的两边
- 利用定位将左右部分移出去，不覆盖中间部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局，左右固定中间自适应</title>
<style>
.head,.footer {
width: 100%;
height: 100px;
background-color: pink;
}
.content {
padding: 0 200px;
}
.left,.right {
float: left;
width: 200px;
height: 100px;
}
.center {
float: left;
background-color: red;
width: 100%;
height: 100px;
}
.left {
background-color: plum;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
background-color: purple;
margin-left: -200px;
position: relative;
right: -200px;
}
.clearfix {
zoom: 1;
}
.clearfix::after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<div class="head">头部</div>
<div class="clearfix content">
<div class="center">主区域</div>
<div class="left">左区域</div>
<div class="right">右区域</div>
</div>
<div class="footer">底部</div>
</body>
</html>
缺陷：中间部分的宽度必须大于左右两边，否则布局会错乱
双飞翼布局
针对圣杯布局的缺陷，双飞翼布局做了改变： 在center外面包裹一层容器后设置center的margin的值，将左右各收缩出左右部分的宽度，这样就不用使用定位将左右两部分移出去了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼布局，左右固定中间自适应</title>
<style>
.head,.footer {
width: 100%;
height: 100px;
background-color: pink;
}
.content {
float: left;
width: 100%;
background-color: red;
height: 100px;
}
.left,.right {
float: left;
width: 200px;
height: 100px;
}
.center {
margin: 0 200px;
}
.left {
background-color: plum;
margin-left: -100%;
}
.right {
background-color: purple;
margin-left: -200px;
}
.footer {
clear: both;
}
</style>
</head>
<body>
<div class="head">头部</div>
<div class="content">
<div class="center">主区域</div>
</div>
<div class="left">左区域</div>
<div class="right">右区域</div>
<div class="footer">底部</div>
</body>
</html>