摘要：樣式聲明通過一個(gè)稱為級(jí)聯(lián)的過程來解釋和決定。級(jí)聯(lián)級(jí)聯(lián)可能是中最容易被弄錯(cuò)的屬性之一。因此很容易認(rèn)為元素的視覺邊界等于其寬度，但情況并非如此。

如果你在日常工作中使用CSS，那么你的主要目標(biāo)很可能集中在使事情看起來是正確的。最終得到的正確結(jié)果遠(yuǎn)比如何實(shí)現(xiàn)更重要。這意味著相比正確的語(yǔ)法和視覺效果我們更少關(guān)注CSS的實(shí)現(xiàn)原理。

你可能還沒有意識(shí)到，但CSS的視覺效果通常是操縱隱藏屬性的間接結(jié)果。一些CSS屬性（如 background-color）和你看到的視覺效果就有顯然的直接關(guān)系。而其他的（比如display）對(duì)我們?cè)S多人來說仍然含糊不清，因?yàn)榻Y(jié)果似乎高度依賴于上下文。

我懷疑很多開發(fā)者都不能簡(jiǎn)單的描述當(dāng)設(shè)置了display: block之后實(shí)際上做了什么。最多你可能只是直觀地了解這個(gè)屬性是如何工作的。沒關(guān)系，你可以在不了解基本原理的情況下，對(duì)CSS有很好的使用。雖然，你知道解決問題的方案，但是你卻不一定真的了解問題。

對(duì)于許多人來說，諸如盒子模型、級(jí)聯(lián)和特殊性等概念是我們所熟知的。雖然他們經(jīng)常被曲解，但是知道這些工作原理有助于我們編寫更好的CSS。

正因?yàn)槿绱耍蚁朐囍沂綜SS的這些隱藏黑科技部分，只介紹涉及你需要知道的部分，并希望以邏輯順序解釋該過程，以便你更好的理解CSS真正的工作原理。

當(dāng)你加載一個(gè)HTML文檔的時(shí)候，頁(yè)面的渲染過程中會(huì)按照順序發(fā)生了很多事情。

第一步就是解析HTML文檔。從這一步開始瀏覽器會(huì)生成一個(gè)“文檔樹”。樹的結(jié)構(gòu)是一種用HTML代表具有明顯層次結(jié)構(gòu)信息的方式。樹中的元素可以用類似于家譜的方式描述，比如：后代節(jié)點(diǎn)、父節(jié)點(diǎn)、子孫節(jié)點(diǎn)和兄弟節(jié)點(diǎn)。

你可能聽說過“DOM”這個(gè)術(shù)語(yǔ)。它代表“文檔對(duì)象模型（Document Object Model）”。它是文檔樹結(jié)構(gòu)的擴(kuò)展，它被用來存儲(chǔ)web文檔內(nèi)容和操作信息。

隨著HTML被解析，樣式文件和其他資源文件會(huì)被下載。樣式聲明通過一個(gè)稱為級(jí)聯(lián)的過程來解釋和決定。

在此過程中，將解析CSS屬性的最終值。經(jīng)過計(jì)算，這些值可能與我們樣式表中所寫的值不同。例如：像auto 這樣的相對(duì)單位的關(guān)鍵字被賦予了真正的值，并會(huì)應(yīng)用繼承的值。這些計(jì)算好的值會(huì)像存儲(chǔ)在DOM樹中的元素一樣被存儲(chǔ)在一個(gè)樹中，毫無疑問會(huì)被稱為CSS對(duì)象模型（CSS Object Model ）或CSSOM。

現(xiàn)在就可以開始渲染頁(yè)面的過程了。這個(gè)過程中的第一步是計(jì)算 盒模型。這一步對(duì)于計(jì)算出元素的大小和間距是很重要的，盡管可能并不是最終的位置。

和 盒模型相比并不是那么被熟知的過程叫做 視覺格式模型。此過程會(huì)確定頁(yè)面上元素的布局和位置。它包含您可能已經(jīng)熟悉的一些概念，例如：定位方案（positioning schemes）, 格式化上下文（formatting contexts）, 顯示模式（display modes）, 和 堆疊上下文（stacking contexts）。

