关于元素display属性，我们可以通过修改display属性，去改变元素在页面的表现行为
页面元素一般情况下分为 block 和 inline
block元素的特点
- 默认独占一行
- 没有设置宽度，撑满整行
- 支持所有CSS样式
inline元素的特点
- 同排可以继续跟同类的标签
- 内容撑开宽高
- 不支持宽高
- 不支持上下的margin和padding
- 代码换行被解析（产生一个空白，是字体大小的1/2）
inline-block元素的特点
- 块在一行显示
- 行内属性标签支持宽高
- 没有宽度的时候内容撑开宽度
- 代码换行被解析
- ie6 ie7 不支持块属性标签的inline-block
其他 display的值 https://developer.mozilla.org/en-US/docs/Web/CSS/display
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 首先元素浮动后，产生的特性:
- 块元素在一排显示
- 内联元素支持宽高
- 不设置宽度，内容撑开宽度
- 脱离文档流
- 提升层级半层
- 加高
问题：扩展性不好
- 父级浮动
问题：页面中所有元素都加浮动，margin左右自动失效（floats bad ！）
- inline-block
问题：margin左右自动失效；
- 空标签清浮动
问题：IE6 最小高度 19px；(font-size:0px)（解决后IE6下还有2px偏差 设置overflow:hidden）
- br清浮动
<br clear="all"/>
问题：不符合工作中：结构、样式、行为，三者分离的要求。
- after伪类 清浮动方法（现在主流方法）
.clear:after {
content: ' ';
display: block;
clear: both;
}
.clear{
zoom: 1;
}after伪类: 元素内部末尾添加内容
:after{ content: "添加的内容"; }zoom 缩放 (IE6,7不支持after伪类, 兼容方法)
- 触发 IE下 haslayout，使元素根据自身内容计算宽高。
- overflow:hidden
问题：需要配合 宽度 或者使用 zoom 兼容IE6, 7；
相对定位 position: relative;
- 不影响元素本身的特性
- 不使元素脱离文档流（??? 应该已经不属于普通文档流，但是却占据的文档流的位置）
- 如果没有定位偏移量，对元素本身没有任何影响
定位元素位置控制：top/right/bottom/left 定位元素偏移量。
绝对定位 position: absolute;
- 使元素完全脱离文档流
- 使内嵌支持宽高
- 块属性标签内容撑开宽度
- 如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移
- 相对定位一般都是配合绝对定位元素使用
z-index: [number];
定位层级：定位元素 默认后者层级高于前者
position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法
position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法（IE6不支持fixed）