负边距在让元素产生偏移时和position: relative有什么区别?
- 负margin会对后面的元素产生影响
- position：relative只是在视觉上产生偏移，元素本身在文档流中的位置不变
使用负 margin 形成三栏布局有什么条件?
- 三栏元素都要浮动
- 父容器清除浮动，并且不能用overflow清除浮动
- 中间栏要放在文档流最前面进行渲染
- 左边设置margin-left：100px；右边设置margin-left：本身宽度
圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
- 原理：元素设置浮动后，可以用负margin实现位于两侧的效果，中间栏元素用左右padding实现居中，左右栏元素用position：relative实现顶宽并且不和中间栏重合
- 步骤：
1.设置container的左右padding，用于预留左右边栏的空间
2.给所有元素设置定位和浮动，用于设置左右两栏偏移
3.给左侧边栏设置right：本身宽度，让其移动至container最左边，margin-left设置100%（center的宽度）
4.给右侧边栏设置left：本身宽度，让其移动至container最右边，margin-left设置本身宽度
双飞翼布局的原理? 实现步骤
- 原理：元素设置浮动后，可以用负margin实现位于两侧的效果，中间栏里定义一个新的块，用来放置内容
- 步骤：
1.中间栏中定义一个div，margin-left为左边栏的宽度（可以大于），margin-right为右边栏的宽度（可以大于）
2.给所有元素设置定位和浮动，用于设置左右两栏偏移
3.左边栏设置margin-left：100%，用于上浮
4.右边栏设置margin-left：本身宽度，用于上浮
本教程版权归饥人谷和作者所有，转载须说明来源。
