如果你在日常工作中使用CSS俱饿，那么你的主要目標(biāo)很可能集中在使事情看起來是正確的畏鼓。最終得到的正確結(jié)果遠(yuǎn)比如何實現(xiàn)更重要氮采。這意味著相比正確的語法和視覺效果我們更少關(guān)注CSS的實現(xiàn)原理体捏。
你可能還沒有意識到，但CSS的視覺效果通常是操縱隱藏屬性的間接結(jié)果梗摇。一些CSS屬性（如 background-color）和你看到的視覺效果就有顯然的直接關(guān)系。而其他的（比如display）對我們許多人來說仍然含糊不清想许，因為結(jié)果似乎高度依賴于上下文伶授。
我懷疑很多開發(fā)者都不能簡單的描述當(dāng)設(shè)置了display: block之后實際上做了什么。最多你可能只是直觀地了解這個屬性是如何工作的流纹。沒關(guān)系糜烹，你可以在不了解基本原理的情況下，對CSS有很好的爭議漱凝。雖然疮蹦，你知道解決問題的方案，但是你卻不一定真的了解問題茸炒。
你過你正式上面說的那樣愕乎，沒關(guān)系阵苇。剛開始我也是只知道怎樣使用CSS，不久前才了解CSS的工作原理的感论。我想這并不能讓你感覺好一點绅项，但至少你并不孤單！
雖然CSS的基本特征是復(fù)雜且有意提取的比肄，但是我們不能因此一點不去了解它快耿。對于許多人來說，諸如盒子模型芳绩、級聯(lián)和特殊性等概念是我們所熟知的掀亥。雖然他們經(jīng)常被曲解，但是知道這些工作原理有助于我們編寫更好的CSS妥色。
CSS其他的隱藏黑科技也是如此搪花。學(xué)習(xí)理解這些黑科技的問題就是學(xué)習(xí)的壁壘很高。它常常感覺好像什么都不能單獨解釋垛膝。在理解工作原理中最小的部分之前鳍侣，您都需要了解所有的內(nèi)容。
正因為如此吼拥，我想試著揭示CSS的這些隱藏黑科技部分倚聚，只介紹涉及你需要知道的部分，并希望以邏輯順序解釋該過程凿可，以便你更好的理解CSS真正的工作原理惑折。
當(dāng)你加載一個HTML文檔的時候，頁面的渲染過程中會按照順序發(fā)生了很多事情枯跑。
第一步就是解析HTML文檔惨驶。從這一步開始瀏覽器會生成一個“文檔樹”。樹的結(jié)構(gòu)是一種用HTML代表具有明顯層次結(jié)構(gòu)信息的方式敛助。樹中的元素可以用類似于家譜的方式描述粗卜，比如：后代節(jié)點、父節(jié)點纳击、子孫節(jié)點和兄弟節(jié)點续扔。
你可能聽說過“DOM”這個術(shù)語。它代表“文檔對象模型（Document Object Model）”焕数。它是文檔樹結(jié)構(gòu)的擴(kuò)展纱昧，它被用來存儲web文檔內(nèi)容和操作信息。
隨著HTML被解析堡赔，樣式文件和其他資源文件會被下載识脆。樣式聲明通過一個稱為級聯(lián)的過程來解釋和決定。
在此過程中，將解析CSS屬性的最終值灼捂。經(jīng)過計算离例，這些值可能與我們樣式表中所寫的值不同。例如：像auto 這樣的相對單位的關(guān)鍵字被賦予了真正的值纵东，并會應(yīng)用繼承的值粘招。這些計算好的值會像存儲在DOM樹中的元素一樣被存儲在一個樹中，毫無疑問會被稱為CSS對象模型（CSS Object Model ）或CSSOM偎球。
現(xiàn)在就可以開始渲染頁面的過程了洒扎。這個過程中的第一步是計算 盒模型。這一步對于計算出元素的大小和間距是很重要的衰絮，盡管可能并不是最終的位置袍冷。
和 盒模型相比并不是那么被熟知的過程叫做 視覺格式模型。此過程會確定頁面上元素的布局和位置猫牡。它包含您可能已經(jīng)熟悉的一些概念胡诗，例如：定位方案（positioning schemes）, 格式化上下文（formatting contexts）, 顯示模式（display modes）, 和 堆疊上下文（stacking contexts）。
最終頁面被渲染出來淌友。
以上段落中可能有幾個術(shù)語煌恢，您還不熟悉。如果是這樣的話震庭，最重要的是理解 級聯(lián), 盒模型, 和 視覺格式模型瑰抵，理解這些術(shù)語是解釋、處理和渲染HTML和CSS至關(guān)重要的一步器联。在描述上面每個渲染過程的細(xì)節(jié)時二汛，我跳過了很多的細(xì)節(jié)，所以接下來我們更加仔細(xì)地看這三個步驟拨拓。
級聯(lián)
級聯(lián)可能是CSS中最容易被弄錯的屬性之一肴颊。它指的是合并不同樣式表并解決CSS選擇器之間沖突的過程。
級聯(lián)查看聲明的優(yōu)先級渣磷、來源婿着、特性和順序，以確定使用哪種樣式規(guī)則醋界。
你需要知道什么:
大多數(shù)網(wǎng)站都有多種樣式表祟身。通常的樣式是在頁面中添加了一個引用css文件的link 標(biāo)簽，或者在HTML主體中使用 style 標(biāo)簽物独。即使最基本的頁面也有由瀏覽器提供的默認(rèn)樣式。此默認(rèn)樣式表有時稱為用戶代理樣式表（user-agent stylesheet）氯葬。
在級聯(lián)過程中樣式表按以下順序解釋：
!important 聲明
開發(fā)者編寫的樣式表
瀏覽器默認(rèn)的樣式表
注意事項: 我跳過了用戶樣式表挡篓，因為它已不是常見的了，可能不會考慮任何閱讀這篇文章的人。
合并這些來源的樣式之后官研，如果很多規(guī)則被用在了同一個元素上秽澳，則用權(quán)重確定應(yīng)用的規(guī)則。
特殊性
特殊性是指選擇器的權(quán)重戏羽。僅僅把它看作一個單獨的數(shù)字是一個常見的錯誤担神。實際上它是4個獨立的數(shù)字或4種類別的權(quán)重。
計算特殊性始花，把下面的權(quán)重相加：
ID,
class, 屬性 和 偽類,
元素 和 為元素
例如: #nav .selected:hover > a::before 的權(quán)重分別是 1, 2, 2.
無論多少個class的權(quán)重妄讯，都沒有ID的權(quán)重高。當(dāng)比較選擇器時酷宵，首先應(yīng)該比較ID的權(quán)重大小亥贸。僅當(dāng)ID的權(quán)重一樣的時候，再比較class浇垦、屬性和偽類的權(quán)重炕置，最后，如果權(quán)重依然一樣的話就比較元素和偽元素的權(quán)重男韧。
如果每個類別的權(quán)重都相等的話朴摊，則采用就近優(yōu)先的原則（即應(yīng)用來源中最后聲明的規(guī)則）。
是的此虑！我知道我說了4類的權(quán)重大小甚纲。但是行內(nèi)樣式的權(quán)重比ID的更高。盡管它們是技術(shù)上權(quán)重計算中的第一類寡壮，但是通常是無法和行內(nèi)樣式競爭的贩疙，所以，很容易記住行內(nèi)樣式總是高于其他類別的權(quán)重况既。
重要注意事項: !important 聲明沒有考慮權(quán)重計算这溅，但是它們比級聯(lián)中的正常聲明具有更高的優(yōu)先級。
繼承
繼承不是級聯(lián)中的一部分棒仍，但是這里我把它包含進(jìn)來主要是因為它經(jīng)常和級聯(lián)一起被討論悲靴。
繼承是應(yīng)用于元素的值可以由其子元素傳遞（或繼承）的過程。
您可能很熟悉字體屬性（當(dāng)應(yīng)用于body或另一個容器元素時）也由該容器內(nèi)的每個元素繼承的事實莫其。這就是繼承癞尚。
并非所有屬性都默認(rèn)繼承。 了解繼承是編寫更加優(yōu)雅和簡潔CSS的關(guān)鍵乱陡。 使用inherit關(guān)鍵字強(qiáng)制繼承是非常有用的浇揩。
注意事項: 某些屬性如border-color 具有默認(rèn)值currentcolor。 這意味著他們將使用color屬性上設(shè)置的值憨颠。 這個默認(rèn)值與繼承不一樣胳徽。 雖然顏色屬性本身通常是繼承的积锅，所以我傾向于認(rèn)為這是一種事實上的繼承。
盒模型
了解盒子模型對于限制使用布局和定位時的問題是必不可少的养盗。 它是CSS中最基本的概念之一缚陷。
盒模型用于計算元素的寬和高。這是一個計算步驟往核，并不完全被依賴于確定元素的最終布局和定位箫爷。
你需要知道什么:
HTML的每一個元素都是一個矩形的盒子。每個盒子都有4個區(qū)域聂儒，用于定義元素的邊距（margin）虎锚、邊框（border）、填充（padding）和內(nèi)容區(qū)域薄货。
默認(rèn)情況下翁都，你給一個元素設(shè)置的寬度，只是設(shè)置了內(nèi)容區(qū)域的寬度谅猾。當(dāng)你給元素添加padding柄慰、border和margin時，這是增加了除了寬度之外的部分税娜。實際上坐搔，這意味著寬度為50％的兩個元素如果添加了padding，margin或border敬矩，則會超過100%的寬度概行，進(jìn)而導(dǎo)致不能并排排版了。
就是這樣弧岳！這是相當(dāng)簡單的對吧凳忙？為什么這常常是困惑的來源呢?好吧，你可能遇到過一些情況禽炬，事情似乎有些不同的表現(xiàn)…
填充區(qū)域
當(dāng)你給一個元素設(shè)置背景的時候涧卵，填充的不僅僅是內(nèi)容區(qū)域，而且還包括內(nèi)部padding區(qū)域和邊框區(qū)域腹尖。
從概念上來說柳恐，我們認(rèn)為HTML元素是單一的東西。因此很容易認(rèn)為元素的視覺邊界等于其寬度热幔，但情況并非如此乐设。盡管元素的視覺邊界包括填充（padding）和邊框（border）區(qū)域，width 屬性明確地應(yīng)用于內(nèi)容區(qū)域上绎巨。
注意事項: 改變 box-sizing 屬性可以改變這種變現(xiàn)行為近尚。
動態(tài)寬度
另一個潛在的困惑的來源是width: auto 是怎樣工作的。一個自動的寬度對于大部分的HTML元素都是一個默認(rèn)值场勤，比如：div和p標(biāo)簽肿男，auto 的寬度計算以便于margin介汹、border、padding和內(nèi)容區(qū)域合并之后能夠適應(yīng)可用的空間舶沛。
在這種情況下，它似乎可以感覺到在內(nèi)容上田間的填充和邊距窗价，但實際上如庭，是重新計算寬度以確保一切都適合。 通過比較撼港，設(shè)置寬度為“100％”時坪它，不管邊距、填充和邊框的大小是多少帝牡，內(nèi)容區(qū)域都將填充可用空間往毡。
Box-sizing
box-sizing屬性能夠改變盒模型的工作方式。當(dāng) box-sizing設(shè)置為border-box 時靶溜，padding和border將減少內(nèi)容區(qū)域的內(nèi)部寬度开瞭，而不是增加元素的整體寬度。這意味著一個元素的寬度現(xiàn)在與它的可視寬度相同罩息。
很多人喜歡這個屬性嗤详，如果你正在建立一個網(wǎng)格系統(tǒng)，或任何其他需要水平對齊類型的布局項目瓷炮，這可以是更直觀的工作方式葱色。
邊距重疊
當(dāng)邊距意外重疊當(dāng)時候，真的令人很困惑娘香，因為你不知道發(fā)生了什么苍狰。當(dāng)兩個或多個相鄰的垂直邊距接觸時，邊距有時會發(fā)生重疊烘绽，并且不會用填充或邊框分隔淋昭。如果子元素的邊緣擴(kuò)展到父元素的邊緣，并且不會被填充分隔開诀姚，那么就會出現(xiàn)邊距重疊的現(xiàn)象响牛。
如果元素采用的是絕對定位、浮動定位或者有一個不一樣的 格式化上下文時赫段，邊距不會發(fā)生重疊現(xiàn)象呀打，以及在其他一些不太可能的情況下。
如果你感到困惑糯笙，沒關(guān)系贬丛。邊距不會發(fā)生重疊的規(guī)則是復(fù)雜的。 您需要知道的主要事情是當(dāng)元素沒有填充或邊框時给涕，垂直邊距可能會重疊豺憔。
如果你想了解的更詳細(xì)额获， CSS Tricks 有一篇很好的 邊距重疊釋義的文章推薦你看一下。
視覺格式化模型
當(dāng)盒模型計算元素的尺寸時恭应，它是負(fù)責(zé)確定這些盒布局的視覺格式模型抄邀。 視覺格式模型考慮了盒的類型、定位方案昼榛、元素之間的關(guān)系和由內(nèi)容強(qiáng)加的約束境肾，以確定頁面上每個元素的最終位置和呈現(xiàn)。
你需要知道什么:
視覺格式模型遍歷文檔樹胆屿，并按CSS盒模型生成一個或多個渲染元素所需的盒子奥喻。CSSdisplay屬性在決定元素如何參與當(dāng)前的格式化上下文和定位方案中起著關(guān)鍵的作用。這些部分將決定元素的最終布局和位置非迹。
這是一個復(fù)雜的步驟环鲤，是迄今為止最難嘗試和總結(jié)的。如果你還不了解所有的關(guān)于這個部分的話憎兽，沒關(guān)系冷离。理解我們?nèi)绾瓮ㄟ^CSS屬性操作 定位方案和格式化上下文是一個很好的開始。如果你能掌握這一模式的不同部分之間的相互作用唇兑，你就會比大多數(shù)人做得更好酒朵。至少你應(yīng)該知道它們是存在的。
顯示類型
我們知道在CSS中設(shè)置display 屬性可以決定一個元素怎樣被渲染扎附，但是目前還不清楚它的工作原理是什么樣的蔫耽。事實上，有時甚至是不可預(yù)測的留夜。
這是因為display 屬性決定了元素的“盒類型”匙铡。該隱藏屬性由內(nèi)部顯示類型和外部顯示類型組成，這些類型一起幫助確定元素的呈現(xiàn)方式碍粥。
外部顯示類型通常解析為“block”或“inline”鳖眼，并且?guī)缀跖cCSS中的“display”屬性的期望一致。 從技術(shù)上講嚼摩，外部顯示類型決定了元素如何參與其父元素的格式化上下文钦讳。
內(nèi)部顯示類型確定該元素將生成什么樣的格式化上下文。 這將影響其子元素的布局枕面。
想象一下Flexbox容器的工作原理愿卒。 它的外部類型是block，其內(nèi)部類型是flex潮秘。 它的子元素外部類型也可以是block琼开，但它們的布局受到Flexbox容器的格式上下文的影響。
思考這個問題的一種方式是枕荞，顯示的職責(zé)在元素和它的父元素之間共享柜候。
格式化上下文
格式化上下文是關(guān)于布局的搞动。 它們是管理容器內(nèi)元素布局的規(guī)則，以及它們?nèi)绾蜗嗷ソ换ァ?/p>
一些格式化上下文可以直接在容器上建立渣刷，例如通過使用display 的值為：flex鹦肿、grid或table。 其他類型（如塊和內(nèi)聯(lián)格式化上下文）按照瀏覽器的要求創(chuàng)建辅柴。
注意事項: 一度狮惜，因為它和浮動元素的交互方式，理解如何讓瀏覽器建立一個新的塊格式化上下文非常重要碌识。一個塊格式化上下文的元素會包含浮動的元素。今天的情況不像以前那么重要了虱而。事實上筏餐，這甚至不是現(xiàn)代 清除浮動技術(shù) 的工作方式。
定位方案
一個盒元素可以根據(jù)3種定位方案中的一種來布局牡拇。這三種方案分別是：正常文檔流布局, 浮動布局 和 絕對定位布局魁瞪。您可能熟悉浮動和絕對定位布局的方式，因為我們在編寫CSS時更直接與這些交互進(jìn)行交互惠呼。 當(dāng)一個元素未浮動或絕對定位布局時导俘，正常文檔流布局只是默認(rèn)定位方案的名稱。
正常文檔流布局
正常文檔流描述了默認(rèn)的定位方案剔蹋，“in-flow”描述符合此要求的元素旅薄。 在文檔流中您可以認(rèn)為是根據(jù)其源的順序和格式化上下文布局的元素的自然位置。
浮動布局
Float（浮動）是一個CSS屬性泣崩，它使一個元素從正常流中跳出來少梁，并盡可能地向左或向右偏移，直到它接觸到其上一級的盒元素或另一個浮動元素的邊緣矫付。 當(dāng)這種情況發(fā)生時凯沪，文本和內(nèi)聯(lián)元素將包圍浮動元素。
通常如果不設(shè)置买优，元素的高度將適應(yīng)其所有后代元素妨马。 當(dāng)元素浮動時，它們從正常文檔流跳出來杀赢，這意味著容器不會調(diào)整其高度以將其清除烘跺。
正是這種行為允許多種文本、標(biāo)題和其他元素對浮動內(nèi)容進(jìn)行流式包裹葵陵。但有時這是有問題的液荸。清除浮動和建立一個新的塊格式化上下文將使容器清除其浮動的子元素。這種技術(shù)允許使用浮動來進(jìn)行布局脱篙，很久之前這就已經(jīng)成為web開發(fā)技術(shù)之一了娇钱。這種技術(shù)仍然很重要伤柄，但它也正逐漸被新的布局技術(shù)所取代，比如Flexbox和Grid文搂。
絕對定位布局
絕對定位的元素完全從文檔流中去除适刀，不同于浮動元素，它們對周圍的內(nèi)容沒有影響煤蹭。
具有相對定位的容器允許您使用絕對定位來控制后代元素的偏移量笔喉。
相對定位的元素也可以被給定一個偏移量，但是這個偏移量是與元素的正常位置相對的硝皂，而不是另一個相對的容器余掖。
CSS的top, bottom, left 和 right 屬性用來計算“盒容器的偏移量”。這些屬性不是二維偏移厘线，而是每個邊緣相對于其容器的內(nèi)容盒子進(jìn)行定位鸦做。
具有重疊偏移的定位元素可以導(dǎo)致元素占用相同空間而發(fā)生重疊問題。堆疊上下文可以解決這個問題贝或。
層疊上下文
堆疊上下文決定事物呈現(xiàn)到頁面的順序吼过。 你可以想象一個堆疊上下文，如圖層咪奖。 堆疊底部的圖層首先繪制盗忱，堆疊上方的元素出現(xiàn)在頂部（相對于底部來說是在上層）。
在一個絕對或相對定位的元素上設(shè)置z-index 是建立新的堆疊上下文的最常見方式羊赵。 但是還有其他一些方法可以形成堆疊上下文趟佃，包括設(shè)置不透明度（opacity），轉(zhuǎn)換（transforms）慷垮，過濾（filters）或使用will-change屬性揖闸。
其中的一些原因并不直觀，與開發(fā)人員的預(yù)期相比料身，更多的是與渲染的性能有關(guān)汤纸。這有助于理解這些層可以由瀏覽器單獨渲染。因此芹血，出于性能考慮贮泞，故意創(chuàng)建一個新的堆棧上下文有時會很有用。
除非建立了堆疊上下文幔烛，不然設(shè)置z-index沒有效果啃擦。 z-index的值設(shè)置的越高，層疊放置的堆疊越高（越靠近被最終顯示的上層）饿悬。
關(guān)于堆疊最令人困惑的部分之一是可以在現(xiàn)有堆疊環(huán)境中建立新的堆疊上下文令蛉。 這意味著您可以擁有多層圖層。
在這種情況下，并不總是擁有最高的z-index值顯示在堆疊越高的位置珠叔。
就是這樣!
差不多將近3000字蝎宇，我只是簡短地介紹一些CSS的重要的不為人熟知的工作原理部分。 如果您已經(jīng)全部讀完有所收獲的話祷安，恭喜你姥芥，請一定告訴我，因為你值得被獎勵汇鞭！
如果你只是讀了其中的一部分也沒關(guān)系凉唐。我希望我的這篇文章澄清了一些事情，或者對所涉及的過程有了一個大致的說明霍骄。在不犧牲精確性的情況下台囱，用簡單的術(shù)語解釋這些東西是一個真正的挑戰(zhàn)。我希望這是對的读整。
