负边距、三栏布局
1.负边距在让元素产生偏移时和position: relative有什么区别？
负边距导致元素的变动会使元素元素在文档流中的位置产生变化如图。.div3，而利用position：relative产生的位移不会使文档流中的其他元素产生变动。如图.div4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task11</title>
<style type="text/css">
div {
width:200px;
height:100px;
border:1px solid;
}
.div1 {
background:#F00;
}
.div2 {
background:#FFF55C;
margin-left:20px;
margin-top:-30px;
}
.div3 {
background:#2A8EFF;
}
.div4 {
background:#0FFF5B;
position:relative;
top:-30px;
left:20px;
}
.div5 {
background:#FE49FF;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>
</body>
</html>```
效果：
负边距和position:relative;效果的区别
2.使用负 margin 形成三栏布局有什么条件？
- 三栏皆须浮动
- 两栏侧边栏须定宽
- main栏最小宽度不能小于左侧栏宽度
3.圣杯布局的原理是怎样的？简述实现圣杯布局的步骤
圣杯布局是使用浮动元素打破正常元素文档流，负margin改变元素位置等方式实现的。
具体实现步骤：
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
</head>
<body>
<div id="content" class="clearfix">
<div class="main">main</div>
<div class="aside">aside</div>
<div class="ad">ad</div>
</div>
</body>
</html>
1. 分别给```.main``` ``` .aside``` ``` .ad``` 添加背景颜色，给```.main```设定宽为100%，定高，给``` .aside``` 和``` .ad``` 定宽定高(```width:150px; height:300px```)；
- 分别给三个子元素添加浮动，同时在#content上添加clearfix样式撑开，获得如下效果：
- 给``` .aside``` 和``` .ad```分别添加```margin:-100%;```和```margin:150px```，结果如图：
- 给父元素```#content```添加左右内边距```padding:160px;```：
- 利用position:relative;使``` .aside``` 和``` .ad```分别向两侧移动至合适位置，达到最终结果：
CSS代码:
- ```
.clearfix:after {
content:'';
display:block;
clear:both;
}
#content {
border:1px solid green;
padding: 0 160px
}
.main {
background:#FFF55C;
width:100%;
height:300px;
float: left;
}
.aside {
background:#F00;
width:150px;
height:300px;
float: left;
margin-left:-100%;
position:relative;
left:-160px;
}
.ad {
background:#2A8EFF;
width: 150px;
height: 300px;
float: left;
margin-left: -150px;
position: relative;
right: -160px;
}```
###4.双飞翼布局的原理？ 实现步骤？
双飞翼布局即在.main内添加盒子，为其添加左右外边距和高度等，使其作为中间内容载体。
HTML:
- ```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task12</title>
</head>
<body>
<div id="content" class="clearfix">
<div class="main">
<div class="ct">
main
</div>
</div>
<div class="aside">aside</div>
<div class="ad">ad</div>
</div>
</body>
</html>```
CSS:
- ```
.clearfix:after {
content:'';
display:block;
clear:both;
}
#content {
border:1px solid green;
}
.main {
background:#FFF55C;
width:100%;
height:300px;
float: left;
}
.aside {
background:#F00;
width:150px;
height:300px;
float: left;
margin-left:-100%;
}
.ad {
background:#2A8EFF;
width: 150px;
height: 300px;
float: left;
margin-left: -150px;
}
.ct {
background:#ccc;
height:300px;
margin:0 160px;
}
实现效果：
双飞翼布局
本教程版权归本人和饥人谷所有，转载需注明来源。
