圣杯布局是来源于该布局效果类似圣杯而得名。简单来说，就是指三行三列布局；
圣杯布局核心：主要是实现中间主体部分中的左右定宽+中间自适应的布局效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style>
/*
圣杯布局 - 核心 左右定宽 中间自适应 center的结构在left和right的上面
1. 三个列在一行显示 float:left;
2. 中间留出的一些留白(内间距padding) 放左右的容器
3. 移动元素 - 把left移动到center的左边
把right移动到center的右边
利用margin的负值的技巧 - 他原本的位置
利用定位方位的技巧 - 我们理想的位置
注意: 方位 top、bottom、left、right + position
position: relative， 不脱离文档流 只是为了让方位起作用
*/
* {
margin: 0;
padding: 0;
}
#parent {
height: 300px;
/* 给左右两边留出间距 - 为了放左右两个容器 */
padding-left: 300px;
padding-right: 300px;
}
#left,
#center,
#right {
/* 第一步: 三个容器在一行显示 => 已经在一行 但是我们看到的不在一行的原因：
200 + 200 + 100% > 100% 放不下了 所以就掉下去了 */
float: left;
height: 300px;
font-size: 50px;
}
#left,
#right {
300px;
}
#left {
/* 左 定宽 */
300px;
background-color: #c9394a;
/* 第三步: 进行位置的移动 */
/* 因为left在center的下面，所以至少要移动center的宽度，center的宽度是100% */
/* 【因为left、center、right三个元素浮动，left紧挨着center，所以设置margin-left: -100%，会把left移动到center的左边】 */
margin-left: -100%;
position: relative;
left: -300px;
}
#center {
/* 中间 自适应 */
100%;
background-color: green;
}
#right {
/* 右 定宽 */
300px;
background-color: yellowgreen;
/* 第三步: 进行位置的移动 */
margin-left: -300px;
position: relative;
right: -300px;
}
</style>
</head>
<body>
<!-- 三列布局 - 左右定宽 中间自适应 => 圣杯布局 center在left和right的结构的前面 -->
<div id="parent">
<div id="center">中间</div>
<div id="left">左边</div>
<div id="right">右边</div>
</div>
<!-- 正常三列布局 -->
<!-- <div id="parent">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div> -->
</body>
</html>
