task12-负边距、三栏布局

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

负边距设置偏移会影响其后元素的布局。position:relative是相对其本身的位移，不会影响其他元素的布局。

负边距
position:relative

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

如上图所示：

• 父容器内的三个块级元素均浮动。
• 内容的块级元素在最前，渲染完成后在中间呈现，width100%，另外两个块级元素负margin一个是其本身宽度，一个负margin是-100%。

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

圣杯布局原理：父容器内块级元素均浮动，内容栏width100%渲染后居中，通过两侧子元素的负margin和相对定位，父容器的左右padding来布局。

1. 父容器内的三个块级元素均浮动，父容器清除浮动。
2. 内容的块级元素在最前，width100%，另外两个块级元素负margin一个是其本身宽度，一个负margin是负100%。
3. 父容器的左右padding为除了内容块级元素的两个元素的宽度，左右padding相对应块级元素宽度。
4. 左右块级元素相对定位，布局完成。

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

双飞翼布局原理：父容器内块级元素均浮动，中间栏width100%渲染后居中并且包裹内容元素设置左右padding使内容自适应，通过两侧子元素的负margin来布局。

1. 父容器内的三个块级元素均浮动，父容器清除浮动。
2. 内容的块级元素在最前，width100%，另外两个块级元素负margin一个是其本身宽度，一个负margin是负100%。
3. 设置中间栏包裹内容元素，内容元素左右padding设置为左右两栏的对应宽度。
4. 布局完成。

** 本教程版权归博主和饥人谷所有，转载须说明来源。**