CSS 的定位机制

CSS有三种定位机制：标准流，浮动，定位。

标准流（normal flow）

标准流又被称为“文档流”或“普通流”。

标准流是指文档内元素的流动方向。内联元素是从左向右，遇到阻碍换行执行；块级元素独占一行，从上往下。

浮动（float）

浮动是指具有标准流属性的元素会脱离标准流的标准控制，移动到其父级元素的指定位置的过程。这种现象我称为脱离标准流，“脱标”。

float有三种属性：

　　left     元素向左浮动

　　right   元素向右浮动

　　none  元素不浮动（默认状态）

float的特性：

　　1.浮动的元素不占位置，脱离标准流，影响标准流，漂浮在其他标准流盒子的上面。

　　2.添加浮动的元素以最近的父级元素进行浮动对齐，但不会超过内边距的范围。

　　3.添加了浮动的元素，会具有行内块元素的特性。

清除浮动

（1）after伪写法

.clearfix:after {content: ""; 
　　　　　　　　　　display: block; 
　　　　　　　　　　height: 0; clear: both; 
　　　　　　　　　　visibility: hidden;  
　　　　　　　　　　}   
.clearfix {*zoom: 1;}   /* 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout，不测IE-6-7请自动忽略*/

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

（2）双伪元素清除浮动

.clearfix: before, .clearfix: after {
    content:"";
    display: table;
}
.clearfix: after {
    clear:both;
}
.clearfix {
    *zoom:1;
}

定位（position）

顾名思义，你想定哪定哪~

元素的定位属性主要包括两部分：边偏移和定位模式

1.边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

{position:属性值;}，如 top: 100px; left: 30px；

平时用的不多~

2.定位模式

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位（static）

文档流中的默认位置，标准流特性。

取消定位会用到：position: static

相对定位（relative）

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留，不脱标。

！！相对定位的元素不转行内块！！

绝对定位（absolute）

不占有位置，可以放在父级盒子的任意一个地方。

元素自动转为行内块，宽度和高度跟内容有关。

• 子绝父相/子绝父绝（挺重要）

　　子级是绝对定位，那么离他最近的父级一定要给一个相对定位（必要时给绝对定位），不然子级会以浏览器当前页面进行定位，有可能你会看不到它。

• 绝对定位下盒子的居中问题

　　参考算法：

1. 首先left 50% 父盒子的一半大小

2. 然后走自己外边距负的一半值就可以了 margin-left。

固定定位（fixed）

固定定位脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置，跟父级没有关系。

完全脱标，滚动条滚动不会影响它在浏览器窗口中的位置。

元素自动转为行内块，宽度和高度跟内容有关。

定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准	元素是否变成行内快元素
静态static	不脱标，正常模式	不可以	正常模式	忽略
相对定位relative	脱标，占有位置	可以	相对自身位置移动	否
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置	是
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置	是