1.负边距在让元素产生偏移时和position: relative有什么区别?
答：使用负边距的时候会改变元素在文档流中的位置。如图一所示;对于Box2设置了margin:-20px;下面的黄色Box3也会随着向上移动。负边距的作用能拉动其他没有脱离文档流的元素，而设置position：relative之后元素原来在文档流中占据的空间仍会保留，如图2所示，它只是相对于自己原来在文档流中的位置进行偏移。
2.使用负 margin 形成三栏布局有什么条件?
答：
- 首先需要有一个父容器和其下三个并列的兄弟子元素，并且三个子元素都设置浮动。
- 父容器需要设置内边距padding
- 主要区块应写在最前面，保证优先被渲染
- 左侧栏的margin-left应设置为-100%,右侧栏margin-left设置为它本身的宽度。
3.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
答：圣杯布局主要是运用了负边距，浮动和相对定位去完成一个三栏布局。
步骤：
①首先写出圣杯布局的DOM结构，对三个区块设置宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<link rel="stylesheet" type="text/css" href="task1.css">
</head>
<body>
<div class="ct">
<div class="main">Main</div>
<div class="aside">Aside</div>
<div class="extra">Extra</div>
</div>
</body>
</html>```
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;
}```
####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;
}```
****本文版权归饥人谷_鬼脚七和饥人谷所有，转载请注明来源。****
