负边距在让元素产生偏移时和position: relative有什么区别?
- 两者设置均不脱离文档流
- margin设置负值，改变了周围其他元素的空间布置。
-
position: relative其元素位移的同时，其原本的空间布局并没有变化；
使用负 margin 形成三栏布局有什么条件?
- 三个子元素均设置浮动
- 父容器必须清楚浮动（三个均在同一容器）
- 两边宽度固定，中间的main自适应
- 左右两栏需要设置负margin
圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
- 先写好body内容，将main设置于最前面，方便渲染。
<div id="content">
<div class="main">主要内容</div>
<div class="aside"></div>
<div class="extra"></div>
</div>
- 对各个元素设置好基本样式，使用浮动
- 对父元素使用清除浮动
- 对左右两栏设置负margin
- 对父元素使用padding,使得子元素集中于中间，其padding左右宽度为左右两栏的宽度
- 使用相对定位移动到对应位置
双飞翼布局的原理? 实现步骤?
与圣杯不同的是其相当于在main处放入了一个空壳，再将main内容放入，通过调整main的左右margin来达到居中设置。
圣杯布局与双飞翼布局
QQ截图20160729175015.png
