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

---

2016/5/31

---

问答题：

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

• 负边距让元素发生偏移的时候是直接改变了元素在文档流中的位置，影响周边元素的位置，周边的元素会跟着一起动。

• position:relative 没有改变元素在文档流中的位置，只是相对于自身原来的位置发生了偏移，不会影响其他的元素。
  原来的状态：

  
  0_1464510810536_upload-02b75474-143e-4a04-b17d-00e1d52e6f6c
  

  加position:relative之后，没有影响box2:

  
  0_1464510953291_upload-277dae4a-9260-40c2-8878-e025e8eaca81
  用负margin，box2的位置也发生了偏移
  0_1464511071202_upload-cc6afcad-febb-4f16-a508-d0e5ead83548

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

• 三栏要放在一个父容器中，三栏都要浮动，父容器要清浮动。
• 左右两栏要固定宽度，中间的内容栏设置宽度为100%，和父级相同
• 通过设置负margin-left值是边栏位于内容栏里面的左右部，分别为100%，和自身宽度。
• 主体设置padding值，再给边栏设置定位位移，或者通过将中间主体内容放在一个容器里，通过设置容器左右的margin值，来实现左右边栏不会覆盖内容栏

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

• 圣杯布局的原理是为了中间内容不被遮挡，宽度自适应，将两个侧边栏和内容包含在一个容器中，利用主容器的padding和侧边栏的相对定位与负边距来实现三栏布局。
• 圣杯布局的步骤：
  1.主容器清浮动，三栏都要设置浮动。
  2.侧边栏固定好宽度，内容栏即中间栏宽度设置为100%。
  3.左侧边栏设置margin-left:-100%.（依据父级宽度）
  4.右侧边栏设置 margin-left:-100px.(即它自身的宽度)
  上面3,4步使得左右侧边栏分别在中间栏内部的左右侧
  5.主容器设置padding值
  6.侧边栏设置相对定位和定位值

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

• 双飞翼布局的原理也是为了使中间内容不被遮挡，宽度自适应，直接在中间div中创建div放置内容，在孩子div中利用左右margin为两侧留出位置。
• 实现步骤：
  1.主容器清浮动，三栏都要设置浮动。
  2.侧边栏固定好宽度，内容栏即中间栏宽度设置为100%。
  3.左侧边栏设置margin-left:-100%.（依据父级宽度）
  4.右侧边栏设置 margin-left:-100px.(即它自身的宽度)
  上面3,4步使得左右侧边栏分别在中间栏内部的左右侧
  5.在中间栏里面嵌套一个div,并且给这个容器设置margin的左右值，为两侧留出位置。

代码