参考：
css中position属性（absolute/relative/static/fixed）
CSS之定位布局（position，定位布局技巧）
CSS布局模型
1.position：static：静态定位（默认）
无特殊定位，对象遵循正常文档流。
top，right，bottom，left等属性不会被应用。
2.position：relative：
对象遵循正常文档流，
但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
而其层叠通过z-index属性定义。
3.position：absolute:
对象脱离正常文档流，
使用top，right，bottom，left等属性进行绝对定位。
而其层叠通过z-index属性定义。
4.position：fixed：
对象脱离正常文档流，
使用top，right，bottom，left等属性以窗口为参考点进行定位，
当出现滚动条时，对象不会随着滚动。
而其层叠通过z-index属性定义。
文档流：
将窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素，即为文档流。
使元素脱离文档流的情况：浮动 绝对定位
注意
1、relative和static方式在最外层时是以<body>标签为定位远点的，
而absolute方式在无父级是position非static定位时是以<html>作为原点的。
<html>和<body>元素相差8px左右。
2、如果使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，
否则left/right/top/bottom属性会使用它们的默认值 auto ，
这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，
简单讲就是都变成relative，会占用文档空间
3、使用static定位或无position定位的元素z-index属性是无效的。
当你定义的CSS中有position属性值为absolute、relative或fixed，用z-index此取值方可生效。
此属性参数值越大，则被层叠在最上面
4、脱离正常文档流:position：absolute 和 position：fixed
正常文档流：position：relative 和 position：static
5、定位布局技巧：position：relative 与 position：absolute 结合使用:
如果对元素设置了absolute后，其父级元素都没有设置position：relative，
其会以body为父级。这样的话我们该元素定位到我们的目标位置将很困难，量像素麻烦。
当子代设置了position：absolute后，其父级那个设置了position：relative，
这个子代就会从该父级元素最左上方作为起点移动，并且遵循就近原则，即子代向上找父级，
当找到第一个有父级设置了relative就以它最左上方作为起点。
relative 与 absolute 结合的方式，对定位布局起到了便利，
需要移动的距离也得到缩小，不用从body开始整个页面来量取像素，同时也方便管理，结构清晰。
参考：
两个inline元素span或者两个inline-block元素div写成一行，无间隙。分开写成两行，则会有间隙
去除间隙方法：
对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙
现在这种方法已经可以兼容各种浏览器，以前chrome浏览器是不兼容的
CSS元素分类
参考：CSS元素分类
常用的块状元素有：
<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
常用的内联块状元素有：
<img>、<input>inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
1386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
