CSS基础学习二(标准文档流，浮动，定位）

一，标准文档流

web页面本质上是个流，内容是从上而下显示的。

二，脱标的方法

1，浮动

2，绝对定位

3，固定定位

三，浮动 float

float  可以让块状元素并排

清除浮动  clear: both

四，相对定位

相对定位 position: relative 

1、相对定位是微调元素用的，相对自己原本的位置来调整

2、相对定位不脱标，老家留坑，形影分离（真实位置仍然在标准文档流里，出去的是影子）

3、最大的作用是给绝对定位做参考点。

五，绝对定位

绝对定位 position: absolute

A,以盒子为参考点

1、如果祖先有定位，那就以这个最近的有定位的祖先为参考点。（不论这个有定位的祖先是相对定位还是绝对定位，都以它为参考点）

    工程上用的比较多的是 子绝父相 （子节点为绝对定位，父节点为相对定位）

B,没有盒子为参考点时，就以body为参考点

绝对定位脱标（脱离文档标准流的）

绝对定位的盒子居中

left: 50%;margin-left: -width/2px

六、固定定位

固定定位：position:fixed

1、元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。 就是他是基于屏幕可视范围来定位的。

2、无论页面如何滚动，盒子显示位置不变。

3、固定定位是脱标的