第3章：CSS基礎(chǔ)知識(shí)

3.1 CSS單位

3.1.1 絕對(duì)單位

• CSS單位分為兩大類：絕對(duì)單位 和 相對(duì)單位服猪。絕對(duì)單位使用的是物理度量單位供填，大小是固定的。在前端開(kāi)發(fā)中一般不會(huì)用到絕對(duì)單位罢猪，了解即可近她。

3.1.2 相對(duì)單位

px(像素)

• px（pixel）像素膳帕，是分辨率的基本單位粘捎，是屏幕顯示最小的點(diǎn)。像素不像是厘米危彩，屬于物理上絕對(duì)的大小單位攒磨，它可以很大，也可以很小汤徽。
• 如果畫(huà)面由很多且很小的顯示點(diǎn)構(gòu)成娩缰，那么畫(huà)面就很清晰，我們稱為“分辨率高”谒府；相反拼坎，如果畫(huà)面由很少且很大的顯示點(diǎn)構(gòu)成，“分辨率低”畫(huà)面就模糊完疫。
• 比如分辨率為“800px × 600px”泰鸡，就是說(shuō)計(jì)算機(jī)的顯示由寬是800個(gè)像素點(diǎn)，高是600個(gè)像素點(diǎn)構(gòu)成壳鹤。

%(百分比)

• CSS中支持百分比作為單位的屬性大致有三大類：
  • width盛龄、height、font-size根據(jù)父元素相同屬性值來(lái)進(jìn)行百分比計(jì)算：
    • 比如父元素的width:100px芳誓，那么子元素width:50%讯嫂，則實(shí)際寬度為50px；
    • 比如父元素的font-size:30px兆沙，那么子元素font-size:50%欧芽，則實(shí)際字體大小為15px；
  • line-heigt根據(jù)父元素的font-size屬性值來(lái)進(jìn)行百分比計(jì)算葛圃；
  • vertical-align根據(jù)當(dāng)前元素的line-heigt屬性值來(lái)進(jìn)行百分比計(jì)算千扔；

em（當(dāng)前元素字體大小的倍數(shù)）

• em是當(dāng)前元素字體大小的百分比憎妙，例如當(dāng)前元素的font-size:10px時(shí)，1em等于10px曲楚。
• 如果當(dāng)前元素沒(méi)有定義font-size厘唾，則會(huì)基礎(chǔ)父元素的font-size。如果所有祖先元素都沒(méi)定義font-size龙誊，則會(huì)繼承瀏覽器默認(rèn)的font-size(所有瀏覽器默認(rèn)的font-size:16px)抚垃。

『em單位的使用技巧』

1. 通過(guò)text-indent:2em實(shí)現(xiàn)首行縮進(jìn)；
2. 使用em作為統(tǒng)一單位趟大，任何元素都不設(shè)置具體的px單位鹤树，而是指定根元素的font-size的倍數(shù)。但值得注意的是逊朽，如果出現(xiàn)多重嵌套內(nèi)容時(shí)罕伯，使用em作為單位則需要重新計(jì)算；
3. 使用em作為統(tǒng)一字體大小單位叽讳，當(dāng)需要改變頁(yè)面整體字體大小時(shí)追他，無(wú)需逐個(gè)修改，只改根元素的字體大小即可岛蚤；

rem（根元素字體大小的倍數(shù)）

• rem(font size of the root element)邑狸，相對(duì)于根元素字體大小的倍數(shù)。
• 是CSS3新引入的單位涤妒，除了IE8以及更早版本之外单雾，大部分主流瀏覽器都支持rem。rem布局也是移動(dòng)端最常用的字體大小之一届腐。
• em是相對(duì)于“當(dāng)前元素”的字體大小，而rem是相對(duì)于“根元素”的字體大小蜂奸，從而可以避免多重嵌套導(dǎo)致的復(fù)雜計(jì)算犁苏。

『實(shí)際開(kāi)發(fā)中，px扩所、em和rem各自的使用場(chǎng)景』

• 國(guó)外大多數(shù)網(wǎng)站都使用em作為單位围详，W3C也建議使用em。但國(guó)內(nèi)大部分網(wǎng)站使用px作為單位祖屏。這是由于國(guó)外的法律規(guī)定（如美國(guó)）網(wǎng)站必須具有兼容性助赞，為了方便對(duì)IE早期版本的兼容，em更適合袁勺。
• 所以：
  • 需要兼容IE或者其他低版本瀏覽器時(shí)雹食，使用em單位；
  • 不需要兼容IE期丰，也不考慮移動(dòng)端瀏覽器時(shí)群叶，使用px單位吃挑；
  • 需要在移動(dòng)端且不考慮IE等比版本瀏覽器時(shí)，使用rem單位街立；

