负边距在让元素产生偏移时和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：本身宽度，用于上浮

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