三种方式实现圣杯布局

圣杯布局也是实现三栏布局的方法，左右定宽，中间自适应，中间内容优先加载。

最原始的圣杯布局是通过负边距、左浮动、相对定位、内边距实现的，然后我在实践中也发现了另外两种实现方式，分别是通过怪异盒模型和flex布局

HTML结构都是相同的，我先放在这里

我们先看下最祖先的方式吧

通过负边距、左浮动、相对定位、内边距实现

1.首先给main一个100%宽度，left和right分别给一个固定的宽度，三者高度和父盒子一样高，都实现左浮动

效果如下，由于main宽度已经撑满了整个父盒子，left和right被挤到父盒子下面

所以我们要让left和right上去

2.使用负边距，给left添加margin-left：-100%（向左移动一个父盒子的宽度），给right添加一个负right宽度的左边距（向左边移动一个right盒子的宽度）

可以看到left和right成功移动到我们想到的位置了

嗯，是的，就是酱紫的滴，应该没有什么大问题了，收工收工~

使用怪异盒模型的区别就是这里不需要用定位，在mian上加padding替代container上的padding，然后将mian修改为怪异盒模型 box-sizing: border-box，我试了下效果是一样滴

这个不得了了，什么浮动、内边距、外边距、怪异盒模型统统都不要