1负边距在让元素产生偏移时和position: relative有什么区别?
负边距产生位移的时候，其后的元素也跟着偏移。
position:relatvie 产生位移的时候，其元素原先在文档流中的位置保留，其后的元素不会占据该元素的位置。
使用负 margin 形成三栏布局有什么条件?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯</title>
<style>
* {
margin:0;
padding:0;
}
.ct {
padding: 0 100px;
border: 1px solid #ccc;
}
.ct:after {
content: '';
display: block;
clear: both;
}
.box1{
background: red;
width: 100%;
height: 200px;
float: left;
}
.box2 {
width:100px;
height: 100px;
background: blue;
float: left;
margin-left: -100%;
position: relative;
left: -100px;
}
.box3 {
width:100px;
height: 100px;
background: green;
float: left;
margin-left: -100px;
position: relative;
left:100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
随浏览器宽度而改变的内容就是box1的位置，就是必须是父元素直接的第一个儿子元素，而且第一个儿子的宽度是100%,两端定宽的元素(就是不随浏览器宽度而改变的元素)放在其后。
圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
就是页面中至少有一端宽度是固定的（也可以是两端都固定的元素），那剩下的内容是可以随着浏览器宽度改变而改变的。
步骤
1. 一个父元素包裹三个子元素，随浏览器宽度变化的元素必须是该父元素的第一个儿子元素。
2. 父元素的三个儿子元素都要浮动。
3. 第二个、三个儿子宽度都要固定。
4. 因为第一个儿子元素宽度是100%,所以第二个、第三个元素浮动不上去。
5.设置左面固定宽度的元素margin-left:-100%;
6.设置右面固定宽度的元素margin-right:-宽度px;
7.父元素添加padding属性 0 宽度PX(第二个、三个儿子元素宽度)
8.第二个、第三个儿子进行相对位移，position:relative 移动位置是第二个第三个元素的宽度。
双飞翼布局的原理? 实现步骤?
步骤
1. 一个父元素包裹三个子元素，随浏览器宽度变化的元素必须是该父元素的第一个儿子元素。
2. 父元素的三个儿子元素都要浮动。
3. 第二个、三个儿子宽度都要固定。
4. 因为第一个儿子元素宽度是100%,所以第二个、第三个元素浮动不上去。
5.设置左面固定宽度的元素margin-left:-100%;
6.设置右面固定宽度的元素margin-right:-宽度px;
7.给第一个儿子添加一个DIV 包裹层。
8.给包裹层添加外边距。
