css定位机制原理详解(标准流&定位&浮动)

一、css定位机制
分为普通流（标准流），浮动、绝对定位
1、标准流:默认状态是元素从左往右。从上往下的排列，也就是说标准流中元素的位置是由它在HTML中的位置决定的
块级元素特性：
块级元素大多为结构性标记

• 独占一行
• 可以设置宽高
• 如果不设置宽高，宽度默认为容器的100%
• 块级元素有div,p,h1~h6,ul,ol,li,dl(定义列表),dt,dd，table,form,hr(水平分割线),marquee(滚动文本)

行内元素特性：
行内元素大都为描述性标记

• 与其它元素同行显示
• 不可以设置宽高
• 宽高就是文字或者图片的宽高
• 行内元素有：span,a,b,i(斜体),u下划线,b(加粗),em,img.input,textarea,select,br(换行)，strong(加粗)

2、由于普通流是不灵活的，也就有了 定位，定位分为相对定位和绝对定位
（1）相对定位：指将元素从标准流中分离出来，相对于它原来的位置进行偏移。但它还依然在标准流中占据着它原来的位置。也就意味着相对于其它元素而言它还在它原来的位置上，而且它偏移后会覆盖在其它元素上

实例如下：

• 绿方块未使用相对定位的时候

• 绿方块使用相对定位并向右移动自生宽度之后