css基础一（权重与position）

一、权重，了解权重必须先了解css样式的6种基础选择器

1. id选择器  #

2. 类选择器 .className

3. 属性选择器 [attr]

4. 伪类和伪元素 :hover   :first-line

5. 标签选择器  p

6. 通配符选择器 *

二、其它的选择符均可由基本的组成，组合的方式分为三种

 1. 后代选择符 .className  .classChildName

 2. 子选择符  .className > .classChildName

 3. 相邻选择符 .className + .classChildName

三、而所谓的权重就是指这些选择符的优先级，优先级和权重有如下规则

1. 优先级越高的css样式会覆盖优先级低的样式，优先级越高权重越高

2. 计算权重的规则，根据w3c的css规范：

   • 计算选择符中 id选择器 的数量 （假设是100）

   • 计算选择符中 类选择器、属性选择器、伪类选择器 的数量（假设是10）

   • 计算选择符中 标签选择器、伪元素 的数量（假设是1）

3. 比较各自选择符的优先级时，计算权重，权重大则优先级高

4. 从博客园看到的口诀：

   权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

static

> 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

按照正常的块级元素，行内元素特性进行显示

fixed

 > 生成绝对定位的元素，相对于浏览器窗口进行定位。（即使页面滚动，也会留在相同的位置）

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

inherit

规定应该从父元素继承 position 属性的值。

relative

生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

abslute 参考自

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。(脱离标准文档流)

• 层级关系为：

  div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物
  div—————————-没有设置为定位元素，不是参照物
  div———————- position:relative 参照物
  div box1
  div box2 ——–position:absolute; top:50px; left:120px;
  div box3
  效果图：
  
  为改变参照物（橘色框）后的效果
  层级关系为：
  div ——————————— position:relative;最近的祖先定位元素，参照物
  div—————————-没有设置为定位元素，不是参照物
  div———————-没有设置为定位元素，不是参照物
  div box1
  div box2 ——–position:absolute; top:50px; left:120px;
  div box3
  效果图：
  

• 参照物为最顶级的元素情况。
  层级关系为：
  div ———————————没有设置为定位元素，不是参照物
  div—————————-没有设置为定位元素，不是参照物
  div———————-没有设置为定位元素，不是参照物
  div box1
  div box2 ——–position:absolute; top:50px; left:120px;
  div box3
  效果图：
  

• 仅使用margin属性布局绝对定位元素的情况
  此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
  图9中，使用margin属性布局相对定位元素。
  层级关系为：
  div ——————————— position:relative; 不是参照物
  div—————————-没有设置为定位元素，不是参照物
  div———————-没有设置为定位元素，不是参照物
  div box1
  div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
  div box3
  效果图：