负边距在让元素产生偏移时和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清除浮动。
