1、负边距在让元素产生偏移时和position: relative有什么区别?
我们可以这样理解：
position: relative改变坐标后，金身还在原来的地方，只是灵魂出窍了，所以它不会影响其它元素的位置。
而通过margin改变坐标后，是这哥们真的跑了，所以其后的元素都会改变位置。
position:relative
margin change
2、用负 margin 形成三栏布局有什么条件?
3、圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤?
4、双飞翼布局的原理? 实现步骤?
这3个问题本质一样，故集中在一块说。
分别列出圣杯布局和双飞翼布局的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task12-2</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.head,.foot{
background: #ccc;
height: 40px;
}
.ct{
padding-left: 200px;
padding-right: 200px;;
}
.ct:after{
display: block;
content: "";
clear: both;
}
.aside,.main,.extra{
position: relative;
float:left;
}
.main{
background: green;
width: 100%;
}
.aside,.extra{
width: 200px;
min-height: 100px;
}
.aside{
background: red;
margin-left: -100%;
left: -200px;
}
.extra{
background: yellow;
margin-left: -200px;
left: 200px;
}
</style>
</head>
<body>
<div class="head">头部</div>
<div class="ct">
<div class="main">
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
</div>
<div class="aside">左侧边栏，固定宽度</div>
<div class="extra">右侧边栏，固定宽度</div>
</div>
<div class="foot">尾部</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task12-4</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.head,.foot {
background: #ccc;
height: 40px;
}
.ct:after{
content: "";
display: block;
clear: both;
}
.wraps,.aside,.extra{
float: left;
}
.main{
background: green;
margin: 0 200px 0 200px;
}
.aside,.extra{
width: 200px;
min-height: 100px;
}
.aside{
margin-left: -100%;
background: red;
}
.extra{
margin-left: -200px;
background: yellow;
}
</style>
</head>
<body>
<div class="head">头部</div>
<div class="ct">
<div class="wraps">
<div class="main">
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈我是中间哈哈哈
</div>
</div>
<div class="aside">左侧边栏，固定宽度</div>
<div class="extra">右侧边栏，固定宽度</div>
</div>
<div class="foot">尾部</div>
</body>
</html>
可以看出两者最终的效果没什么区别，但构造思路是存在一定差异的。先说相同的地方：
圣杯布局和双飞翼布局本质上都是通过float+负margin的方法实现中间自适应的三栏布局。
- 首先，需要保证中间栏（主栏）在DOM结构中处在两个侧栏之上；
- 其次，对三个布局栏进行
float:left的操作; - 接着分别对左栏操作
margin-left:-100%;（父容器宽度），margin-left:-200px;(自身宽度); - 当然还需要对总的container撑开，用
overflow:hidden或是.ct:after{}均可。
此时就会看到这样的效果:
此时分歧出现，我们有两种思路：
- 一是将侧栏挤出去，实现圣杯布局；
- 二是将主栏压缩，实现双飞翼布局。
具体实现方式，可以参考前面的代码，这里只提要点：
圣杯布局
1.三栏均改定位方式position:relative;；
2.主栏添加与左右栏宽度相等的左右padding;
3.left/right位移左右栏自身宽度的距离。双飞翼布局
1.给现在的主栏添加一个子元素成为新的主栏元素；
2.为新的主栏元素添加与左右侧栏宽度相等的margin。
