1. 负边距在让元素产生偏移时和position: relative有什么区别?
- 负边距：父边距是用于调节元素位置，应用较为广泛，margin-top设置为负值，那么元素就会被“上拉”，类似地左右下均是这种效果；
- position: relative;是定位的一种方法——相对定位，相对定位规定元素相对于本身原来位置进行位置的偏移；
- 区别：由此可以看出，元素运用负边距的时候，本身位置改变的同时还会使兄弟元素位置跟随其一起移动，而position: relative;使元素位置偏移时，元素原位置所占空间大小没有发生改变，兄弟元素不随着其一起移动。
2. 使用负 margin 形成三栏布局有什么条件?
三栏布局有很多种方式可以实现，其中的圣杯布局和双飞翼布局运用了负边距的特点，形成条件为：
- 三个元素在同一个父元素下，并且为兄弟元素；
- 三个元素均为浮动；
- 中间主要区块放在HTML中第一位最先渲染，width:100%；
- 另外两个边栏设置负margin（本身width≤负margin大小≤父元素width）；
3. 圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
- 圣杯布局的原理：
- 设置浮动使三栏的位置相对自由灵活；
- 设置main区块width:100%使主要元素占据整个中间空间（并且有挤下其他浮动元素的作用）；
- 设置左边栏：margin-left: -100%;使元素进入到main区块的最左上角；（原理在例子下面阐述）
- 设置右边栏：负边距大小为本身高度，使元素到main的最右上角；
- 父元素设置一定大小的padding，然后运用position: relative属性对左右边栏进一步设置，防止其盖住main区块；
具体步骤如下：
step1:写好html结构以及基本样式css：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct {
border: 1px solid;
}
.main {
width: 100%;
height: 200px;
background: rgba(255, 0, 0, 0.5);
}
.sideL {
width: 100px;
height: 100px;
background: rgba(255, 255, 0, 0.5);
}
.sideR {
width: 100px;
height: 100px;
background: rgba(0, 255, 0, 0.5);
}
</style>
</head>
<body>
<div class="ct">
<div class="main">main区块</div>
<div class="sideL">左边栏</div>
<div class="sideR">右边栏</div>
</div>
</body>
</html>
效果图：
圣杯step1
step2：对元素进行浮动设置，并撑开父元素：
.ct:after {
content: '';
display: block;
clear: both; /* 撑开父元素 */
}
.main {
width: 100%;
height: 200px;
background: rgba(255, 0, 0, 0.5);
float: left; /* 设置浮动 */
}
.sideL {
width: 100px;
height: 100px;
background: rgba(255, 255, 0, 0.5);
float: left; /* 设置浮动 */
}
.sideR {
width: 100px;
height: 100px;
background: rgba(0, 255, 0, 0.5);
float: left; /* 设置浮动 */
}
圣杯step2
step3：负margin使边栏进入到main里面：
.sideL {
width: 100px;
height: 100px;
margin-left: -100%; /* 左边栏负margin设置为相对于父元素的-100% */
background: rgba(255, 255, 0, 0.5);
float: left;
}
.sideR {
width: 100px;
height: 100px;
margin-left: -100px; /* 右边栏负margin为本身width大小 */
background: rgba(0, 255, 0, 0.5);
float: left;
}
圣杯step3
step4：设置父元素padding，运用position: relative;定位两边栏：
* {
margin: 0;
padding: 0;
}
.ct {
border: 1px solid;
padding: 0 120px; /* 父元素设置内边距 */
}
.ct:after {
content: '';
display: block;
clear: both;
}
.main {
width: 100%;
height: 200px;
background: rgba(255, 0, 0, 0.5);
float: left;
}
.sideL {
position: relative;
left: -120px; /* 左边栏定位到最左面 */
width: 100px;
height: 100px;
margin-left: -100%;
background: rgba(255, 255, 0, 0.5);
float: left;
}
.sideR {
position: relative;
left: 120px; /* 右边栏定位到最右面 */
width: 100px;
height: 100px;
margin-left: -100px;
background: rgba(0, 255, 0, 0.5);
float: left;
}
至此，圣杯结构就已经出现了，确实比较像圣杯- -。
补充：
无论是在圣杯布局还是双飞翼布局中，负margin的作用举足轻重，它的具体原理是：
- 负margin本身计算并不违反规范，负值会使子元素位置发生变化；（这里假设父元素不动，其实父元素也可以是其他元素的子元素）
- 负margin可以使父元素的width变大；
描述：
- 这两点没有找到具体根据，不过在《The Definitive Guide》中，明确阐述了这种特性，并且在计算上并不违反规范，所以可以广泛应用。
- 圣杯布局和双飞翼布局是利用第一点，将子元素的间距变为负值，而加起来的总长还是等于父元素的width，所以计算合理，即可将元素自然上流。
计算步骤如下：（300px=300px+100px-100px）
如果要实现两栏布局，只需要删除右边栏，然后将父元素padding 改一下设置即可：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct {
border: 1px solid;
padding-left: 120px;
}
.ct:after {
content: '';
display: block;
clear: both;
}
.main {
width: 100%;
height: 200px;
background: rgba(255, 0, 0, 0.5);
float: left;
}
.sideL {
position: relative;
left: -120px;
width: 100px;
height: 100px;
margin-left: -100%;
background: rgba(255, 255, 0, 0.5);
float: left;
}
</style>
</head>
<body>
<div class="ct">
<div class="main">main区块</div>
<div class="sideL">左边栏</div>
</div>
</body>
</html>
圣杯改两栏布局
4. 双飞翼布局的原理? 实现步骤?
双飞翼布局的原理和圣杯结构原理大同小异，基本上就是在思路上的差别，圣杯布局是父元素padding容纳边栏，而双飞翼结构是改变main区块子元素的margin大小来实现同样效果，具体如下：
- 浮动和负margin的原理和圣杯布局相同，详见圣杯布局补充点。
- 给main区块设置一个子元素，并且子元素左右margin设置一定数字大小；
具体步骤如下：
step1：用圣杯布局的方法，将边栏元素通过负margin移动到main区块两侧：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct {
border: 1px solid;
}
.ct:after {
content: '';
display: block;
clear: both;
}
.main {
width: 100%;
height: 200px;
background: rgba(255, 0, 0, 0.5);
float: left;
}
.sideL {
width: 100px;
height: 100px;
margin-left: -100%;
background: rgba(255, 255, 0, 0.5);
float: left;
}
.sideR {
width: 100px;
height: 100px;
margin-left: -100px;
background: rgba(0, 255, 0, 0.5);
float: left;
}
</style>
</head>
<body>
<div class="ct">
<div class="main"></div>
<div class="sideL">左边栏</div>
<div class="sideR">右边栏</div>
</div>
</body>
</html>
基础设置
step2：给main元素添加一个子元素，设置子元素的margin值及其他一些基础属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
.ct {
border: 1px solid;
}
.ct:after {
content: '';
display: block;
clear: both;
}
.main {
width: 100%;
height: 200px;
float: left;
}
.main .wrap {
background: rgba(255, 0, 0, 0.5);
height: 200px;
margin: 0 120px; /* 给子元素添加两侧margin */
}
.sideL {
width: 100px;
height: 100px;
margin-left: -100%;
background: rgba(255, 255, 0, 0.5);
float: left;
}
.sideR {
width: 100px;
height: 100px;
margin-left: -100px;
background: rgba(0, 255, 0, 0.5);
float: left;
}
</style>
</head>
<body>
<div class="ct">
<div class="main">
<div class="wrap">main区块</div> <!--添加一个类名为wrap的子元素-->
</div>
<div class="sideL">左边栏</div>
<div class="sideR">右边栏</div>
</div>
</body>
</html>
双飞翼布局
如图所示，双飞翼布局就出现了，只是思路上和圣杯布局的有差别，两者本质上差别不大。
代码题
代码1预览
代码2预览
代码3预览
代码4预览
代码5预览
本文版权归本人及饥人谷所有，转载请注明来源。谢谢！
