一、什么是圣杯布局
圣杯布局：左右两个盒子固定宽度， 中间盒子自适应
二、圣杯布局的设计原则：
我们现在来思考自适应这个问题，其本质就是 left 和 right 覆盖一整个大的center，
然后center使用padding把内容左右留出left和right相应的宽度。
可是，现在如何来覆盖呢？
这里使用 margin + 负值 的策略，margin-left：-100%，表示移动到最右侧，而margin-right: -100% 表示移动到盒子的最左侧
然后使用 box-sizing: border-box; 对center时添加padding时不会撑开盒子的大小！！
三、整体的设计思路：
1. 整个盒子宽度固定下来；
2. 里面三个子盒子 ，依次是center,left,right，对其设置浮动；
3. center盒子width设置100%，left和right盒子设置为固定的px值；
4. 对left这边，margin-right: -100%，往左边移动，另外对right这边，margin-right:100%，往右边移动
5. 对center设置 padding-left: 200px;box-sizing: border-box; padding-right: 100px; 避免覆盖里面的内容，这个其实很简单。
四、下面是完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 80%; /* %相对单位，相对于盒子的宽度来决定*/
height: 200px;
border: 1px solid #000;
margin: 100px auto;
}
.child{
height: 200px;
float: left;
}
.center{
width: 100%;
background-color: skyblue;
padding-left: 200px;
box-sizing: border-box;
padding-right: 100px;
}
.left{
width: 200px;
background-color: pink;
margin-left: -100%;
}
.right{
width: 100px;
background-color: green;
margin-right: -100px;
}
</style>
<!--
圣杯布局：左右两个盒子固定宽度， 中间盒子自适应
1、结构布局比较特殊： center的盒子放在最前面
2、通过给左盒子margin-left: -100%; 右盒子margin-left: -右盒子宽度 ，让左右俩盒子在正确的位置
3、第2步会导致中间盒子被覆盖。所以给中间盒子加padding-left 和padding-right 和box-sizing: border-box;
-->
</head>
<body>
<div class="box">
<div class="child center">center </div>
<div class="child left">left</div>
<div class="child right">right</div>
</div>
</body>
</html>
标签：box,right,圣杯,center,100%,html,margin,css,left From： https://www.cnblogs.com/qwe-asd-zxc-nm/p/17685331.html