到目前為止，很多人不知道 CSS 是如何工作的，不過這已經不是什么秘密了，尤其是當你第一次接觸 CSS 時。很難弄清楚為什么一個元素位于某個位置，或者為什么該元素具有紅色，盡管使用了重要的覆蓋它。

在本文中，我將介紹7個關于CSS的核心概念，它們將幫助您了解發生了什么（即使是一點點）。

請注意，這篇文章不適合 CSS 資深人士，沒有任何令人興奮的功能或類似的東西，它只涵蓋了 CSS 的核心概念。

一、Display

你是否曾經嘗試過將兩個 div 并排放置，但另一個 div 最終位于單獨的一行？或者嘗試將鏈接放在單獨的行上，但其他元素以某種方式在它旁邊結束？我已經覆蓋了你！使用 display 屬性，您可以控制元素在頁面上的顯示方式。

雖然很多網站都在使用 flexbox 和 grid（我不會介紹，因為今天的內容是一個初學者指南），但您肯定會遇到一個仍然使用舊顯示屬性進行布局的網站。

1.1 、顯示塊

塊元素默認占用 100% 的可用空間，并且不允許任何元素放置在同一行上，即使您減小寬度（如上圖所示），元素大小也會減小，但仍然不會 允許在它旁邊放置另一個元素。大多數 HTML 元素默認是塊元素。

1.2 、顯示內聯塊

Inline-Block 元素允許將其他非塊元素放置在它們旁邊，并且只有在沒有空間留給這些元素時才會將其他元素推到下一行。

1.3、 顯示內聯

內聯元素類似于 inline-block，因為它們允許將其他元素放在它們旁邊，但是內聯元素的尺寸（寬度和高度）不能更改，它們的尺寸由它們的內容（文本 和填充）。

注意：您可以使用 <br> 元素在 inline/inline-block 元素之后換行。

二、盒子模型

在 HTML 中，一切都是一個盒子（是的，甚至圓形、三角形等都只是剪切框）。但是，這些盒子是如何工作的呢？盒子內的空白空間是如何添加的？盒子外面呢？“盒子”到底是什么？

注意：這是假設下面的代碼塊在使用的 CSS 文件中，它非常流行，你甚至不需要知道如果它不存在會發生什么。  

* {
box-sizing: border-box;
}

“盒子”基本上是 HTML 元素的構建塊，它由四個主要塊組成：邊距（margin)、邊框(border)、填充(padding)和內容(content)。

2.1、 邊距

邊距在所選元素及其周圍的所有元素之間添加空白空間，并且不會影響元素內容的大小。現在有個巧妙的小秘密，從邊框的外邊緣開始，margin-top 將選定的元素向下推動而不移動其他元素，而 margin-bottom 將所述元素保持在原位并向下推動其他元素。margin-left 將所選元素推到右側，并且不移動其他元素，而 margin-right 將所述元素保持在原位并將其他元素推到右側。

雖然一開始可能聽起來令人困惑，但它的工作原理是這樣的，因為 HTML 是從上到下、從左到右呈現的。我強烈建議在開發工具中使用邊距，以便更好地了解它的工作原理。

現在提出一個開創性的問題：假設我有兩個塊元素——A 和 B，A 在 B 之上——如果我添加 margin-bottom: 15px; 會發生什么；到 A 和 margin-top: 10px;給 B?

如果您認為它們之間的距離為 25 像素，我很抱歉地通知您您錯了。為什么？因為邊距崩潰！基本上，如果您有兩個方向相反的邊距，則只會渲染較大的邊距（在本例中為 15px），而另一個將被忽略。所以在我們的例子中，A 和 B 僅相隔 15px。

我知道這需要消化很多，但我保證其他屬性沒有那么復雜。

2.2、 邊框

邊框定義了元素邊緣的外觀，它還帶走了內容并將內容向內推。因此，如果我們有一個 100*100px 的元素，添加一個 10px 的邊框將為我們留下 90*90px 的內容。

2.3、 填充

padding 在元素的邊界內添加空白空間——不是空白，這意味著如果元素具有背景顏色，它將不會受到影響——從內容大小中移除，并將其向內推。使用與上面相同的示例，擁有 10 像素的邊框和 10 像素的內邊距將為我們留下 80x80 像素的內容。

2.4 、內容

內容基本上就是計算完padding和border后剩下的空間。它是文本或圖像或子 HTML 元素開始出現在所選元素中的位置。

三、定位

我知道你試過給 top: 50px;你的元素，想知道為什么它沒有移動，我們都去過那里。這就是為什么我們需要討論 position 屬性，它允許您控制元素的位置。

3.1 、static

所有 HTML 元素都是 position: static;默認情況下。這意味著您不能使用 top、left、right、bottom 屬性來移動它們，它們仍然可以使用 margin、flexbox 等來移動。但在某些情況下，您只想將該元素稍微移動到沒有在它周圍移動元素，這就是為什么 position: relative;接下來即將到來。

3.2 、relative

