是什么？
双飞翼布局是一种常见的网页布局方式，具有两个侧边栏和一个中间内容区域。
与圣杯布局不同的是，双飞翼布局将三个部分放在同一层级的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>
