task 12

负边距在让元素产生偏移时和position: relative有什么区别?
负边距通过元素的margin值为负值让元素产生偏移，他会改变元素的位置，影响后面元素；
position：relative，让元素相对自身产生偏移，不影响后面元素的位置。

使用负 margin 形成三栏布局有什么条件?

1. 3个子盒子相对父容器都float:left;
2. 中间栏盒子宽度为100%；两边宽度固定；
3. 左边盒子便宜－100%，右边盒子偏移负本身宽度；

圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤

1. 父元素包裹三个子元素（主元素与两边元素），其中主元素要放在最上面，width：100%。
2. 设置父元素的左右padding与两边元素的宽度一致。
3. 为三个子元素设置float属性，值要统一。父元素要清除浮动。
4. 为两边元素设置负margin，将其定位在主元素内部的两边。
5. 为两边元素设置position:relative;通过left、right，将其定位在主元素的两边。

双飞翼布局的原理? 实现步骤?
类似于圣杯布局，但是不需要给父元素设置padding，以及两边元素设置相对位置。
只需要给中间元素里在声明一个div设置margin为两边元素的宽度。就可以实现三栏布局。

代码
code1
code2
code3
code4
code5