《逆战班学习：第13天》CSS定位

《逆战班学习：第13天》CSS定位

CSS定位提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

CSS 有三种基本的定位机制：普通流、浮动流、定位流。

1.普通流定位
是指元素排版布局过程中，元素会自动从左到右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
标准流的特点：
(1).块级元素从上到下，独占一行
(2).行内元素，行内块级元素从左到右在一行中显示。
(3).占据一定的位置。
　
3.浮动流定位
浮动流
定义：浮动流是一种半脱离标准流的排版方式，它只有一种排版方式，就是水平排版，它只能其父盒子中设置某个元素左对齐或者右对齐，应用于水平方向的布局，属性 float ，取值 right/left/none
注意点：
(1)浮动流没有居中对齐，也就是没有center这个取值
(2)在浮动流中margin ：0 auto是不生效的

浮动元素排序规则
(1).相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素显示在后面
(2).不同方向上的元素，左浮动会找左浮动，右浮动会找右浮动
(3).浮动元素浮动后的位置，由浮动元素在浮动之前在标准流中的位置来确定

3.定位流定位
CSS定位方式有四种：默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）

Position属性
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及"bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
inherit 规定应该从父元素继承 position 属性的值。

absolute 绝对定位特征:
(1).脱离文档流,不占位置
(2). 默认参考html的00点(浏览器零点)
(3).如果有父级,且父级有定位,那就参考父级元素(默认定位除外) 相当于给子元素指定了参考物

relative: 相对定位特征:
(1). 占据文档流,占位置
(2).参考自身加载在页面中的位置

fixed: 固定定位特征:
(1). 脱离文档流,不占位
(2). 元素固定在页面中不随着页面滚动而滚动
(3). 参考浏览器的00点