普通流定位
普通流，又称为文档流
块级元素：从上到下一个一个的排列
行内元素：一行内从左到右的排列
浮动定位
将元素排除在普通流之外，即脱离文档流
浮动元素不会占据页面空间
浮动元素会放置在"包含框"的左边或右边
浮动元素依旧位于包含框之内
浮动元素可以向左或向右浮动，直到碰见包含框的边缘或另一个已浮动的元素框为止
特点
1、浮动元素边缘不会超过其父元素的边缘
2、浮动元素不会重叠
3、浮动只能左右浮动，不会上下浮动
注意：非块级元素浮动的话，那么将会变成块级元素，允许修改 width 和 height
处理问题
1、让块级元素在同一行内显示
2、修改行内元素的 width 和 height
浮动属性
属性：float
取值：
none
left
right
清除浮动所带来的影响:
属性：clear
取值：left
right
both
显示方式
1、display
none：生成元素没有框，不占据页面空间，隐藏
block：按块级显示
inline：按行内方式显示
inline-block:行内块，所有的元素在一行内显示，允许修改width 和 height
控制元素的显示与隐藏
隐藏：display:none;
显示：
块级 ：display:block
行内 ：display:inline
2、将行内元素变成块级 或 行内块
目的：修改行内元素的宽和高
显示效果
1、visibility
可见性
取值：
visible ：默认值，可见的
hidden ：元素不可见，占据页面空间
collapse ：用在表格上
问题：visibility:hidden 与 display:none的区别
2、opacity
透明度
取值：0 - 1
opacity:0.5;
3、vertical-align
垂直方向对齐
td
img
取值：
baseline : 默认，基线对齐
top : 顶部对齐
bottom ：底部对齐
middle ：居中对齐
放在img 上，控制的是 img 左右两端文本的垂直对齐方式
4、光标
改变鼠标的显示效果
属性：cursor
取值：
default
pointer ：小手
crosshair ：+
text ： I
wait : 等待
help : ？
相对定位
元素框会相对于他原来的位置 偏移某个距离
如何用
position:relative
left:尺寸
right:尺寸
什么时候用
元素本身位置的微调
配合绝对定位使用
绝对定位
定义：脱离文档流 不占据页面空间
初始位置
相对于最近的已经定位的元素 那么参考位置相对于body进行定位
如何使用
position:absolute;
使用场合
弹出菜单