Web教程：7個CSS核心概念

在本文中，將介紹7 個關於CSS 的核心概念，它們將幫助您瞭解發生了什麼( 即使是一點點) 。請注意，這篇文章不適合CSS 資深人士，沒有任何令人興奮的功能或類似的東西，它只涵蓋了CSS 的核心概念。

 

1 、Display

 

你是否曾經嘗試過將兩個div 並排放置，但另一個div 最終位於單獨的一行？或者嘗試將連結放在單獨的行上，但其他元素以某種方式在它旁邊結束？我已經覆蓋了你！使用display 屬性，您可以控制元素在頁面上的顯示方式。雖然很多網站都在使用flexbox 和grid( 我不會介紹，因為今天的內容是一個初學者指南) ，但您肯定會遇到一個仍然使用舊顯示屬性進行佈局的網站。

 

1.1 、顯示塊

 

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

 

1.2 、顯示內聯塊

 

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

 

1.3 、顯示內聯

 

內聯元素類似於inline-block ，因為它們允許將其他元素放在它們旁邊，但是內聯元素的尺寸( 寬度和高度) 不能更改，它們的尺寸由它們的內容( 文字和填充) 。注意：您可以使用< ；br> ；元素在inline/inline-block 元素之後換行。

 

2 、盒子模型

 

在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 元素開始出現在所選元素中的位置。

 

3 、定位

 

我知道你試過給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 類似，它使元素浮動在其他元素之上。但是，它始終是相對於正文放置的，即使您滾動頁面，它也會保持在原來的位置。

 

4 、選擇器

 

儘管我很想討論這個話題，但已經有上千篇關於它的文章了，我沒有太多要補充的，我最喜歡的一篇是MDN 官方文件，( 地址：#/en-US/docs/Web/CSS/Specificity) 您應該在大多數時間使用類來設定元素的樣式，並儘可能避免使用！important 。但是，我將在除錯部分討論如何直接從開發工具中瞭解哪個選擇器具有更高的特異性。

 

5 、繼承

 

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

 

< ；divclass="grand-parent"> ；< ；divclass="parent"> ；< ；divclass="child"> ；< ；/div> ；< ；/div> ；< ；/div> ；

 

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

 

6 、z-index 堆疊

 

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

 

< ；divclass="sibling-1parent"> ；< ；divclass="child"> ；< ；/div> ；< ；/div> ；< ；divclass="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 ；做一些巫術魔術。以及所有這些，但不建議這樣做，因為它幾乎不可能維護您的佈局。如果您希望一個元素始終位於其他元素之上，建議您將其直接附加到正文中。

 

7 、除錯

 

雖然除錯不是CSS 的一部分，但您可以使用開發工具來幫助您瞭解正在發生的事情。我在下面的例子中使用Chrome ，我沒有嘗試過其他瀏覽器，但我相信它們確實有類似的介面( 無論你做什麼，都不要使用InternetExplorer 。讓它死吧。) 既然你已經走到了這一步，我假設你知道如何開啟開發工具，所以我將跳過這部分。開啟元素選項卡並從那裡選擇要檢查的元素。

 

7.1 、盒子模型

 

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

 

7.2 、計算樣式

 

在Styles 選項卡旁邊有Computed 選項卡，您可以在其中看到應用於所選元素的所有不同CSS 屬性。例如，如果您的元素在沒有指定任何內容的情況下具有紅色，您可以單擊箭頭圖示以檢視該樣式的來源，它可能是繼承的，也可能是由另一個選擇器意外提供的。如果一個屬性變暗( 如本例中的高度和寬度) ，很可能是因為使用了flexbox 或網格來指定所述屬性( 在這種情況下，請隨意檢查Layout 選項卡，如前所述，我不會介紹那些科目) 。您很可能會遇到您不知道它們如何運作的屬性( 例如使用者選擇) ，在這種情況下，Google 是您最好的朋友。您需要找出該屬性的作用，以瞭解它對您的元素有什麼樣的影響。

 

7.3 、選擇器

 

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