最終頁(yè)面被渲染出來。

以上段落中可能有幾個(gè)術(shù)語(yǔ)，您還不熟悉。如果是這樣的話，最重要的是理解 級(jí)聯(lián), 盒模型, 和 視覺格式模型，理解這些術(shù)語(yǔ)是解釋、處理和渲染HTML和CSS至關(guān)重要的一步。在描述上面每個(gè)渲染過程的細(xì)節(jié)時(shí)，我跳過了很多的細(xì)節(jié)，所以接下來我們更加仔細(xì)地看這三個(gè)步驟。

級(jí)聯(lián)可能是CSS中最容易被弄錯(cuò)的屬性之一。它指的是合并不同樣式表并解決CSS選擇器之間沖突的過程。

級(jí)聯(lián)查看聲明的優(yōu)先級(jí)、來源、特性和順序，以確定使用哪種樣式規(guī)則。

你需要知道什么:

大多數(shù)網(wǎng)站都有多種樣式表。通常的樣式是在頁(yè)面中添加了一個(gè)引用css文件的link 標(biāo)簽，或者在HTML主體中使用 style 標(biāo)簽。即使最基本的頁(yè)面也有由瀏覽器提供的默認(rèn)樣式。此默認(rèn)樣式表有時(shí)稱為用戶代理樣式表（user-agent stylesheet）。

在級(jí)聯(lián)過程中樣式表按以下順序解釋：

!important 聲明

開發(fā)者編寫的樣式表

瀏覽器默認(rèn)的樣式表

注意事項(xiàng): 我跳過了用戶樣式表，因?yàn)樗巡皇浅Ｒ姷牧恕?/p>

合并這些來源的樣式之后，如果很多規(guī)則被用在了同一個(gè)元素上，則用權(quán)重確定應(yīng)用的規(guī)則。

特殊性是指選擇器的權(quán)重。僅僅把它看作一個(gè)多帶帶的數(shù)字是一個(gè)常見的錯(cuò)誤。實(shí)際上它是4個(gè)獨(dú)立的數(shù)字或4種類別的權(quán)重。

計(jì)算特殊性，把下面的權(quán)重相加：

ID,

class, 屬性 和 偽類,

元素 和 偽元素

例如: #nav .selected:hover > a::before 的權(quán)重分別是 1, 2, 2。

無論多少個(gè)class的權(quán)重，都沒有ID的權(quán)重高。當(dāng)比較選擇器時(shí)，首先應(yīng)該比較ID的權(quán)重大小。僅當(dāng)ID的權(quán)重一樣的時(shí)候，再比較class、屬性和偽類的權(quán)重，最后，如果權(quán)重依然一樣的話就比較元素和偽元素的權(quán)重。

如果每個(gè)類別的權(quán)重都相等的話，則采用就近優(yōu)先的原則（即應(yīng)用來源中最后聲明的規(guī)則）。

是的！我知道我說了4類的權(quán)重大小。但是行內(nèi)樣式的權(quán)重比ID的更高。盡管它們是技術(shù)上權(quán)重計(jì)算中的第一類，但是通常是無法和行內(nèi)樣式競(jìng)爭(zhēng)的，所以，很容易記住行內(nèi)樣式總是高于其他類別的權(quán)重。

重要注意事項(xiàng): !important 聲明沒有考慮權(quán)重計(jì)算，但是它們比級(jí)聯(lián)中的正常聲明具有更高的優(yōu)先級(jí)。

繼承不是級(jí)聯(lián)中的一部分，但是這里我把它包含進(jìn)來主要是因?yàn)樗?jīng)常和級(jí)聯(lián)一起被討論。

繼承是應(yīng)用于元素的值可以由其子元素傳遞（或繼承）的過程。

您可能很熟悉字體屬性（當(dāng)應(yīng)用于body或另一個(gè)容器元素時(shí)）也由該容器內(nèi)的每個(gè)元素繼承的事實(shí)。這就是繼承。

