问答
1. 负边距在让元素产生偏移时和position: relative有什么区别?
答：
2. 使用负 margin 形成三栏布局有什么条件?
答：
3. 圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
答：
- 通过负边距与父容器的
padding值来实现左右栏固定与中间主内容自适应的布局
- HTML结构
<!--html结构-->
<div class="container">
<!--优先渲染主内容区-->
<div class="main"></div>
<div class="side-L"></div>
<div class="side-R"></div>
</div>
- CSS设置，
main side-L side-R设置浮动，container 清除浮动设置padding值，side-L设置负边距100%移动到内容区的左边，side-R设置负边距为自身的宽度，偏移到主内容区的右边。
/*css结构*/
.container{
padding: 0 200px 0 200px; /*给左右边栏预留出200px的宽度*/
}
.side-L,.main,.side-R{
float: left; /*实现三栏布局的要求*/
}
.side-L{
margin-left:-100%; /*移动父元素的100%的宽度*/
}
.side-R{
width: 200px;
margin-left: -200px; /*移动到主内容区域的右方*/
}
DEMO
- CSS设置
.side-L .side-R 的position:relative属性，.side-L 的 left: -200px，.side-R的left:200px，就可以实现左右两栏固定，中间主要部分自适应的圣杯布局。
DEMO
4. 双飞翼布局的原理? 实现步骤?
答：
- 和圣杯布局相像，在主内容区添加一个包裹层浮动，然后内容区设置外边距即可，左右栏不必添加
position属性设置。
<!--html结构-->
<div class="container">
<!--优先渲染主内容区-->
<div class="m-wrapper">
<div class="main"></div>
</div>
<div class="side-L"></div>
<div class="side-R"></div>
</div>
