css基礎一（權重與position）

權重

1、權重，瞭解權重必須先了解css樣式的6種基礎選擇器

1. id選擇器  #

2. 類選擇器 .className

3. 屬性選擇器 [attr]

4. 僞類和僞元素 :hover   :first-line

5. 標籤選擇器  p

6. 通配符選擇器 *

2、其它的選擇符都可由基本的組成，組合的方式分爲三種

1. 後代選擇符 .className  .classChildName

 2. 子選擇符  .className > .classChildName

3. 相鄰選擇符 .className + .classChildName

3、而所謂的權重就是指這些選擇符的優先級，優先級和權重有以下規則

1. 優先級越高的css樣式會覆蓋優先級低的樣式，優先級越高權重越高

2. 計算權重的規則，根據w3c的css規範：

   • 計算選擇符中 id選擇器 的數量 （假設是100）

   • 計算選擇符中 類選擇器、屬性選擇器、僞類選擇器 的數量（假設是10）

   • 計算選擇符中 標籤選擇器、僞元素 的數量（假設是1）

3. 比較各自選擇符的優先級時，計算權重，權重大則優先級高

4. 從博客園看到的口訣：

   權重記憶口訣。從0開始，一個行內樣式+1000，一個id+100，一個屬性選擇器/class或者僞類+10，一個元素名，或者僞元素+1

position

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
效果圖：