并非所有屬性都默認(rèn)繼承。 了解繼承是編寫更加優(yōu)雅和簡(jiǎn)潔CSS的關(guān)鍵。 使用inherit關(guān)鍵字強(qiáng)制繼承是非常有用的。

注意事項(xiàng): 某些屬性如border-color 具有默認(rèn)值currentcolor。 這意味著他們將使用color屬性上設(shè)置的值。 這個(gè)默認(rèn)值與繼承不一樣。 雖然顏色屬性本身通常是繼承的。

了解盒子模型對(duì)于限制使用布局和定位時(shí)的問題是必不可少的。 它是CSS中最基本的概念之一。

盒模型用于計(jì)算元素的寬和高。這是一個(gè)計(jì)算步驟，并不完全被依賴于確定元素的最終布局和定位。

你需要知道什么:

HTML的每一個(gè)元素都是一個(gè)矩形的盒子。每個(gè)盒子都有4個(gè)區(qū)域，用于定義元素的邊距（margin）、邊框（border）、填充（padding）和內(nèi)容區(qū)域。

默認(rèn)情況下，你給一個(gè)元素設(shè)置的寬度，只是設(shè)置了內(nèi)容區(qū)域的寬度。當(dāng)你給元素添加padding、border和margin時(shí)，這是增加了除了寬度之外的部分。實(shí)際上，這意味著寬度為50％的兩個(gè)元素如果添加了padding，margin或border，則會(huì)超過100%的寬度，進(jìn)而導(dǎo)致不能并排排版了。

就是這樣！這是相當(dāng)簡(jiǎn)單的對(duì)吧？為什么這常常是困惑的來源呢?好吧，你可能遇到過一些情況，事情似乎有些不同的表現(xiàn)…

當(dāng)你給一個(gè)元素設(shè)置背景的時(shí)候，填充的不僅僅是內(nèi)容區(qū)域，而且還包括內(nèi)部padding區(qū)域和邊框區(qū)域。

從概念上來說，我們認(rèn)為HTML元素是單一的東西。因此很容易認(rèn)為元素的視覺邊界等于其寬度，但情況并非如此。盡管元素的視覺邊界包括填充（padding）和邊框（border）區(qū)域，width 屬性明確地應(yīng)用于內(nèi)容區(qū)域上。

注意事項(xiàng): 改變 box-sizing 屬性可以改變這種表現(xiàn)行為。

另一個(gè)潛在的困惑的來源是width: auto 是怎樣工作的。一個(gè)自動(dòng)的寬度對(duì)于大部分的HTML元素都是一個(gè)默認(rèn)值，比如：div和p標(biāo)簽，auto 的寬度計(jì)算以便于margin、border、padding和內(nèi)容區(qū)域合并之后能夠適應(yīng)可用的空間。

實(shí)際上，是重新計(jì)算寬度以確保一切都適合。 通過比較，設(shè)置寬度為“100％”時(shí)，不管邊距、填充和邊框的大小是多少，內(nèi)容區(qū)域都將填充可用空間。

box-sizing屬性能夠改變盒模型的工作方式。當(dāng) box-sizing設(shè)置為border-box 時(shí)，padding和border將減少內(nèi)容區(qū)域的內(nèi)部寬度，而不是增加元素的整體寬度。這意味著一個(gè)元素的寬度現(xiàn)在與它的可視寬度相同。

很多人喜歡這個(gè)屬性，如果你正在建立一個(gè)網(wǎng)格系統(tǒng)，或任何其他需要水平對(duì)齊類型的布局項(xiàng)目，這可以更直觀的工作方式。

當(dāng)邊距意外重疊的時(shí)候，真的令人很困惑，因?yàn)槟悴恢腊l(fā)生了什么。當(dāng)兩個(gè)或多個(gè)相鄰的垂直邊距接觸時(shí)，邊距有時(shí)會(huì)發(fā)生重疊，并且不會(huì)用填充或邊框分隔。如果子元素的邊緣擴(kuò)展到父元素的邊緣，并且不會(huì)被填充分隔開，那么就會(huì)出現(xiàn)邊距重疊的現(xiàn)象。

