定位方向: left | right | top | bottom
position:static
静态定位。默认值，就是文档流
position:absolute
绝对定位 特点
- 元素使用绝对定位之后不占据原来的位置（脱标）
- 元素使用绝对定位，位置是从浏览器出发
- 嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
- 嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发
- 给行内元素使用绝对定位之后，转换为行内块。（不推荐使用，推荐使用display:inline-block;）
position: relative
相对定位 特点
- 使用相对定位，位置从自身出发
- 还占据原来的位置
- ==子绝父相（父元素相对定位，子元素绝对定位）==
- 行内元素使用相对定位不能转行内块
position:fixed
固定定位 特点
- 固定定位之后，不占据原来的位置（脱标）
- 元素使用固定定位之后，位置从浏览器出发
- 元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）
定位的盒子居中显示
- margin:0 auto; 只能让标准流的盒子居中对齐。
- 定位的盒子居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)
.nav{
width:500px;
height:60px;
left:50%;
margin-left:-480px
}标签包含规范
- div可以包含所有的标签
- p标签不能包含div h1等标签
- h1可以包含p，div等标签
- 行内元素尽量包含行内元素，行内元素不要包含块元素
规避脱标流
- 尽量使用标准流
- 标准流解决不了的使用浮动
- 浮动解决不了的使用定位
