负边距、三栏布局
一、负边距在让元素产生偏移时和position: relative有什么区别?
负边距会使由文档流控制的元素在文档流中的位置发生偏移。通过相对定位偏移，仍然会占据它原来占据的空间，不会让文档流的其它元素进入。而通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间。
二、使用负 margin 形成三栏布局有什么条件?
1.负margin会改变浮动元素的显示位置，三栏布局侧边栏aside采用负margin移动后，侧边栏extra也会跟着它移动，这时设置aside margin-left:负它的实际宽度,设置extra margin-left：-100%，就可以实现侧边栏覆盖到主main内容左右两边。
2.再在中间main div里再创建一个子div名为wrap，利用wrap的margin-left和margin-right移动侧边栏，实现主内容和两边侧边栏的间隔。
.main{
width:100%;
height: 200px;
float: left;
}
.wrap{
height: 200px;
background: rgba(90, 243, 151, 0.8);
margin:0 110px;
padding:0 100px;
}
.aside{
width: 200px;
height: 500px;
background: blue;
float:left;
margin-left: -200px;
}
.extra{
width: 200px;
height: 500px;
background: pink;
float: left;
margin-left: -100%;
}
结果为：
Paste_Image.png
三、圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤。
原理：圣杯布局指两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。参考：圣杯布局原理。其流程为：1）设置container的左右padding，用于预留左右边栏的空间。2）给所有元素设置定位和浮动，用于设置左右两栏偏移。3）给左侧边栏设置right，让其移动位置，设置负边距100%（#center的宽度），让其跑到上面。4）给右边栏设置负边距使其跑到上面。
<style>
.ct{
border:1px solid;
padding-left: 120px;
padding-right:170px;
}
.ct:after{
content: "";
display: block;
clear: both;
}
.main{
width:100%;
height: 200px;
background: rgba(90, 243, 151, 0.8);
float: left;
}
.aside{
position: relative;
left: 170px;
width: 100px;
height: 100px;
background: blue;
float:left;
margin-left: -100px;
}
.extra{
position: relative;
left: -120px;
width: 100px;
height: 100px;
background: yellow;
float: left;
margin-left: -100%;
}
</style>
</head>
<body>
<div class="ct">
<div class="main">main</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
</body>
流程：
1.main中间区域要根据浏览器宽度的变化而变化，所以要用100%。左中右三块都要设置左浮动，方便下面的内容上去。
2.把左层aside负margin100px后，发现aside上去了，移动到上面main区块最后边。
Paste_Image.png
在相对定位（left=170px）就到了侧边栏右边。
Paste_Image.png
3.同样的道理设置左边栏。
总结来说就是利用负边距，把左右栏定位，再利用相对定位根据主区块的padding确定偏移值。
四、双飞翼布局的原理? 实现步骤?
双飞翼布局只不过额外增多一个div，利用浮动和负边距就可以实现和圣杯布局一样的效果。具体效果如下所示。
方法是去掉左右栏的相对定位，去掉包裹层padding，在中间栏新增div，利用margin值实现左右间隔。
例子：
<style>
.ct{
border:1px solid;
}
.ct:after{
content: "";
display: block;
clear: both;
}
.main{
width:100%;
height: 200px;
float: left;
}
.wrap{
height: 200px;
background: rgba(90, 243, 151, 0.8);
margin:0 110px;
}
.aside{
width: 100px;
height: 100px;
background: blue;
float:left;
margin-left: -100px;
}
.extra{
width: 100px;
height: 100px;
background: pink;
float: left;
margin-left: -100%;
}
</style>
</head>
<body>
<div class="ct">
<div class="main">
<div class="wrap"></div>
</div>
<div class="aside"></div>
<div class="extra"></div>
</div>
</body>
结果如下：
Paste_Image.png
本文版权归本人及饥人谷所有，转载请注明出处，谢谢！
