1.负边距在让元素产生偏移时和position: relative有什么区别?
答：position:relative产生偏移时，原来所在的空间不会被其他元素占据，而使用-margin时原来所在的空间会被占据 例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position：relative与-margin</title>
<style>
.ct{
width:200px;
border:1px solid #0f0;
width:400px;
height:400px;
}
.box1{
/* position:relative; */
width:100px;
height:100px;
background:#f00;
margin-left:-50px;
margin-top:-50px;
}
.box2{
position:relative;
width:100px;
height:100px;
background:#00f;
}
.box3{
width:100px;
height:100px;
background:#0f0;
position:relative;
top:-20px;
}
.box4{
width:100px;
height:100px;
background:#0ff;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
搜狗截图16年07月29日1611_1.png
2.使用负 margin 形成三栏布局有什么条件?
答：
- 三栏都需要设置
float：left并且父元素设置清除浮动。 - 主内容放在上面，利于搜索引擎优化，侧边栏放在下面。
- 主内容宽度为自适应100%，两个侧边栏为固定宽度。
- 左侧边栏设置宽度为
margin-left：-100%有侧边栏设置margin-left负其自己本身的宽度。
3.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤。
答：
- 先设置好三栏，主内容放在最上面两侧边栏放在下面，使他们三栏进行左浮动，父元素清除浮动。
- 设置两个侧边栏的负边距左边为-100%，右边为-其自己本身的宽度。
- 由于两个侧边栏遮挡住了主内容，我们需要将侧边栏从主内容移出，设置父元素的左右padding，宽度为侧边栏宽度。
- 我们再使用position：relative把侧边栏从主内容栏移出即可。
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style>
*{
padding:0;
margin:0;
}
.ct{
border:1px solid #0f0;
padding:0 100px;
}
.ct:after{
content:' ';
display:block;
clear:both;
}
.box1{
width:100%;
height:100px;
background:#f00;
float:left;
}
.box2{
position:relative;
width:100px;
height:100px;
background:#00f;
float:left;
margin-left:-100%;
left:-100px;
}
.box3{
width:100px;
height:100px;
background:#0f0;
position:relative;
float:left;
margin-left:-100px;
left:100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">main</div>
<div class="box2">left</div>
<div class="box3">right</div>
</div>
</body>
</html>
搜狗截图16年07月29日1656_2.png
4.双飞翼布局的原理? 实现步骤?
答：前两个跟圣杯布局一样，后面就是给主内容内嵌套一个div，给这个div设置自适应宽度，再给它设置与侧边栏宽度一样的margin即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼布局</title>
<style>
*{
margin:0;
padding:0;
}
.ct{
border:1px solid;
}
.ct:after{
content:" ";
display:block;
clear:both;
}
.box1{
float:left;
width:100%;
height:100px;
background:#ff0;
}
.box2{
float:left;
width:100px;
height:100px;
background:#f0f;
margin-left:-100%
}
.box3{
float:left;
width:100px;
height:100px;
background:#0f0;
margin-left:-100px;
}
.main{
margin:0 100px;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1">
<div clas"main">main</div>
</div>
<div class="box2">left</div>
<div class="box3">right</div>
</div>
</body>
</html>
搜狗截图16年07月29日1823_3.png
本文版权归本人及饥人谷所有，转载请注明出处。
