圣杯布局和双飞翼布局

1负边距在让元素产生偏移时和position: relative有什么区别?

负边距产生位移的时候，其后的元素也跟着偏移。
position:relatvie 产生位移的时候，其元素原先在文档流中的位置保留，其后的元素不会占据该元素的位置。

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

随浏览器宽度而改变的内容就是box1的位置，就是必须是父元素直接的第一个儿子元素，而且第一个儿子的宽度是100%,两端定宽的元素(就是不随浏览器宽度而改变的元素)放在其后。

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

就是页面中至少有一端宽度是固定的（也可以是两端都固定的元素），那剩下的内容是可以随着浏览器宽度改变而改变的。

步骤
1. 一个父元素包裹三个子元素，随浏览器宽度变化的元素必须是该父元素的第一个儿子元素。
2. 父元素的三个儿子元素都要浮动。
3. 第二个、三个儿子宽度都要固定。
4. 因为第一个儿子元素宽度是100%,所以第二个、第三个元素浮动不上去。
5.设置左面固定宽度的元素margin-left:-100%;
6.设置右面固定宽度的元素margin-right:-宽度px;
7.父元素添加padding属性 0 宽度PX(第二个、三个儿子元素宽度)
8.第二个、第三个儿子进行相对位移，position:relative 移动位置是第二个第三个元素的宽度。

双飞翼布局的原理? 实现步骤?

  步骤
         1. 一个父元素包裹三个子元素，随浏览器宽度变化的元素必须是该父元素的第一个儿子元素。
         2. 父元素的三个儿子元素都要浮动。
         3. 第二个、三个儿子宽度都要固定。
         4. 因为第一个儿子元素宽度是100%,所以第二个、第三个元素浮动不上去。
         5.设置左面固定宽度的元素margin-left:-100%;
         6.设置右面固定宽度的元素margin-right:-宽度px;
         7.给第一个儿子添加一个DIV 包裹层。
         8.给包裹层添加外边距。