任务十二-负边距·三栏布局

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

答：使用负边距的时候会改变元素在文档流中的位置。如图一所示;对于Box2设置了margin:-20px;下面的黄色Box3也会随着向上移动。负边距的作用能拉动其他没有脱离文档流的元素，而设置position：relative之后元素原来在文档流中占据的空间仍会保留，如图2所示，它只是相对于自己原来在文档流中的位置进行偏移。

1.使用负边距

2.使用positon:relative

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

答：

• 首先需要有一个父容器和其下三个并列的兄弟子元素，并且三个子元素都设置浮动。
• 父容器需要设置内边距padding
• 主要区块应写在最前面，保证优先被渲染
• 左侧栏的margin-left应设置为-100%,右侧栏margin-left设置为它本身的宽度。

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

答：圣杯布局主要是运用了负边距，浮动和相对定位去完成一个三栏布局。
步骤：
①首先写出圣杯布局的DOM结构，对三个区块设置宽度

   
     
     
     
  
  
  

    
Main
    
Aside
    
Extra
  

```

body{
font-family: "微软雅黑";
}
.ct{
width:800px;
border:1px solid;
}
.main{
width:500px;
height:300px;
background:#003151;
color:#ffffff;
}
.aside{
width:100px;
height:100px;
background:#7698A1;
}
.extra{
width:100px;
height:100px;
background:#D91B22;
}```

②对三个区块设置浮动以及aside和extra的负边距，让它们飘到main上面。（在父容器清除浮动）
③最后设置父容器的内边距为aside和extra的自身宽度，并且对这俩栏设置相对定位为自身宽度。

.ct{
  width:800px;
  padding:0 100px;
  border:1px solid;
}
.ct::after{
    content: "";
    display: block;
    clear: both;
}
.main{
  float:left;
  width:100%;
  height:300px;
  background:#003151;
  color:#ffffff;
  text-align: center;
}
.aside{
  float:left;
  position:relative;
  left:-100px;
  margin-left:-100%;
  width:100px;
  height:100px;
  background:#7698A1;
  text-align: center;
}
.extra{
  float:left;
  position:relative;
  left:100px;
  margin-left:-100px;
  width:100px;
  height:100px;
  background:#D91B22;
  text-align: center;
}```

![圣杯布局效果图](http://upload-images.jianshu.io/upload_images/2349092-6b0ca6cbf3a69575.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####4.双飞翼布局的原理? 实现步骤?
答：双飞翼布局与圣杯布局的不同点在于，它不是用主区块中设置padding来形成三栏的方式，而是在主区块中设置一个子元素，再对这个子元素设置外边距的值来形成三栏。

.main{
float:left;
width:100%;
height:300px;
color:#ffffff;
text-align: center;
}
.aside{
float:left;
margin-left:-100%;
width:100px;
height:300px;
background:#7698A1;
text-align: center;
}
.extra{
float:left;
margin-left:-100px;
width:100px;
height:300px;
background:#D91B22;
text-align: center;
}
.main .child{
height:300px;
margin-left:150px;
margin-right:150px;
background:#003151;
}```

双飞翼布局效果图

---

****本文版权归饥人谷_鬼脚七和饥人谷所有，转载请注明来源。****