CSS负边距与三栏布局

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

• position:relative：相对于原位置进行定位，元素不脱离文档流,不影响后面的元素
• 负margin：元素文档流的位置发生了变化,会影响到后面的元素。

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

• 三栏要放在一个父容器里，而且三栏都要浮动，父容器要清楚浮动。
• 位于中间可自适应的元素需出现在最前面，作为边栏的两个元素彼此前后顺序可以颠倒。
• 两边侧边栏定宽，中间部分宽度自适应

圣杯布局原理及实现步骤

• 原理:利用浮动,负margin以及position:relative使侧边栏占据父元素的左右padding的空间。
• 实现步骤:
• 1.在父容器下建立三栏,主体放在首位,三栏全部左浮动
• 2.主体宽度为父元素100%,侧边栏宽度应对照父容器padding(如需留间隙则宽度小于padding,不需要则相等)
• 3.为边栏设置负margin,左边栏margin-left: -100%，右边栏margin-left值等于该边栏宽度的负值。
• 4.设置position: relative,左边栏left值为父容器padding负值；右边栏，left值为父容器padding。
• 5.父元素利用伪类元素after清除浮动。

双飞翼布局原理及实现步骤

• 原理:利用浮动,margin
• 实现步骤:
• 1.在父容器下建立三栏,主体放在首位,三栏全部左浮动
• 2.主体宽度为父元素100%,侧边栏宽度自定义
• 3.为边栏设置负margin,左边栏margin-left: -100%，右边栏margin-left值等于该边栏宽度的负值。
• 4.给主体建立一个子元素,子元素的左右margin应对照侧边栏的宽度(如需留间隙则margin大于侧边栏宽度,不需要则相等)
• 5.父元素利用伪类元素after清除浮动。