任务12

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

• 负边距在让元素产生偏移时，相邻元素的位置也会跟着它移动。
• 而position: relative让元素产生偏移时，只是改变自身的位置，它在文档流中原本占用的空间不会改变，不会影响其他元素。

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

• 1.父容器需要设置内边距padding;父容器要清除浮动;
• 2.父容器下的所有子元素都需要设置左浮动;
• 3.主要区块应写在最前面，保证优先被渲染,宽度要设为100%;
• 4.左侧栏的margin-left应设置为-100%,右侧栏margin-left设置为-100px。
• 5.用position:relative给左右侧边栏调整位置;左侧栏的left应设置为-100px,右侧栏left设置为100px;

如下图所示:

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

• 圣杯布局主要是运用了负边距，浮动和相对定位去完成一个三栏布局。
• 实现圣杯布局的步骤:

  • 1.先设置好三栏，主内容放在最上面两侧边栏放在下面，使他们三栏进行左浮动，父元素清除浮动。主内容的宽度设置为100%;两个侧边栏的宽度比如设置为100px;如下图所示:

    
    

  • 2.设置两个侧边栏的负边距,左侧边栏为margin-left:-100%，右侧边栏为margin-left:-100px;如下图所示:

    
    
  • 3.由于两个侧边栏遮挡住了主内容，我们需要露出主题内容，我们可以设置父元素<div class="content">的左右padding。如下图所示:
    

  • 4.最后使用position：relative把侧边栏从主内容栏移出即可。如下图所示:

    
    

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

• 双飞翼布局是在主内容块中设置一个子元素，再对这个子元素设置外边距的值来形成三栏。

• 实现步骤如下图所示: