负边距、三栏布局

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

负边距在让元素产生偏移时，相邻元素的位置也会跟着它移动。
而position: relative让元素产生偏移时，只是改变自身的位置，它在文档流中原本占用的空间不会改变，不会影响其他元素。

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

• 子容器都要设置浮动
• 父容器要清除浮动
• 中间容器宽度要设为100%（这样才会占满）
• 使用负margin使左侧栏向左偏移100%（这里的宽度针对父容器），右侧栏向左偏移自身宽度的100%
• 父容器设置padding值来控制中间栏的宽度
• 用position:relative给左右侧边栏调整位置

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

实现原理同上题。
步骤：

1. 写出页面结构，父容器包裹左右侧边栏和中间内容栏
2. 三个容器都设置浮动，并且父容器要清除浮动，中间栏宽度设100%
3. 使用负margin使左侧栏向左偏移100%（这里的宽度针对父容器），右侧栏向左偏移自身宽度的100%
4. 父容器设置padding值来控制中间栏的宽度
5. 用position:relative给左右侧边栏调整位置
   demo

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

前面和圣杯是一样的，区别只在于最后中间容器宽度的控制方法。

1. 写出页面结构，父容器包裹左右侧边栏和中间内容栏
2. 三个容器都设置浮动，并且父容器要清除浮动，中间栏宽度设100%
3. 使用负margin使左侧栏向左偏移100%（这里的宽度针对父容器），右侧栏向左偏移自身宽度的100%
4. 在中间容器的内部增加一个div来包裹内容，设置这个div的左边距和右边距为两个侧边栏的宽度，从而给两边的侧边栏空出位置。
   demo

本教程版权归作者和饥人谷所有，转载须说明来源！