负边距在让元素产生偏移时和position: relative有什么区别?
负边距在让元素产生偏移时，相邻元素的位置也会跟着它移动。
而position: relative让元素产生偏移时，只是改变自身的位置，它在文档流中原本占用的空间不会改变，不会影响其他元素。
使用负 margin 形成三栏布局有什么条件?
- 子容器都要设置浮动
- 父容器要清除浮动
- 中间容器宽度要设为100%（这样才会占满）
- 使用负margin使左侧栏向左偏移100%（这里的宽度针对父容器），右侧栏向左偏移自身宽度的100%
- 父容器设置padding值来控制中间栏的宽度
- 用position:relative给左右侧边栏调整位置
圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
实现原理同上题。
步骤：
- 写出页面结构，父容器包裹左右侧边栏和中间内容栏
- 三个容器都设置浮动，并且父容器要清除浮动，中间栏宽度设100%
- 使用负margin使左侧栏向左偏移100%（这里的宽度针对父容器），右侧栏向左偏移自身宽度的100%
- 父容器设置padding值来控制中间栏的宽度
- 用position:relative给左右侧边栏调整位置
demo
双飞翼布局的原理? 实现步骤?
前面和圣杯是一样的，区别只在于最后中间容器宽度的控制方法。
- 写出页面结构，父容器包裹左右侧边栏和中间内容栏
- 三个容器都设置浮动，并且父容器要清除浮动，中间栏宽度设100%
- 使用负margin使左侧栏向左偏移100%（这里的宽度针对父容器），右侧栏向左偏移自身宽度的100%
- 在中间容器的内部增加一个div来包裹内容，设置这个div的左边距和右边距为两个侧边栏的宽度，从而给两边的侧边栏空出位置。
demo
本教程版权归作者和饥人谷所有，转载须说明来源！
