Web前端之CSS中你不知道的一些知識

CSS部分比較容易掌握的，但是深入到CSS，並不會太容易。CSS的知識比較零碎，所用到的技巧也相對比較多。一句話「入門容易就，提升難」，今天小編帶你走一趟，一起對CSS的一此冷門知識做個梳理。

首先還是給大家推薦一個學習氛圍很好的裙，我自己的，想要一起學習web前端的可以加裙六一四三一五六五七，有各種資料和開發工具包滿足大家，每天更新最新行情

CSS原理

小編不會去講定義。談定義沒有意思！知道了定義又如何？不理解就是白說.小編在面試時常問的過程：「介紹一下CSS？」，「CSS就是層疊樣式表」,然後就沒有然後了。是不是這個理？那怎麼來理解層疊，給你一張圖來悟一下

這是CSS中最最最重要的一個知識點盒子（Box），理解CSS工作原理的關鍵在於能夠設想每一個HTML元素的周圍都有一個看不見的盒子。

「設想HTML元素周圍有一個盒子」

CSS允許你創建規則，來控制每一個盒子以及盒子中的內容的呈現方式。

說到這，要理解CSS如何工作，還要扯一點瀏覽器的工作原理！

當瀏覽器顯示文檔時，它必須將文檔的內容與其樣式信息結合。它分兩個階段處理文檔：

1.瀏覽器將 HTML 和 CSS 轉化成 DOM （文檔對象模型）。DOM在計算機內存中表示文檔。它把文檔內容和其樣式結合在一起。

2.瀏覽器顯示 DOM 的內容。

想要一起學習web前端的可以加裙六一四三一五六五七，有各種資料和開發工具包滿足大家，每天更新最新行情

關於 DOM

DOM是一種樹形結構. 標記語言中的每個元素,屬性,文本片段都變為一個 DOM 節點。這些節點由它們與其它 DOM 節點的關係來定義。有的元素是某些子節點的父節點，且這些子節點有兄弟（節點）。

由於 DOM 是 CSS 與文檔內容的相遇之處，理解 DOM 有助於設計，調試和維護你的 CSS 文件。

表示 DOM

相對於漫長而無聊的解釋，讓我們通過一個例子來看一下 DOM 和 CSS 如何一同工作。

讓我們假定下面這段HTML代碼：

想要一起學習web前端的可以加裙六一四三一五六五七，有各種資料和開發工具包滿足大家，每天更新最新行情

喜歡這篇文章記得點一下訂閱，每天為您提供最新行業資訊，每天上午10點更新。想看關於什麼方面都可評論說

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！