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也会产生影响

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

• position : static

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

BOX模型

• 普通层 （处于一个平面)
• Float层 （处于另一个平面)

DIV的浮动

1. 让一个层的一部分遮住另一个层

   1. 先设置上层的层的定位方式

      position : relative;
      

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