一、CSS基礎(chǔ)知識(shí)

1.CSS單位

絕對(duì)單位

很少用

相對(duì)單位

1.px，全稱pixel，即像素。
2.%
分為三大類：
（1）width、height、font-size的百分比是相對(duì)于父元素“相對(duì)屬性”的值來計(jì)算的。
（2）line-height的百分比是相對(duì)于父元素的font-size值來計(jì)算的。
（3）vertical-align的百分比是相對(duì)當(dāng)前元素的line-height值來計(jì)算的。
3.em
em是相對(duì)于“當(dāng)前元素”的字體大小而言的。其中，1em等于“當(dāng)前元素”字體大小。這里的字體大小指的是以px為單位的font-size值。例如，當(dāng)前元素的font-size值為10px，則1em等于10px；當(dāng)前元素的font-size值為20px，則1em等于20px，以此類推。
4.rem
rem，全稱是font size of the root element，指的是相對(duì)于根元素（即html元素）的字體大小。rem布局也是移動(dòng)端最常用的字體大小之一。
rem和em很相似，不過區(qū)別也很大：em是相對(duì)“當(dāng)前元素”的字體大小，而rem是相對(duì)“根元素”的字體大小。這里的font-size指的都是以px為單位的font-size值。

2.CSS特性

CSS具有量大特性：繼承性和層疊性。

繼承性

具有繼承屬性有三大類：
1.文本相關(guān)屬性：font-family、font-size、font-style、font-weight、font、line-height、text-align、text-indent、word-spacing；
2.列表相關(guān)屬性：list-style-image、list-style-position、list-style-type、list-type；
3.顏色相關(guān)屬性：color；
padding、margin、border等不具備繼承性。

層疊性

原則：“后來者居上”原則有三個(gè)前提：
1 元素相同
2 屬性相同
3 權(quán)重相同

3.CSS優(yōu)先級(jí)

樣式覆蓋沖突有以下5種情況：
1 引用方式?jīng)_突
2 繼承方式?jīng)_突
3 指定樣式?jīng)_突
4 繼承樣式與指定樣式?jīng)_突
5 ！important

引用方式?jīng)_突

行內(nèi)樣式>（內(nèi)部樣式 = 外部樣式）

繼承方式?jīng)_突

原則：最近的祖先元素優(yōu)先級(jí)最大。

指定樣式?jīng)_突

行內(nèi)樣式>id選擇器>class選擇器>元素選擇器

繼承樣式和指定樣式?jīng)_突

指定樣式獲勝。