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

使用负边距会改变元素在文档流中的位置，并且相邻元素的位置也会受影响。而设置position：relative之后，元素自身会发生偏移，但是它在文档流中占据的空间仍会保留，相邻元素的位置不会受影响。
例：

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

• 三栏均为浮动的块级元素，且父元素要设置清除浮动
• 主内容区块放在最前面，左右侧栏放其后
• 左侧边栏需设置margin-left为-100%，右侧边栏需设置margin-left为它本身宽度的负值

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

原理：使用负边距使得左右两侧栏宽度固定，中间主区块宽度自适应的布局方式。左右侧边栏和中间主区块均设置浮动，然后中间主区块设置padding使得两侧留出空白。左侧边栏需设置margin-left为-100%，右侧边栏需设置margin-left为它本身宽度的负值然后再使用相对定位使得左、右边距能够流向预定的位置。
步骤：

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

第一步

• 第二步：对三个区块设置浮动，并且父容器要清除浮动。

第二步

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

第三步

• 第四步：最后设置父容器的padding;然后使用定位，使左右栏流入相应的位置，这样圣杯布局就完成了。

第四步

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

原理：双飞翼布局跟圣杯布局的不同点在于，它不是用主区块中设置padding来形成三栏的方式，而是在其中间区块中包裹一个子元素区块做主内容，再对这个子元素设置外边距的值来形成三栏。
步骤：

• 第一步：写出双飞翼布局的DOM结构

第一步

• 第二步：对三个区块设置浮动，并且父容器要清除浮动。

第二步

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

第三步

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

第四步

本文版权归本人及饥人谷所有，转载请注明出处。