====================================
CSS基础
====================================

CSS权重
------------------------------------
各个级别的CSS权值的大小

important > inline > ID > class > 标签|伪类|属性选择 > 伪对象 > 继承 > 通配符

比较规则:

**比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数.**
    
权值大的样式最終被采用,如 *11个标签的定义比不上1个类的定义, 1个类加11个标签比不上2个类的权重高.*

CSS定位
-------------------------------------
四种定位方式:

* position : fix 

  相对浏览器 (0,0) 定位
* position : relative 
  
  相对元素原来应该在的位置的 (0,0) 定位(是一种移位定位)

  **占据文档流** (元素移出很远，它原来位置下来的其他元素也不会补充上来)

  采用 position : relative 的div只会改变其自身的位置，对页面中其他的DIV没有影响
* position : absolute 
  
  **不占据文档流** (一旦设置当前元素为 position : absolute, 下面的元素自动补充上来)
  
  采用 position : absolute 的div不仅改变其自身的位置，对页面中其他的DIV也会产生影响

  #. 默认相对浏览器視窗(0,0)定位
  #. 父窗口使用 position : relative, 则相对父容器(0,0)定位 

* position : static 
  
  默认情况下所有元素都采用 static 定位方式


BOX模型
------------------------------------------------------
+ 普通层 （处于一个平面)
+ Float层 （处于另一个平面)

DIV的浮动
------------------------------------
#. 让一个层的一部分遮住另一个层
    #. 先设置上层的层的定位方式

        .. code-block:: css
            
            position : relative;

    #. 再设置上层的层的偏移量, 通过 *top/bottom/left/right* 等