标签：圣杯 中间 布局 双飞翼 宽度 盒子 200px margin left
圣杯和双飞翼布局
1.什么是圣杯布局和双飞翼布局？
1.圣杯布局和双飞翼布局有共同的特性：两遍的宽度不变，中间的区域进行自适应。但是中间的区域放在左侧！就是cener，left，right
2.还可以使用flex布局来实现，中间区域的自适应。
3.今天先介绍1的两种布局
2.圣杯布局的步骤
1.设置一个容器，放三个盒子
2.设置两侧盒子的宽度。固定的宽度
3.设置中间的宽度等于容器的宽度（100%）
4.设置容器的padding的宽度等于两侧盒子的宽度。（padding：0 两侧盒子的宽度）
5.让容器内的盒子在同一个方向浮动（float：left）
6.设置左边的盒子margin-left=-100%；
7.通过定位设置左侧盒子的位置，让左侧盒子不要盖住中间的区域,position:relative left=-自身的宽度
8.设置右边的盒子的margin-left=-自身盒子的宽度（margin-left=设置的宽度的宽度）
9.通过定位设置右边盒子，让右边的盒子不要盖住中间的区域，position:relative left=自身盒子的宽度
10.防止缩放变形，设置一个最小宽度
<!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>
*{
margin: 0;
padding: 0;
}
.left,.right{
width: 200px;
height: 200px;
background: red;
float: left;
}
.center{
width: 100%;
height: 200px;
background: aqua;
float: left;
}
.box{
padding: 0 200px;
min-width: 500px;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
margin-left: -200px;
position: relative;
left: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="center">中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个中间盒子的内容那个</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
3.双飞翼布局
1.设置一个容器，放三个盒子
2.设置两侧盒子的宽度。固定的宽度
3.设置中间的宽度等于容器的宽度（100%）
4.让容器内的盒子在同一个方向浮动（float：left）
5.给center添加一个子div，给子元素设置margin:0 两侧盒子的宽度；
6.设置左侧盒子的margin-left=-100%;
7.设置右侧盒子的margin-left=-自身的宽度；
<!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>
*{
margin: 0;
padding: 0;
}
.left,.right{
width: 200px;
height: 200px;
background: red;
float: left;
}
.center{
width: 100%;
height: 200px;
background: blue;
float: left;
}
.center>.center-in{
margin: 0 200px;
height: 200px;
background: aqua;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
</style>
</head>
<body>
<div class="box">
<div class="center">
<div class="center-in">
中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容中间盒子的内容
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
4.双飞翼和圣杯布局的不同
1.其实两者，都差不多。都是两侧宽度固定，中间自适应，自适应的盒子放在左侧
2.双飞翼布局是圣杯布局的升级版，更加简便，只是又添加了一个盒子而已
3.双飞翼布局不再设置自身的定位，移动防止挡住中间盒子的区域
标签：圣杯,中间,布局,双飞翼,宽度,盒子,200px,margin,left 来源： https://blog.csdn.net/weixin_49601466/article/details/116982997
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。