1.负边距在让元素产生偏移时和position: relative有什么区别?
- 当使用负边距产生偏移时：
Paste_Image.png
- 当使用p:r产生偏移时：
Paste_Image.png
2.使用负 margin 形成三栏布局有什么条件?
- 父元素下有三个块级元素。
- 中间部分写在前面先渲染,width:100%;。
- 浮动三个块级元素。
- 使用负margin，根据父容器宽度为依据来设置。
3.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
- 圣杯布局原理：通过负margin使左右侧元素产生位移到达主要内容元素的左右两侧。再给主要内容左右padding，使左右两侧元素留出位置移动避免遮挡主要内容，最后通过相对定位来移动左右两侧元素到达留出的位置。
-
步骤：
1.给三个div，如下图所示，让它们浮动，再使左右两侧元素通过负margin移动到main左右两侧。
Paste_Image.png
2.left-side元素的内容把main元素的内容给遮挡了，如下图所示。
Paste_Image.png
3.通过他们的父容器padding使左右留出位置，如下图：
Paste_Image.png
4.根据他们本身的位置p:e;把他们移动到父容器留出的位置上，使main的内容不被遮挡，如下图所示：
Paste_Image.png
4.双飞翼布局的原理? 实现步骤?
双飞翼布局的原理： 基本同圣杯布局差不多，只是在父容器留出左右两侧元素位置上有些许不同。
通过给main里面一个div，使它来控制main元素内容部分，给这个div左右margin来留出左右侧元素位置。-
主要步骤：（基本同上面的圣杯布局，看上面的1.和2.，这里就贴出双飞翼的主要部分）。代码部分
1. 看上面的1.
2.看上面的2.
3. 通过给main内部一个div来控制main元素内容位置。
Paste_Image.png
本教程版权归饥人谷本人和饥人谷所有，转载须说明来源！！！
