定位
文档流
是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子占据自己的位置。
relative
相对元素定位，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
absolute
绝对定位，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed
生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
static
默认值。没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。约等于标准流
inherit
从父元素继承position属性的值。
总结：
- relative相对正常位置，absolute相对最近的已定位父元素。
- relative不可以设置大小，absolute可以设置大小。
- absolute和fixed的块元素会自动转化为行内块元素。模式转换
- 定位元素是浮动在正常的文档流之上的，可以用z-index属性来设置元素的层级。
- 父相子绝
使用场景
当页面中出现盒子压盒子的效果是，推荐使用定位。
拓展
标准流盒子居中：
margin： 0 auto；
绝对定位的盒子居中显示
left：50%；/*父元素的宽度一半*/
margin-left：/*元素自己的宽度一半*/
浮动特性
- 浮动的盒子会向左向右浮动，碰到父元素边界，浮动元素、未浮动的元素才停下来
- 相邻元素的块元素可以并在一行，超出父元素宽度就换行
- 浮动让行内元素自动转化为行内块元素
- 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字环绕的效果
- 父元素内整体浮动的元素无法撑开父元素，需要清除浮动，如果不清除浮动，父盒子的宽度为0
- 浮动元素之间没有垂直margin的合并
- 浮动的盒子不需要给宽，大小根据自己的内容决定。
元素分类
块元素
代表标签
div，p，ul，li，h1~h6，dl，dt，dd
特点
- 支持全部的样式
- 如果没有设置宽度，默认的宽度为父级宽度100%
- 盒子占据一行，即使设置了宽度
内联元素（行内元素）
代表标签
a，span，em，b，strong，i
特点
- 支持部分样式（不支持宽，高，margin上下，padding上下）
- 宽高由内容决定
- 盒子并在一行
- 代码换行，盒子之间会产生间距
- 子元素是内联元素，父元素可以用
text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式
解决内联元素间隙的方法
- 去掉内联元素之间的换行
- 将内联元素的父级设置
font-size为0，内联元素自身再设置font-size
内联块元素（行内块元素）
特点
- 支持全部样式
- 如果没有设置宽高，宽高由内容决定
- 盒子并在一行
- 代码换行，盒子会产生间距
- 子元素是内联块元素，父元素可以用
text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式
应用场景
实际开发中，块元素用的比较多，所以经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。