如果元素采用的是絕對(duì)定位、浮動(dòng)定位或者有一個(gè)不一樣的 格式化上下文時(shí)，邊距不會(huì)發(fā)生重疊現(xiàn)象。

如果你感到困惑，沒關(guān)系。邊距不會(huì)發(fā)生重疊的規(guī)則是復(fù)雜的。 您需要知道的主要事情是當(dāng)元素沒有填充或邊框時(shí)，垂直邊距可能會(huì)重疊。

當(dāng)盒模型計(jì)算元素的尺寸時(shí)，它是負(fù)責(zé)確定這些盒布局的視覺格式模型。 視覺格式模型考慮了盒的類型、定位方案、元素之間的關(guān)系和由內(nèi)容強(qiáng)加的約束，以確定頁(yè)面上每個(gè)元素的最終位置和呈現(xiàn)。

你需要知道什么:

視覺格式模型遍歷文檔樹，并按CSS盒模型生成一個(gè)或多個(gè)渲染元素所需的盒子。CSSdisplay 屬性在決定元素如何參與當(dāng)前的格式化上下文和定位方案中起著關(guān)鍵的作用。這些部分將決定元素的最終布局和位置。

這是一個(gè)復(fù)雜的步驟，是迄今為止最難嘗試和總結(jié)的。如果你還不了解所有的關(guān)于這個(gè)部分的話，沒關(guān)系。理解我們?nèi)绾瓮ㄟ^CSS屬性操作 定位方案和格式化上下文是一個(gè)很好的開始。如果你能掌握這一模式的不同部分之間的相互作用，你就會(huì)比大多數(shù)人做得更好。至少你應(yīng)該知道它們是存在的。

我們知道在CSS中設(shè)置display 屬性可以決定一個(gè)元素怎樣被渲染，但是目前還不清楚它的工作原理是什么樣的。事實(shí)上，有時(shí)甚至是不可預(yù)測(cè)的。

這是因?yàn)閐isplay 屬性決定了元素的“盒類型”。該隱藏屬性由內(nèi)部顯示類型和外部顯示類型組成，這些類型一起幫助確定元素的呈現(xiàn)方式。

外部顯示類型通常解析為“block”或“inline”，并且?guī)缀跖cCSS中的“display”屬性的期望一致。 從技術(shù)上講，外部顯示類型決定了元素如何參與其父元素的格式化上下文。

內(nèi)部顯示類型確定該元素將生成什么樣的格式化上下文。 這將影響其子元素的布局。

想象一下Flexbox容器的工作原理。 它的外部類型是block，其內(nèi)部類型是flex。 它的子元素外部類型也可以是block，但它們的布局受到Flexbox容器的格式上下文的影響。

格式化上下文是關(guān)于布局的。 它們是管理容器內(nèi)元素布局的規(guī)則，以及它們?nèi)绾蜗嗷ソ换ァ?/p>

一些格式化上下文可以直接在容器上建立，例如通過使用display 的值為：flex、grid或table。 其他類型（如塊和內(nèi)聯(lián)格式化上下文）按照瀏覽器的要求創(chuàng)建。

注意事項(xiàng): 一度，因?yàn)樗透?dòng)元素的交互方式，理解如何讓瀏覽器建立一個(gè)新的塊格式化上下文非常重要。一個(gè)塊格式化上下文的元素會(huì)包含浮動(dòng)的元素。

一個(gè)盒元素可以根據(jù)3種定位方案中的一種來布局。這三種方案分別是：正常文檔流布局, 浮動(dòng)布局 和 絕對(duì)定位布局。您可能熟悉浮動(dòng)和絕對(duì)定位布局的方式，因?yàn)槲覀冊(cè)诰帉慍SS時(shí)經(jīng)常與這些方案進(jìn)行交互。 當(dāng)一個(gè)元素未浮動(dòng)或絕對(duì)定位布局時(shí)，就是正常文檔流布局。

正常文檔流布局
正常文檔流描述了默認(rèn)的定位方案，“in-flow”描述符合此要求的元素。 在文檔流中您可以認(rèn)為是根據(jù)其源的順序和格式化上下文布局的元素的自然位置。

