负边距、三栏布局

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

• 负边距使元素发生偏移时，元素未脱离文档流，相邻元素也会受影响。
• position:relative使元素偏移时，只改变自身的位置，其在文档流中的位置不会改变，不会影响相邻元素的位置。

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

• 父元素里有三个子元素，都浮动，然后父元素清除浮动。左右栏设置宽度。
• 左侧栏设置margin:-100%;
• 右侧栏margin:自身宽度的负值;
• 中间栏宽度100%，自适应

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

原理：利用负边距，相对定位来实现。
1.父元素里有三个子元素，都浮动，然后父元素清除浮动。
2.左侧栏设置margin:-100%;
3.右侧栏margin:自身宽度的负值;
4.中间栏宽度100%，自适应，
5.给左右侧栏一个position:relative；来控制位置。

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

原理：给中间的内容块加一个子元素，痛苦设置margin值形成三栏布局。
1.设置一个父元素里三个子元素，中间栏宽度自适应，左右栏设置宽度。
2.三个子元素动浮动，父元素清除浮动。
3.左侧栏设置margin:-100%;，右侧栏margin:自身宽度的负值;
4.给中间栏加一个子元素，通过设置左右margin值，形成三栏布局