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值（值根据左右侧边栏区块宽度而定）。这样双飞翼布局就完成了。
第四步
本文版权归本人及饥人谷所有，转载请注明出处。