浮動(dòng)布局
Float（浮動(dòng)）是一個(gè)CSS屬性，它使一個(gè)元素從正常流中跳出來，并盡可能地向左或向右偏移，直到它接觸到其上一級(jí)的盒元素或另一個(gè)浮動(dòng)元素的邊緣。 當(dāng)這種情況發(fā)生時(shí)，文本和內(nèi)聯(lián)元素將包圍浮動(dòng)元素。

通常如果不設(shè)置，元素的高度將適應(yīng)其所有后代元素。 當(dāng)元素浮動(dòng)時(shí)，它們從正常文檔流跳出來，這意味著容器不會(huì)調(diào)整其高度以將其清除。

正是這種行為允許多種文本、標(biāo)題和其他元素對(duì)浮動(dòng)內(nèi)容進(jìn)行流式包裹。但有時(shí)這是有問題的。清除浮動(dòng)和建立一個(gè)新的塊格式化上下文將使容器清除其浮動(dòng)的子元素。這種技術(shù)允許使用浮動(dòng)來進(jìn)行布局，很久之前這就已經(jīng)成為web開發(fā)技術(shù)之一了。這種技術(shù)仍然很重要，但它也正逐漸被新的布局技術(shù)所取代，比如Flexbox和Grid。

絕對(duì)定位布局
絕對(duì)定位的元素完全從文檔流中去除，不同于浮動(dòng)元素，它們對(duì)周圍的內(nèi)容沒有影響。

具有相對(duì)定位的容器允許您使用絕對(duì)定位來控制后代元素的偏移量。

相對(duì)定位的元素也可以被給定一個(gè)偏移量，但是這個(gè)偏移量是與元素的正常位置相對(duì)的，而不是另一個(gè)相對(duì)的容器。

CSS的top, bottom, left 和 right 屬性用來計(jì)算“盒容器的偏移量”。這些屬性不是二維偏移，而是每個(gè)邊緣相對(duì)于其容器的內(nèi)容盒子進(jìn)行定位。

具有重疊偏移的定位元素可以導(dǎo)致元素占用相同空間而發(fā)生重疊問題。堆疊上下文可以解決這個(gè)問題。

堆疊上下文決定事物呈現(xiàn)到頁(yè)面的順序。 你可以想象一個(gè)堆疊上下文，如圖層。 堆疊底部的圖層首先繪制，堆疊上方的元素出現(xiàn)在頂部（相對(duì)于底部來說是在上層）。

在一個(gè)絕對(duì)或相對(duì)定位的元素上設(shè)置z-index 是建立新的堆疊上下文的最常見方式。 但是還有其他一些方法可以形成堆疊上下文，包括設(shè)置不透明度（opacity），轉(zhuǎn)換（transforms），過濾（filters）或使用will-change屬性。

其中的一些原因并不直觀，與開發(fā)人員的預(yù)期相比，更多的是與渲染的性能有關(guān)。這有助于理解這些層可以由瀏覽器多帶帶渲染。因此，出于性能考慮，故意創(chuàng)建一個(gè)新的堆棧上下文有時(shí)會(huì)很有用。

除非建立了堆疊上下文，不然設(shè)置z-index沒有效果。 z-index的值設(shè)置的越高，層疊放置的堆疊越高（越靠近被最終顯示的上層）。

關(guān)于堆疊最令人困惑的部分之一是可以在現(xiàn)有堆疊環(huán)境中建立新的堆疊上下文。 這意味著您可以擁有多層圖層。

在這種情況下，并不總是擁有最高的z-index值顯示在堆疊越高的位置。

簡(jiǎn)短地介紹一些CSS的重要的不為人熟知的工作原理部分。如果你只是讀了其中的一部分也沒關(guān)系。希望這篇文章澄清了一些事情，或者對(duì)所涉及的過程有了一個(gè)大致的說明。在不犧牲精確性的情況下，用簡(jiǎn)單的術(shù)語(yǔ)解釋這些東西是一個(gè)真正的挑戰(zhàn)。