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

• 两者设置均不脱离文档流
• margin设置负值，改变了周围其他元素的空间布置。

• position: relative其元素位移的同时，其原本的空间布局并没有变化；

  
  

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

• 三个子元素均设置浮动
• 父容器必须清楚浮动（三个均在同一容器）
• 两边宽度固定，中间的main自适应
• 左右两栏需要设置负margin

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

代码

1. 先写好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