负边距在让元素产生偏移时和position: relative有什么区别?
负边距设置偏移会影响其后元素的布局。position:relative是相对其本身的位移，不会影响其他元素的布局。
负边距
position:relative
使用负 margin 形成三栏布局有什么条件?
如上图所示：
- 父容器内的三个块级元素均浮动。
- 内容的块级元素在最前，渲染完成后在中间呈现，width100%，另外两个块级元素负margin一个是其本身宽度，一个负margin是-100%。
圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤。
圣杯布局原理：父容器内块级元素均浮动，内容栏width100%渲染后居中，通过两侧子元素的负margin和相对定位，父容器的左右padding来布局。
- 父容器内的三个块级元素均浮动，父容器清除浮动。
- 内容的块级元素在最前，width100%，另外两个块级元素负margin一个是其本身宽度，一个负margin是负100%。
- 父容器的左右padding为除了内容块级元素的两个元素的宽度，左右padding相对应块级元素宽度。
- 左右块级元素相对定位，布局完成。
双飞翼布局的原理? 实现步骤?
双飞翼布局原理：父容器内块级元素均浮动，中间栏width100%渲染后居中并且包裹内容元素设置左右padding使内容自适应，通过两侧子元素的负margin来布局。
- 父容器内的三个块级元素均浮动，父容器清除浮动。
- 内容的块级元素在最前，width100%，另外两个块级元素负margin一个是其本身宽度，一个负margin是负100%。
- 设置中间栏包裹内容元素，内容元素左右padding设置为左右两栏的对应宽度。
- 布局完成。
** 本教程版权归博主和饥人谷所有，转载须说明来源。**
