是什么？
双飞翼布局是一种常见的网页布局方式，具有两个侧边栏和一个中间内容区域。
与圣杯布局不同的是，双飞翼布局将三个部分放在同一层级的div中，而且左右两个侧边栏的宽度可以不固定，适应更加灵活。
实现方式
方式一：【 flex实现双飞翼布局】
1、给中部父盒子设置宽度100%设置display：flex;，
2、给左侧和右侧盒子设置固定的宽度，高度固定值
3、中间的盒子设置flex-grow: 1;，宽度不设置，高度固定值
4、头部和底部设置宽度100%，高度固定值
<!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>
html,body{
margin:0;
padding:0;
}
.flex {
width: 100%;
display: flex;
text-align: center;
}
.left {
height: 400px;
width: 200px;
text-align: center;
background-color: blue;
}
.right {
height: 400px;
width: 200px;
text-align: center;
background-color: blue;
}
.center {
flex-grow: 1;
height: 400px;
text-align: center;
background-color: aqua;
}
header {
width: 100%;
height: 100px;
text-align: center;
background-color: pink;
}
footer {
width: 100%;
height: 100px;
text-align: center;
background-color: pink;
}
</style>
</head>
<body>
<header>头部</header>
<div class="flex">
<div class="left">左侧盒子</div>
<div class="center">中部盒子</div>
<div class="right">右侧盒子</div>
</div>
<footer>底部</footer>
</body>
</html>方式二：【calc实现双飞翼布局】
1、左右两个盒子设置固定的宽度，高度固定值
2、中间盒子的宽度设置为width: calc(100% - “左侧盒子宽度” - “右侧盒子宽度”);注意减号两边的空格，高度固定值
3、三个盒子设置float: left;排在同一行显示，则可以实现双飞翼布局
4、头部和底部设置宽度100%，高度固定值
<!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>
.left {
height: 400px;
width: 200px;
text-align: center;
background-color: blue;
float: left;
}
.right {
height: 400px;
width: 200px;
text-align: center;
background-color: blue;
float: left;
}
.center {
height: 400px;
width: calc(100% - 200px - 200px);
background-color: aqua;
text-align: center;
float: left;
}
header {
width: 100%;
height: 100px;
text-align: center;
background-color: pink;
}
footer {
width: 100%;
height: 100px;
text-align: center;
background-color: pink;
clear: both;
}
</style>
</head>
<body>
<header>头部</header>
<div class="box">
<div class="left">左侧盒子</div>
<div class="center">中部盒子</div>
<div class="right">右侧盒子</div>
</div>
<footer>底部</footer>
</body>
</html>方式三：【定位实现双飞翼布局】
1、左侧盒子与右侧盒子设置固定宽度，高度固定值，添加左浮动
2、中间盒子宽度设置100%，设置左浮动，高度固定值
3、大盒子左右的padding值分别为左右侧盒子的宽度
4、左侧盒子 margin-left: -100%;，position: relative;，left: -“左侧盒子的宽度”;
5、右侧盒子 margin-left: -“右侧盒子的宽度”px;，position: relative;， right: -“右侧盒子的宽度”px;
6、头部和底部设置宽度100%，高度固定值
<!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>
html,body{
margin: 0;
padding: 0;
}
.box {
padding: 0 200px;
text-align: center;
}
header {
width: 100%;
height: 100px;
text-align: center;
background-color: pink;
}
footer {
width: 100%;
height: 100px;
text-align: center;
background-color: pink;
clear: both;
}
.center {
width: 100%;
height: 200px;
text-align: center;
background-color: blue;
float: left;
}
.left {
float: left;
margin-left: -100%;
width: 200px;
height: 200px;
text-align: center;
background-color: aqua;
position: relative;
left: -200px;
}
.right {
margin-left: -200px;
width: 200px;
height: 200px;
text-align: center;
background-color: green;
float: left;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<header>头部</header>
<div class="box">
<div class="center">中部盒子</div>
<div class="left">左侧盒子</div>
<div class="right">右侧盒子</div>
</div>
<footer>底部</footer>
</body>
</html>