负边距、三栏布局

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

1.负边距会改变元素在文档流中的位置，而且相邻的元素位置也会被改变。

示例

2.position:relative相对定位，会使自身元素发生偏移，但是之前占用的文档流位置继续保留，相邻元素的位置不受影响。

示例

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

1.左右侧边栏和居中的主内容区块均为浮动的块级元素。
2.主内容区块放在最前面（文档流优先渲染），左右侧边栏随后。
3.左侧边栏需设置负margin-left为100%，右侧边栏需设置margin-left为元素本身的宽度。

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

1.原理:圣杯布局是指左右两边侧边栏宽度固定，中间主内容区块宽度自适应的布局方式。左右侧边栏区块和中间主内容区块均设置浮动，然后中间主内容区块设置padding，使两边留出空白。左侧边栏区块设置margin-left:-100%，右侧边栏区块设置margin-left值为区块本身的宽度再配合相对定位（position:relative）即可。
2.步骤

• 第1步：先写出圣杯布局的DOM结构（三个块级元素包裹在父容器中，两边的侧边栏宽度固定，中间的主内容区块宽度自适应）。

  
  第1步

• 第2步：父容器中的三个块级元素设置浮动,并设置父容器清理浮动。

  
  第2步

• 第3步：设置第二个子元素margin-left:-100%，第三个子元素margin-left:-100px，侧边栏的两个子元素会往上覆盖中间主区块元素。

  
  第3步

• 第4步：设置父容器的padding:0 100px，再分别设置左侧边栏相对定位position:relative;left:-100px;右侧边栏相对定位position:relative;left:100px。这样圣杯布局就完成了。

  
  第4步

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

1.原理：左右两边侧边栏宽度固定，中间主区块内容宽度自适应的布局方式。跟圣杯布局的不同点在于双飞翼布局的中间区块需要再包裹一个子元素区块做主内容，然后使用margin值撑开两边的侧边栏，不需要使用相对定位（position:relative）。
2.步骤

• 第1步：先写出圣杯布局的DOM结构（三个块级元素包裹在父容器中，两边的侧边栏宽度固定，中间的主内容区块宽度自适应）。

  
  第1步

• 第2步：父容器中的三个块级元素设置浮动,并设置父容器清理浮动。

  
  第2步

• 第3步：设置第二个子元素margin-left:-100%，第三个子元素margin-left:-100px，侧边栏的两个子元素会往上覆盖中间主区块元素。

  
  第3步

• 第4步：在主区块中再设置一个子元素做主内容区块,并设置该子元素的左右margin值（值根据左右侧边栏区块宽度而定）。双飞翼布局就完成了。

  
  第4步

本教程归本人和饥人谷所有，转载需说明来源！