目录
一、序言：
二、什么是圣杯布局？
三、怎么实现圣杯布局？
四、负margin的原理剖析
一、序言：
最近在复习CSS布局的时候，想试着写一些经典的布局的案例，然后就写到了圣杯布局。CSS布局一直是前端开发中的重要课题，而圣杯布局则是一种经典的布局方式。刚好还发现了一些有趣的地方或者说是坑点，所以写了一篇文章在这里记录一下，也欢迎大家一起学习和探讨。
二、什么是圣杯布局？
首先我们得知道什么是圣杯布局，它的布局方式是怎样的呢？
圣杯布局是指，一个网页中有三列，其中中间的一列是主要的内容区域，两侧的列则是辅助 内容区域。它们的宽度可以根据不同的需求而定，但内容区的宽度要始终保持为页面宽度减去两侧列的宽度。具体来说，圣杯布局中：
- 主要内容区的宽度为auto。
- 左右两侧列的宽度可以固定，可以是百分比，也可以是最大宽度。
- 三列的视觉顺序是：左侧列、主要内容区、右侧列。
! ! ! 注意 ：圣杯布局中这三列的渲染顺序为：主要内容区、左侧列、右侧列，所以布局的HTML结构如下所示：
<header>头部区域</header>
<div class="wrapper">
<div class="middle">中间自适应区域</div>
<div class="left">左边定宽区域</div>
<div class="right">右边定宽区域</div>
</div>
<footer>底部区域</footer>
三、怎么实现圣杯布局？
现在，我们简单地了解了什么是圣杯布局之后，就来想想该怎么实现它呢？
实现圣杯布局的方法有很多种，其中一种比较典型的做法是使用浮动和负 margin 来实现。
我们先来做做看：
- 首先，我们用 HTML 结构构建出三列内容区域，其中主内容区放在前面，两侧列放在后面。并将它们的 CSS 样式设为float:left。
<div class="container">
<div class="main">主要内容区</div>
<div class="left">左侧内容区</div>
<div class="right">右侧内容区</div>
</div>.container, .main, .left, .right {
float: left;
}
.main {
width: auto;
}
2.然后，我们再给每一个子元素添加一个宽度，例如：主要内容区main宽度为100%。
.main {
width: 100%;
}3.再使用margin-left和margin-right负值的方式，让左、右两个元素移动到相应的位置上。margin-left:-100%的含义是左侧元素向左移动主元素的宽度为100%的距离，也就是挤到了主内容区的左边面。同理，margin-right:-200px表示右侧元素向左移动200px的距离，然后给左、右两个元素定宽度。
.left {
width: 200px;
margin-left: -100%;
}
.right {
width: 200px;
margin-right: -200px;
}4.最后，为了更加清楚地看到布局效果，我们通过添加一个容器来给左、右两侧的元素设置背景色。
完整的代码如下所示：
<style>
.container, .main, .left, .right {
float: left;
}
.main {
width: 100%;
}
.left {
width: 200px;
margin-left: -100%;
background-color: #eee;
}
.right {
width: 200px;
margin-right: -200px;
background-color: #ccc;
}
</style>
<body>
<div class="container">
<div class="main">主要内容区</div>
<div class="left">左侧内容区</div>
<div class="right">右侧内容区</div>
</div>
</body>四、负margin的原理剖析
margin-left:-100% 的含义是表示左侧元素向左移动主要元素的宽度为100%的距离，也就是挤到了主内容区的左边面。为什么要使用这种方式呢？主要是因为，我们需要让左、中、右三列的所在位置左对齐，而正常情况下它们是依次排列的。
这时候，如果我们给左、右两个元素设置margin-left和margin-right，三个元素虽然左对齐了，但是两侧的内容覆盖了一部分主要内容区的位置。那么如何解决这个问题呢？
这时候，我们就可以使用 margin-left：-100% 这个技巧，让左侧元素先向左移动主要内容区的宽度，即占用了主要内容区的位置，然后再把左侧元素的宽度设置为需要的值，这样就可以实现左对齐，同时也不会把主要内容区的位置覆盖了。
总之，margin-left：-100%这个技巧是实现圣杯布局中一种比较常用的方式，它可以让三列内容左对齐，同时不影响主要内容区的位置。当然，这种技巧也需要注意一些坑点，比如，左侧宽度要小于主要内容区宽度，否则会造成重叠等问题。
最后，使用浮动和负margin只是实现圣杯布局多种方式的其中一种，还有更多更简便的方法。比如flex布局，给主内容区设置 flex: 1; 即可。有兴趣的朋友可以去搜索其它地实现方式，并自己动手尝试一下。
路过的小伙伴可以点个赞支持一下，毕竟博主深夜码文不易，自知写的不好，以后会慢慢加油的。
