1、margin
同级别水平方向margin-left/right
父子级竖直方向margin-top
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bug汇总</title>
<style type="text/css">
/*s1,s2中margin左右都起作用了*/
.s1{
height: 20px;
margin-right: 50px;
background-color: red;
}
.s2{
margin-left: 100px;
background-color: blue;
}
/*<!-- 父子级竖直方向margin-top，父子元素结合在一起取最大值，要给父级上用bfc-->*/
/*如何触发一个盒子的bfc，有4中方法：
position: absolute;
display: inline-block;
float: left/right;
overflow: hidden;*/
.fu{
height: 200px;
220px;
background-color: black;
margin-left: 50%;
margin-top: 200px;
position: absolute;
}
.zi{
height: 100px;
100px;
background-color: green;
margin-top: 80px; /*(不给父级用bfc，就无效，)*/
}
</style>
</head>
<body>
<span class="s1">123</span>
<span class="s2">234</span>
<!-- 父子级margin-top 问题 -->
<div class="fu">
<div class="zi"></div>
</div>
</body>
</html>
2、块级元素：独占一行，可以改变宽高 （display默认block） div、p、ul、li、form、address
行级元素：内容决定大小，不可用css设置宽高（display默认inline） span 、a （设置高度不好使，要变成行内块或者块）、
image -行内块元素：内容决定大小，可以设宽高（设一个就可以自动缩放），不独占一行 （display默认inline-block）
注意 ：凡是带有inline的元素，都有文字特性会被分割,左右带有margin值4px