好的，但相對于什么？位置：相對；意味著元素將相對于其原始位置放置，而與邊距不同，不會移動它周圍的任何其他元素。通過使用 relative，您現在可以使用 top、left、right 和 bottom 屬性來重新定位您的元素。

3.3 、absolute

我建議您將以下句子閱讀 10 遍，因為一開始它很混亂。位置：絕對；相對于最近的非位置定位所選元素：靜態；parent（如果沒有這樣的元素，它相對于 body 放置），并將元素從 HTML 流中取出，導致元素浮動在其他元素之上。您絕對應該只在創建需要浮動在其他元素之上的東西（例如彈出或關閉按鈕）時才使用此屬性，通常，您使用該屬性的次數越少越好。

3.4、 Fixed

位置：固定；與 absolute 類似，它使元素浮動在其他元素之上。但是，它始終是相對于正文放置的，即使您滾動頁面，它也會保持在原來的位置。

四、選擇器

盡管我很想討論這個話題，但已經有上千篇關于它的文章了，我沒有太多要補充的，我最喜歡的一篇是 MDN 官方文檔，（地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity ）

您應該在大多數時間使用類來設置元素的樣式，并盡可能避免使用 !important。但是，我將在調試部分討論如何直接從開發工具中了解哪個選擇器具有更高的特異性。

五、 繼承

一些 CSS 屬性——font-size、font-family 和 color 等等——是從它們最近的父級繼承的，當且僅當它們沒有為給定元素指定時。

以下 HTML：

<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>

如果我們給祖父母 div 顏色：紅色；考慮到所述 div 沒有指定顏色屬性，父 div 和子 div 都將具有紅色文本顏色。如果它們中的任何一個指定了顏色，它將覆蓋繼承，不，在祖父母上添加 !important 不會覆蓋其孩子的顏色。同樣，我將在調試部分討論更多關于如何查找哪些屬性被繼承的內容。

六、 z-index 堆棧

我也希望 z-index 像具有更高 z-index 的元素將顯示在頂部一樣簡單，但這不是它的工作原理。

再次看以下 HTML：

<div class="sibling-1 parent">
     <div class="child"></div>
</div>
<div class="sibling-2">
</div>

考慮到兄弟 1 的 z-index: 10; 兄弟 2 的 z-index: 20; 在這種情況下，兄弟 2 將位于兄弟 1 之上，這很棒！現在，考慮 child 的 z-index: 30; 在這種情況下，它不會顯示在兄弟 2 的頂部，因為它的父級 (sibling-1) 的 z-index 較小。  

因此 z-index 僅適用于兄弟元素，如果該兄弟元素的 z-index 高于父元素，則子元素不能顯示在其父兄弟元素的頂部。  

您可能可以使用 position: absolute; 做一些巫術魔術。以及所有這些，但不建議這樣做，因為它幾乎不可能維護您的布局。如果您希望一個元素始終位于其他元素之上，建議您將其直接附加到正文中。

七、調試

雖然調試不是 CSS 的一部分，但您可以使用開發工具來幫助您了解正在發生的事情。我在下面的例子中使用 Chrome，我沒有嘗試過其他瀏覽器，但我相信它們確實有類似的界面（無論你做什么，都不要使用 Internet Explorer。讓它死吧。）

既然你已經走到了這一步，我假設你知道如何打開開發工具，所以我將跳過這部分。

打開元素選項卡并從那里選擇要檢查的元素。

7.1 、盒子模型

在樣式選項卡的最底部，您可以看到盒子模型的不同部分以及它們所覆蓋的區域，將鼠標懸停在它們上方，元素的相應部分將突出顯示。

7.2 、計算樣式

在 Styles 選項卡旁邊有 Computed 選項卡，您可以在其中看到應用于所選元素的所有不同 CSS 屬性。例如，如果您的元素在沒有指定任何內容的情況下具有紅色，您可以單擊箭頭圖標以查看該樣式的來源，它可能是繼承的，也可能是由另一個選擇器意外提供的。

如果一個屬性變暗（如本例中的高度和寬度），很可能是因為使用了 flexbox 或網格來指定所述屬性（在這種情況下，請隨意檢查 Layout 選項卡，如前所述，我不會介紹 那些科目）。

您很可能會遇到您不知道它們如何運作的屬性（例如用戶選擇），在這種情況下，Google 是您最好的朋友。您需要找出該屬性的作用，以了解它對您的元素有什么樣的影響。

7.3 、選擇器

在 Styles 選項卡中，您可以看到所有針對所選元素的選擇器，在以下示例中，從 5 個不同的選擇器中為 span 賦予了顏色。藍色沒有被劃掉的原因是它具有最高的特異性。所以選擇器的特異性越高，它在列表中的位置就越高（當然！important 打破了這個規則。）

最后的想法

我希望你在閱讀這篇文章時學到了一些有用的東西，如果你覺得不錯，請記得點贊我，關注我，最后，感謝你的閱讀，祝你好運。