1 文档流 normal flow
1.1文档流动方向，
1、inline元素从左到右，到达最右边才会换行；
2、block元素从上到下，每一个都另起一行；
3、inline-block也是从左到右，但是到达最右边的时候不会换行，即一个元素不会跨两行；
1.2 宽度
1、 inline宽度为内部inline元素的和，不能用width指定；
2、block默认为自动计算宽度（auto），能有多宽有多宽，不是100%，可用width指定，一般不要写width:100%；
3、inline-block结合前两者特点，默认宽度为内部inline元素的和，可设置width；
1.3 高度
1、inline高度由line-height间接确定（与字体相关，相关知识：行盒），跟height、padding无关.给inline元素设置padding，改变的只是可视高度（红色边框），并没有改变实际高度（即绿色边框包裹住的部分）.当两个inline元素的字体相同时，inline的高度是100px，当字体不同时，会变为101px或102px 左右（因为div高度是由inline高度撑起来的，所以看div高度即可）；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<span>span元素</span>
<span style="font-family:宋体">你好</span>
</div>
</body>
</html>
span{
border:1px solid red;
padding:10px 20px;
line-height:100px;
}
div{
border:1px solid green;
}
2、block高度由内部文档流元素总和确定，可以设height，如果div中没有任何元素，则高度为0；如果元素脱离文档流，则不计算高度；
3、inline-block跟block类似，可以设置height；
1.4 元素分类
在新的HTML5标准中，不再分内联元素和块级元素，区分元素主要看样式，display:inline 即为内联元素， display:block即为块级元素，display:inline-block即为行内块元素；
1.5 注意
1、不要在display:inline元素中加一个display:block元素；
2、当有滚动条时，内联元素默认只在第一屏显示内容，右边的区域留空:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="div1">
1内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内2
<div style="border:1px solid blue; width:1000px">你好</div>
<span>span元素</span>
</div>
</body>
</html>
span{
border:1px solid red;
padding:10px 20px;
line-height:100px;
}
.div1{
border:1px solid green;
overflow:auto;
height:200px;
}
2 overflow溢出
1、用overflow设置是否显示滚动条；
2、auto是灵活设置；
3、scroll是永远显示；
4、hidden是直接隐藏溢出部分；
5、visible是直接显示溢出部分；
6、overflow可分为overflow-x、overflow-y；
3 脱离文档流
1、float；
2、position:absolute/fixed；
