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

问答

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

负边距使元素相对于文档流进行偏移，使元素在文档流中的位置发生了改变，其他元素也会随着文档流改变而发生偏移；position:relative使元素相对于自身位置进行偏移，而元素在文档流中的位置并没有改变，其他元素也不会因此发生偏移。

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

• 三栏元素都是浮动元素
• 在三栏元素的父容器上清除浮动
• 中间栏要放在文档流前面以优先渲染
• 两侧栏的宽度固定，中间栏宽度随浏览器宽度自适应（最好设置最小宽度）

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

原理：先利用浮动和负边距实现三栏布局，再用相对定位调整两边的侧栏。
步骤：

1. 创建一个包裹三个子元素的父容器，左右栏固定宽高，中间栏宽度自适应，并给父元素设置左右padding，预留左右两栏的位置
2. 给所有子元素设置浮动（父容器清除浮动），并给左右边栏设置负边距使其都跑到上面
3. 给左右边栏设置相对定位，移动到左右两栏的预留位置

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

原理：先利用浮动和负边距实现三栏布局，再添加额外标签调整中间栏。
步骤：

1. 创建一个包裹三个子元素的父容器，左右栏固定宽高，中间栏宽度自适应
2. 给所有子元素设置浮动（父容器清除浮动），并给左右边栏设置负边距使其都跑到上面
3. 在中间栏里添加额外标签，将其设置左右padding，将左右边栏的位置给让出来