一，负边距在让元素产生偏移时和position: relative有什么区别?
答：position:relative：只有元素本身会发生偏移，它还占据着原来的位置，后面的元素不会受到影响。
负margin：
当把元素的margin设为负数的时候，不仅元素本身会移动，覆盖其他元素，也会影响到后面的元素发生位置偏移。
二，使用负 margin 形成三栏布局有什么条件?
答：首先三栏都得浮动,父元素清除浮动。
左侧边栏设置margin-left:-100%;
右侧边栏设置margin-left为本身宽度的负值。
左右两边栏需要相对定位position:relative。
写html布局时，中间内容区块在需要放在三栏的第一位。
三，圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
答：
原理：利用负margin实现。
左右两个侧边栏宽度固定，中间主内容区块宽度自适应的布局方式。左右侧边栏区块和中间主内容区块都设置浮动，然后三栏的父元素设置padding，使两边留出空白。左侧边栏区块设置margin-left:-100%，右侧边栏区块设置margin-left值为区块本身的宽度再配合相对定位即可。
方式：
- 写出html，三栏的中间内容区在最上面，左右侧边栏在后面。
- 设置好宽高，内容区设置宽度为100%。并且都设置左浮动。
- 给父元素设置左右padding，padding值为左右侧边栏宽度，并且清除浮动。
- 左侧边栏设置margin-left:-100%;设置相对定位（relative）left自身宽度值。
- 右侧边栏设置margin-left:-100px;设置相对定位（relative）right自身宽度的负值。
圣杯布局
四，双飞翼布局的原理? 实现步骤?
答：
和圣杯远离几乎相同，双飞翼布局时候中间主体内容内加了一个DIV的包裹层。
- 形成三栏的三个块级元素必须浮动。
- 父容器利用伪类清除浮动；
- 主体main放前面，有利渲染和SEO；
- 主体容器内添加一个div容器，并且设置左右外边距；
- 左边栏margin-left:-100%, 右边栏 margin-left:-本身宽度；设置两个侧栏的宽度。
- 最终形成双飞翼布局.
双飞翼布局
与圣杯布局的区别：
- 主题main加了一个div容器，设置了左右marigin。
- 左右侧边栏不需要相对定位。
