margin
作用：设置盒子与盒子之间的距离。
取值：
margin: 10px;给上右下左所有的外边距都设置了10像素的距离。
margin: 10px 20px;给上下外边距设置了10像素，左右外边距设置了20像素
margin: 10 px 20px 40px;上10px，左右20px，下40
margin:10px 20px 40px 80px;上10，右20，下40，左80
maring-top margin-right margin-bottom margin-left
注意：很多标签默认带有margin和padding，所以将来进行页面的布局的时候一定要清除这些标签的默认的margin和padding.
例如：
1)body标签默认带有margin: 8px的属性
2)p标签默认带有margin: font-size 0;
3)h标签也默认带有margin-top和margin-bottom
4)ul默认带有上下的margin以及左边的padding
......
清除的方法：
{
margin: 0;
padding: 0;
}
注：width和height指的是内容的宽和高，background指的是内容的填充padding的颜色！
- margin两种特殊现象
外边距的合并现象：
如果两个div上下排序，给上面一个div设置margin-bottom，给下面一个div设置margin-top，那么两个margin会发生合并现象，合并以后的值较大的那个。
<style>
.one {
height: 100px;
background: red;
margin-bottom: 50px;
}
.two {
height: 200px;
background: blue;
margin-top: 100px;
}
</style>
<divclass="one">div1</div>
<divclass="two">div2</div>
- margin塌陷现象：
如果一个大盒子中包含一个小盒子，给小盒子设置margin-top，大盒子会一起向下平移。
解决方案：
给大盒子加一个边框
给大盒子设置一个overflow属性 overflow:hidden
浮动也可以
<style>
.father {
width: 400px;
height: 300px;
background: red;
}
.son {
margin-top: 10px;
width: 200px;
height: 150px;
background: blue;
}
</style>
<divclass="father">
<div class="son"></div>
</div>
从上一个案例中，可以总结：
margin这个属性，本质上描述的是兄弟和兄弟之间的距离；最好不要用这个marign表达父子之间的距离。所以，我们要善于使用父亲的padding，而不是儿子的margin。
margin的使用补充
margin: 0 auto; 让容器水平居中。
margin-right: auto; 如果不设置其它属性只设置这个属性，那么浏览器在解析的时候会将一个盒子的所有的默认的margin全部给margin-right
margin设置为负数：
如果margin-left设置为负数，那么将盒子会向左移动。
如果margin-right设置为负数，那么盒子会向右移动。关于使用margin：0 auto的注意事项
1）使用margin:0 auto; 的盒子，必须有width，有明确的width
2）只有标准流的盒子，才能使用margin:0 auto; 居中。
也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0auto;
3） margin:0 auto;是在居中盒子，不是居中文本。
文本的居中，要使用：text-align:center;
关于text-align的补充
text-align:left; 没啥用，因为默认居左
text-align:right; 文本居右
8.浮动
作用：解决一行中显示多个盒子的问题（并且这些盒子的位置可控。）
浮动的性质：脱标、贴边、字围、收缩
浮动的特点：浮动的元素会脱离标准流
浮动以后的元素会覆盖在标准流的元素之上。
浮动规则：浮动找浮动，不浮动找不浮动
浮动找浮动：只有写在同一个结构下面的浮动才会浮动找浮动浮动显示的位置与原本不浮动之前的位置是对应的
浮动的重点：同一等级，浮动的元素只会影响下面的元素，不会影响上面的元素！
<style>
div {
width: 200px;
height: 200px;
}
.one {
background: red;
}
.two{
height: 150px;
background: blue;
float: left;
}
.three {
background: pink;
}
</style>
<divclass="one"></div>
<div class="two"></div>
<divclass="three"></div>
- 浮动的元素会改变显示方式：不管元素是行内元素还是块级元素将来在显示的时候都会在同一行中显示。显示方式与行内块级元素一样。
- 浮动以后的元素可以设置宽高。
- 兄弟关系的盒子，只要有一个加浮动，其余都要加浮动！
清除浮动
浮动对页面的影响：如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。
额外标签法：
在浮动的盒子之下再放一个标签，对这个标签设置clear:both，来清除浮动对页面的影响。
a.内部标签：会将这个浮动盒子的父盒子高度重新撑开
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子。
注意：一般不会使用这一种方式来清除浮动。这种清除浮动的方式会增加页面的标签。overflow属性：
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden
注意：一般也不会使用这种方式。overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏。伪元素：
伪元素：在页面上不存在的元素，但可以通过css添加上去。每个元素都有自己的伪元素
<style>
p:before {
content: "h";
font-size: 20px;
color: brown;
}
p:after {
content: "d你好，鸿飞";
display: block;
height: 100px;
width: 100px;
line-height: 100px;
background: cadetblue;
text-align: center;
}
</style>
<p>ello worl</p>
:after 在…之后
:before 在…之前
content:”” 添加内容
- 默认添加的伪元素是行内元素，所以前面的h和后面的ello，worl连在一起。后面的d由于设置了display:block，所以转行显示。
下面是利用伪元素来清楚浮动的方法：在页面的clearfix元素后面添加了一个空的块级元素（这个元素的高为0，行高也为0，并且这个元素清除了浮动）
<style>
.father {
width: 500px;
border: 10px solid #000;
}
.son {
width: 200px;
height: 200px;
background: red;
float: right;
}
.one {
width: 500px;
height: 300px;
border: 10px solid deeppink;
}
.clearfix:after{
content: "";//添加内容为空
height: 0;//内容高度为0
line-height: 0;//内容文本的高度为0
display: block;//将文本设置为块级元素
clear: both;//清除浮动
visibility: hidden;//将元素隐藏
}
.clearfix {
zoom: 1;/*为了兼容ie6*/
}
</style>
<divclass="father clearfix">
<divclass="son"></div>
</div>
<divclass="one"></div>
