CSS定位
CSS中的3种定位机制：标准文档流，浮动，position定位
标准文档流：
从上到下，从左到右，输出文档内容。
由块级元素（从左到右撑满页面，独占一行，碰到页面边缘会自动换行）和行级元素（能在同一行内显示，不会改变HTML文档结构）组成。
行级标签有span,strong,img,input等
行级元素有内联元素（可通过display:inline设置 如span,strong等）和内联块级元素（可通过display:inline-block设置 如img,input）
内联元素和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块级元素和其他元素在一行上，元素的高度、宽度及顶部和底部边距可设置。
块级元素和行级元素都是盒子模型。
盒子模型的立体结构：从第一层到第五层依次为：border、content+padding、background-image、background-color、margin。上层显示会覆盖下层的显示。
对盒子进行居中设置（可用于列布局）：
设置一个固定宽度，然后margin:0 auto; auto会根据浏览器的宽度自动地设置两边的外边距。
当设置了margin属性为auto的时候，不能再设置浮动或绝对定位属性。否则居中效果失效。
浮动：
浮动能够实现横向多列布局，通过float属性
特点：
1.元素会左、右移动直到触碰到包含它的容器或其它浮动元素为止，设置了浮动的元素仍然处于标准文档流中。
2.当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。
3.元素设置浮动后，紧邻在其后的元素会受到影响。
清除浮动(一般是对受到浮动影响的元素设置，受到影响的也就是紧邻在浮动元素后的元素)：
1.设置被影响元素clear属性---clear:both/left/right
2.被影响元素同时设置width:100%(或固定宽度)+overflow:hidden;
3.利用<br/>强制换行也可清除浮动对其后元素的影响，但不建议使用
Position属性：
position拥有三种定位形式：静态定位，相对定位，绝对定位。
可设置4个属性值：static,relative,absolute,fixed(固定定位也属于绝对定位)
relative相对定位特点：
相对于自身原有位置进行偏移，仍处于标准文档流中，随即拥有偏移属性(即top/left/right/bottom属性)和z-index属性。
absolute绝对定位特点：
建立了以包含块为基准的定位，完全脱离了标准文档流，随即拥有偏移属性的z-index属性。
当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。
当未设置偏移量：
1.无论是否存在已定位祖先元素，都保持在元素初始位置
当设置了偏移量时偏移的参照基准：
1.无已定位祖先元素，以<html>为偏移参照基准
2.有已定位的祖先元素，会找最近的祖先元素进行偏移
Fixed定位也属于绝对定位，也会脱离标准文档流，但它有异于absolute，它的位置固定不变，兄弟元素会从其下穿过
1.未设置偏移量
有已定位祖先元素，以祖先元素为基准定位; 无已定位祖先元素，以浏览器窗口为基准定位
2.设置了偏移量
设置偏移量，有无已定位祖先元素，均以浏览器窗口为基准偏移