box-sizing挽救布局

常见的三栏布局有圣杯布局和双飞翼布局，在这里我们不深究圣杯布局跟双飞翼布局的起源，说一下如何进行box-sizing如何挽救圣杯布局。

圣杯布局如下图所示

页面

圣杯布局

圣杯布局的原理：

1.首先布局上来说就是常见的header、container、footer三层结构，在中间的container层中分为上、中、下三层，利用三组div标签来表示。

2.所谓的圣杯布局其实就是在container这一层中做文章，左右两边的div是定宽，而中间的div是自适应的。

3.要让三个div元素位于同一行中需要div浮动，而且是左浮动，而且在html结构中要让中间的一层位于最上面，代码如下：

html结构

4.再用css编写样式，这时候唯一注意的是要用负边距来控制左右两个div.类名为left的margin-left设置为-100%；另一个设置对应的宽度，这时候左右两边会漂移会达到上图的结果吗？答案是不能，反而会出现右边的漂浮在下面上不去，除非你将右边的margin-left的负值增大，不等于right的宽度值。

上不去的盒子

为什么会出现这种问题，这个地方就牵扯到一个知识点，关于盒子的模型问题。

box-sizing属性重新定义计算盒子宽度的方式。

在css中盒模型被分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，它们之间的相同之处都是对元素计算尺寸的模型，具体说就是对元素的width、height、padding、和border以及元素实际尺寸的计算关系，不同之处是两者的计算方法不一致。

1）W3C的标准盒模型

外盒尺寸计算（元素空间尺寸）

element空间高度 = 内容高度+内距+边框+外距

element空间宽度 = 内容宽度+内距+边框+外距

内盒尺寸计算（元素大小）

element高度 = 内容高度+内距+边框（height为元素高度）

element宽度 = 内容宽度+内距+边框（width为元素宽度）

2）IE传统下盒模型（IE6以下，不包含IE6.0版本或QuirkMode下IE5.5+）

外盒尺寸计算（元素空间尺寸）

element空间高度 = 内容高度+外距（height为元素高度、内距、边框）

element空间宽度 = 内容宽度+外距（height为元素宽度、内距、边框）

内盒尺寸计算（元素大小）

element高度 = 内容高度（height为元素高度、内距、边框）

element宽度 = 内容宽度（width为元素宽度、内距、边框）

盒子模型

在IE5.x以及IE6-7的怪异模式下，边框和内距都包含在宽度或高度中，而标准的浏览器中，宽度和高度仅仅包含了内容宽度，除去了边框和内距，给web效果处理带来了麻烦。

box-sizing 解决了这种问题，语法如下：

box-sizing语法

这里出现right盒子上不去的原因就是这里默认是content-box,所以我们在设置box-sizing的属性值为border-box,这样right盒子设置跟盒子宽度相同的偏移值就可以上去了。

成品图

设置box-sizing之后的布局

这一步完成之后，剩下的就是设置container盒子的padding-left和padding-right，然后再设置left盒子和right盒子加上relative定位，加上left和right数值就可以得到对应的圣杯布局，对于双飞翼布局也是同理。

最后，贴上我的关于圣杯布局的css代码。

第一段css 第二段css