權(quán)重
一、權(quán)重，了解權(quán)重必須先了解css樣式的6種基礎(chǔ)選擇器
1. id選擇器 #
2. 類選擇器 .className
3. 屬性選擇器 [attr]
4. 偽類和偽元素 :hover :first-line
5. 標(biāo)簽選擇器 p
6. 通配符選擇器 *
二、其它的選擇符均可由基本的組成，組合的方式分為三種
1. 后代選擇符 .className .classChildName
2. 子選擇符 .className > .classChildName
3. 相鄰選擇符 .className + .classChildName
三、而所謂的權(quán)重就是指這些選擇符的優(yōu)先級(jí)，優(yōu)先級(jí)和權(quán)重有如下規(guī)則
優(yōu)先級(jí)越高的css樣式會(huì)覆蓋優(yōu)先級(jí)低的樣式，優(yōu)先級(jí)越高權(quán)重越高
計(jì)算權(quán)重的規(guī)則，根據(jù)w3c的css規(guī)范：
計(jì)算選擇符中 id選擇器 的數(shù)量 （假設(shè)是100）
計(jì)算選擇符中 類選擇器、屬性選擇器、偽類選擇器 的數(shù)量（假設(shè)是10）
計(jì)算選擇符中 標(biāo)簽選擇器、偽元素 的數(shù)量（假設(shè)是1）
比較各自選擇符的優(yōu)先級(jí)時(shí)，計(jì)算權(quán)重，權(quán)重大則優(yōu)先級(jí)高
-
從博客園看到的口訣：
權(quán)重記憶口訣。從0開(kāi)始，一個(gè)行內(nèi)樣式+1000，一個(gè)id+100，一個(gè)屬性選擇器/class或者偽類+10，一個(gè)元素名，或者偽元素+1
position
static
默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
按照正常的塊級(jí)元素，行內(nèi)元素特性進(jìn)行顯示
fixed
生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。（即使頁(yè)面滾動(dòng)，也會(huì)留在相同的位置）
元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
inherit
規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
relative
生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。
abslute 參考自
生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。(脫離標(biāo)準(zhǔn)文檔流)
- 層級(jí)關(guān)系為：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是參照物
<div—————————-沒(méi)有設(shè)置為定位元素，不是參照物
<div———————- position:relative 參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：
為改變參照物（橘色框）后的效果
-
層級(jí)關(guān)系為：
<div ——————————— position:relative;最近的祖先定位元素，參照物
<div—————————-沒(méi)有設(shè)置為定位元素，不是參照物
<div———————-沒(méi)有設(shè)置為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：
absolute -
參照物為最頂級(jí)的元素情況。
層級(jí)關(guān)系為：
<div ———————————沒(méi)有設(shè)置為定位元素，不是參照物
<div—————————-沒(méi)有設(shè)置為定位元素，不是參照物
<div———————-沒(méi)有設(shè)置為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：
absolute -
僅使用margin屬性布局絕對(duì)定位元素的情況
此情況，margin-bottom 和margin-right的值不再對(duì)文檔流中的元素產(chǎn)生影響，因?yàn)樵撛匾呀?jīng)脫離了文檔流。另外，不管它的祖先元素有沒(méi)有定位，都是以文檔流中原來(lái)所在的位置上偏移參照物。
圖9中，使用margin屬性布局相對(duì)定位元素。
層級(jí)關(guān)系為：
<div ——————————— position:relative; 不是參照物
<div—————————-沒(méi)有設(shè)置為定位元素，不是參照物
<div———————-沒(méi)有設(shè)置為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果圖：
absolute
