Web前端基礎知識整理-CSS篇

CSS手冊：http://t.mb5u.com/css3/
選擇器
1、元素選擇符

1. 通配選擇符(*):選擇全部元素
2. 類型選擇符(E)：以文檔對象類型做爲選擇符
3. id選擇符(E#id):以惟一標識符id屬性等於id的E對象做爲選擇符
4. class選擇符(E.class):以class屬性包含class的E對象做爲選擇符

2、關係選擇符

1. 包含選擇符(E F):選擇全部被E元素包含的F元素
2. 子選擇符(E>F):選擇全部做爲E元素的子元素F。
3. 相鄰選擇符(E+F):選擇緊貼再E元素以後F元素。
4. 兄弟選擇符(E~F):選擇E元素後面的全部兄弟元素F。

3、屬性選擇符

4、僞類選擇符

5、僞對象選擇符

優先級：
標籤選擇符、僞類與僞對象：權重爲1。
類選擇符、屬性選擇符：權重爲10。
ID選擇符：權重爲100。
內聯style屬性：權重爲1000。
!important：權重爲無窮。

p<class<標籤.class<id<標籤.id<自定義

---

盒模型
1、基本概念：盒模型由裏向外是由：content、padding、border、margin構成的。
2、類型：標準盒模型、IE模型

1. 標準盒模型：width=content

   height=content

2. IE盒模型：width=content+padding+border

   height=content+padding+border

3、CSS設置兩種模型

/* 標準模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

---

定位
1、定位position分類

1. static默認值，沒有定位，元素出如今正常的流中。
2. absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。
3. relative：生成相對定位的元素，相對於其正常位置進行定位。
4. fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。
5. inherit：規定應該從父元素繼承 position 屬性的值。

---

尺寸單位
1、文本相對長度單位

1. em（CSS1）：相對於當前對象內文本的字體尺寸

   若是body的font-size：設置爲14px，那麼1em = 14px

2. ex（CSS1）：相對長度單位。相對與支付"x"的高度，一般爲字體高度的一半。
3. ch（CSS3）：相對與數字「0」的寬度
4. rem（CSS3）：相對於根元素（html元素）font-size的計算倍數
   若是html的font-szie：設置爲14px，那麼1rem = 14px

2、視口相對長度單位

1. vw（CSS3）：相對於視口的寬度。視口被平均分爲100單位的vw
2. vh（CSS3）: 相對於視口的高度。視口被平均分爲100單位的vh
3. vm（CSS3）: 相對於視口的寬度或高度。對於視口的寬度或高度，老是相對於小的那個。視口的寬度或高度被均分爲100單位的vm