任务12-负边距、三栏布局

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

---

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