3.2 CSS特性

3.2.1 繼承性

• CSS的繼承性是指舶衬，子元素可以繼承父元素的某些樣式屬性，從而減少重復(fù)代碼的編寫(xiě)赎离。
• 但不是所屬性都具有繼承性逛犹，CSS中具有繼承性的屬性有三大類：
  • 文本相關(guān)的屬性：font(font-family/font-size/font-style/font-weight)、line-height梁剔、text-align虽画、textindent、word-spacing憾朴；
  • 列表相關(guān)的屬性：list-style-image狸捕、list-style-position、list-style-type众雷、list-style灸拍；
  • 顏色相關(guān)的屬性：color；

3.2.2 層疊性

• CSS的層疊性是指砾省，同一個(gè)元素可以根據(jù)選擇器的權(quán)重進(jìn)行樣式的覆蓋鸡岗。

3.3 CSS優(yōu)先級(jí)

• 當(dāng)CSS樣式層疊時(shí)，遵循一定的優(yōu)先級(jí)規(guī)則來(lái)覆蓋编兄，常見(jiàn)的情況有五種：

  • 引用方式?jīng)_突：行內(nèi)樣式 > (內(nèi)部樣式 = 外部樣式)轩性；

    • 行內(nèi)樣式的優(yōu)先級(jí)最高，內(nèi)部樣式和外部樣式的優(yōu)先級(jí)相等狠鸳，以最后引入的樣式為準(zhǔn)揣苏。

  • 繼承方式?jīng)_突：以最近的祖先元素為準(zhǔn)

  • 指定樣式?jīng)_突：行內(nèi)樣式 > id選擇器 > class選擇器 > 元素選擇器；

    • 當(dāng)指定“當(dāng)前元素”的樣式發(fā)生沖突時(shí)件舵，以樣式權(quán)重高者為準(zhǔn)

    選擇器	權(quán)重值(數(shù)額大的權(quán)重高)
    通配符	0
    偽元素（比如:hover）	1
    元素選擇器	1
    class選擇器	10
    偽類	10
    屬性選擇器	10
    id選擇器	100
    行內(nèi)選擇器	1000

  • 繼承樣式和指定樣式?jīng)_突：以指定樣式為準(zhǔn)卸察；

  • !important：!important規(guī)則來(lái)改變樣式的優(yōu)先級(jí)，它同樣也遵循后來(lái)者居上的覆蓋原則铅祸；

3.4 CSS引入方式

• CSS引入方式有三種：link方式外部樣式表坑质、內(nèi)部樣式表和行內(nèi)樣式表。

說(shuō)明：另外還有一種@import方式临梗，但在實(shí)際開(kāi)發(fā)中極少使用涡扼。原因在于，@import方式先加載HTML后加載CSS盟庞，而link方式是先加載CSS后加載HTML吃沪。

3.4.1 外部樣式表

• 外部樣式表是把CSS代碼和HTML代碼單獨(dú)放在不同文件中，然后在HTML文檔中使用<link>標(biāo)簽來(lái)引入CSS樣式表什猖。當(dāng)樣式被應(yīng)用到多個(gè)頁(yè)面時(shí)巷波，外部樣式表是最理想的方案萎津，可以提升網(wǎng)站性能和可維護(hù)性。

3.4.2 內(nèi)部樣式表

• 外部樣式表是最常用的CSS引用方式抹镊，但不代表內(nèi)部樣式表和行內(nèi)樣式表就一無(wú)是處锉屈。
• 在實(shí)際的開(kāi)發(fā)當(dāng)中，多個(gè)頁(yè)面的公有樣式應(yīng)當(dāng)使用外部樣式表垮耳，而單個(gè)頁(yè)面的個(gè)別樣式則可以使用內(nèi)部樣式來(lái)定義颈渊。

6.4.3 行內(nèi)樣式表

• 如果只需要在頁(yè)面具體的某個(gè)小地方修改樣式，或者需要通過(guò)權(quán)重來(lái)覆蓋樣式時(shí)终佛，可以使用行內(nèi)樣式俊嗽。

3.5 CSS選擇器

• 通過(guò)CSS選擇器可以選擇頁(yè)面上你想要的標(biāo)簽元素，基本的選擇器有：元素選擇器铃彰、id選擇器绍豁、class選擇器、群組選擇器牙捉。
• 初次之外竹揍，還有層次選擇器。層次選擇器就是通過(guò)元素之間的層次關(guān)系來(lái)選擇元素邪铲。
• 常見(jiàn)的層次選擇器包括：父子芬位、后代、兄弟和相鄰带到。