任务12：负边距、三栏布局

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

负边距会改变元素在文档流中的位置，其他相邻元素的位置也会随之偏移；而相对定位只是相对自身原始位置进行偏移，不会影响相邻元素的位置。

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

（1）形成三栏的块级元素都浮动；
（2）在三栏块级元素的父容器上添加after来清除浮动；
（3）左侧边栏设置margin-left: -100%；右侧边栏设置margin-left: -自身的宽度；
（4）在父容器上设置padding；
（5）给两边侧边栏设置相对定位，左侧边栏再设置为left: -padding值；右侧边栏设置为left: padding值。

设置padding值三栏布局

第二种方法：在主内容里面添加一个区块，再设置两侧边栏的margin。

第二种三栏布局方法

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

原理同使用负margin形成三栏布局是一样的，步骤：
（1）形成三栏的块级元素都浮动；
（2）在三栏块级元素的父容器上添加after来清除浮动；
（3）左侧边栏设置margin-left: -100%；右侧边栏设置margin-left: -自身的宽度；
（4）在父容器上设置padding；
（5）给两边侧边栏设置相对定位，左侧边栏再设置为left: -padding值；右侧边栏设置为left: padding值。

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

（1）形成三栏的块级元素都浮动；
（2）在三栏块级元素的父容器上添加after来清除浮动；
（3）左侧边栏设置margin-left: -100%；右侧边栏设置margin-left: -自身的宽度；
（4）在主内容区域里添加一个容器，形成一个区块，以此覆盖原来的主内容区域，再设置两侧边栏的margin。