如何在 CSS 中使用 z-index 屬性 在定位文章中，我提到您可以使用 z-index 屬性來控制元素在 Z 軸上的定位。 當您有多個元素互相重疊時，且需要決定哪個元素更為可見（靠近使用者），哪個元素應該被隱藏在其後時，這個屬性非常有用。 此屬性接受一個不包含小數的數字，並使用該數字來計算哪些元素在 Z 軸上靠近使用者。 z-index 值越高，元素靠近使用者的位置就越前。 當決定哪個元素應該可見並應該將哪個元素放在其後時，瀏覽器會根據 z-index 值進行計算。 auto 是默認值，一個特殊的關鍵字。 使用 auto 時，Z 軸的順序由 HTML 元素在頁面中的位置決定 - 最後一個兄弟元素首先出現，因為它是最後定義的。 默認情況下，元素的 position 屬性的值為 static。 在這種情況下，z-index 屬性不起任何作用 - 它必須設置為 absolute、relative 或 fixed 方可生效。 例如： .my-first-div { position: absolute; top: 0; left: 0; width: 600px; height: 600px; z-index: 10; } .my-second-div { position: absolute; top: 0; left: 0; width: 500px; height: 500px; z-index: 20; } 具有 ....

在我的博客上，我在一些文章中遇到了一些响应性的问题。结果发现是一些代码片段引起的。 在我的博客上有一些文章，在这些文章中，有一些代码片段超出了正常页面宽度而没有空格。 例如： cd /some/super/long/super/long/folder 或者其他非常长的命令。 我的博客上的代码片段都是自动添加在 code 标签内，而 code 标签内部又包含了一个 pre 标签。 默认情况下，pre 标签上的 CSS white-space 属性被设置为 normal。为了解决这个问题，我们将其设置为 pre-wrap： pre { white-space: pre-wrap; } 当某些单词太长时，它们仍然可能破坏布局。为了解决这个问题，还需添加以下代码： pre { word-break: break-all; }

為什麼以及如何使用 CSS 正規化 默認的瀏覽器樣式表是瀏覽器必須應用到元素的一組最小樣式。 大多數時候這些樣式非常有用。 由於每個瀏覽器都有自己的一組樣式，因此找到共同的共識是很常見的。 與一些CSS 重置方法不同，正規化過程會消除瀏覽器不一致性，同時保留一套基本的規則，您可以依賴它們。 Normalize.css http://necolas.github.io/normalize.css 是解決這個問題最常用的解決方案。下面是該文件，我為您添加了詳細的註解，這樣您就可以看到它為您做了哪些工作，修復了可能您甚至都不知道的錯誤。 您必須在任何其他 CSS 文件之前加載正規化的 CSS 文件。

要選取 HTML 文件中沒有類別的元素，您可以使用以下方式： :not(.class) 例如： p:not(.description) { color: red; }

如何在 CSS 中使用 position 屬性 定位可以讓我們決定元素在螢幕上的出現位置和方式。 您可以移動元素並將它們放在希望的位置。 在這篇文章中，我們還將看到不同 position 屬性的元素之間互動時，在頁面上的變化。 我們有一個主要的 CSS 屬性：position。 它可以有以下5個值： static relative absolute fixed sticky 靜態定位 這是元素的預設值。靜態定位的元素會按照正常的頁面流程顯示。 相對定位 如果在元素上設置position: relative，就可以使用偏移屬性來定位它，這些偏移屬性是： top right bottom left 它們被稱為偏移屬性。它們接受長度值或百分比。 看一下我在 Codepen 上創建的這個例子。我創建了一個父容器、一個子容器和一個帶有一些文本的內部框： <div class="parent"> <div class="child"> <div class="box"> <p>Test</p> </div> </div> </div> 用一些 CSS 來賦予顏色和填充，但不會影響定位： .parent { background-color: #af47ff; padding: 30px; width: 300px; } .child { background-color: #ff4797; padding: 30px; } .box { background-color: #f3ff47; padding: 30px; border: 2px dotted #333; font-family: courier; text-align: center; font-size: 2rem; } 這是結果：...

如何在 CSS 中使用系統字型，以提升您的網站速度並為使用者提供更好的體驗和網頁載入時間 一點歷史 現在 網頁字型的影響 系統字型登場 著名的網站使用系統字型 我決定使用系統字型，給我程式碼 關於 system-ui 的一點說明 使用 @font-face 規則來使用字型變化 閱讀更多 一點歷史 多年來，網站只能使用所有電腦上可用的字型，例如 Georgia、Verdana、Arial、Helvetica、Times New Roman。其他字型無法保證在所有網站上運作。 如果你想使用花俏的字型，你就得使用圖片。 在 2008 年，Safari 和 Firefox 引入了 @font-face CSS 屬性，線上服務開始提供 Web 字型的授權。第一個是 2009 年的 Typekit，後來由於免費提供，Google Fonts 變得非常受歡迎。 @font-face 在所有主要瀏覽器上實現，現在是現代設備的標準功能。如果你是年輕的網頁開發者，你可能沒有意識到，在 2012 年我們仍然有文章解釋這種新的 Web 字型技術。 現在 現在你可以使用任何你想使用的字型，無論是依賴於像 Google Fonts 這樣的服務，還是提供自己的字型進行下載。 你可以這麼做，但你應該這麼做嗎？ 如果你有選擇的權利（這意味著你不是在實現客戶提供的設計），你可能會想好好考慮一下，回歸到基本（但仍具有風格！）。 網頁字型的影響 在你的網頁上載入的每個內容都有一個成本。這個成本在移動設備上特別明顯，因為你所需的每個位元組都會影響載入時間和使用者消耗的頻寬量。 在內容渲染之前，字型必須被載入，因此您需要在用戶能夠閱讀您所寫的任何單詞之前等待該資源載入完成。 但網頁字型是提供出色的用戶體驗的一種方式，通過良好的排版。 系統字型登場 作業系統具有優秀的預設字型。 系統字型具有速度和性能上的優勢，而且能夠減少網頁大小。 但是，它們讓您的網站對任何查看該網站的人來說都非常熟悉，因為他們每天都在使用自己的電腦或移動設備上看到相同的字型。 它實際上就是一種原生字型。 由於它是系統字型，所以保證看起來很棒。 著名的網站使用系統字型 您可能知道其中一些著名的網站，例如： GitHub Medium Ghost Bootstrap Booking.com 他們多年來一直使用系統字型。 甚至 WordPress 控制台 - 用於運行數百萬個網站的平台 - 也使用系統字型，而以閱讀為主的 Medium 也決定使用系統字型。...

了解 CSS 具體性的含義以及其重要性 當一個元素被多個具有不同選擇器的規則所影響時，會發生什麼情況？這些規則都影響相同的屬性。 例如，讓我們來談一談這個元素： <p class="dog-name">Roger</p> 我們可以有以下規則： .dog-name { color: yellow; } 還有另一個以 p 為選擇器的規則，它將顏色設置為另一個值： p { color: red; } 還有一個以 p.dog-name 為選擇器的規則。哪個規則將優先於其他規則，為什麼？ 這時要介紹一下具體性。最具體的規則將優先選擇。如果兩個或多個規則具有相同的具體性，則最後出現的規則將優先選擇。 對於初學者來說，實際上什麼是更具體的有點困惑。我想對於不常看這些規則的專家來說也是困惑的，或者只是忽視了它們。 如何計算具體性 具體性是使用一種約定方式來計算的。 我們有 4 個插槽，每個插槽的初始值為 0: 0 0 0 0。最左邊的插槽最重要，最右邊的插槽最不重要。 就像十進制數字一樣：1 0 0 0 比 0 1 0 0 要大。 插槽 1 插槽 1 是最不重要的。 當我們有一個 類型選擇器 時，我們會增加這個值。類型就是標籤名稱。如果在規則中有多個類型選擇器，則按照該插槽中存儲的值進行遞增。 例子： p { } /* 0 0 0 1 */ span { } /* 0 0 0 1 */ p span { } /* 0 0 0 2 */ p > span { } /* 0 0 0 2 */ div p > span { } /* 0 0 0 3 */ 插槽 2 第二個插槽的值增加 3 個方面：...

margin（邊距）是一個在CSS中常用的簡單屬性，用於在元素周圍添加空間。 記住： margin 在元素邊框之外添加空間 padding 在元素邊框之內添加空間 具體的 margin 屬性 margin 有四個相關屬性，可以一次性改變單個邊的 margin： margin-top margin-right margin-bottom margin-left 使用這些屬性非常簡單，不容易混淆，例如： margin-left: 30px; margin-right: 3em; 使用 margin 快捷方式 margin 是一個快捷方式，用於同時指定多個邊的 margin，根據輸入的數值個數不同，其行為也不同。 1個數值 如果使用一個數值，那麼該數值將應用於所有邊的 margin：top、right、bottom、left。 margin: 20px; 2個數值 如果使用兩個數值，那麼第一個數值將應用於底部和頂部，第二個數值將應用於左邊和右邊。 margin: 20px 10px; 3個數值 如果使用三個數值，那麼第一個數值將應用於頂部，第二個數值將應用於左右邊，第三個數值將應用於底部。 margin: 20px 10px 30px; 4個數值 如果使用四個數值，那麼第一個數值將應用於頂部，第二個數值將應用於右邊，第三個數值將應用於底部，第四個數值將應用於左邊。 margin: 20px 10px 5px 0px; 因此，順序是頂-右-底-左。 可接受的數值 margin 可接受以任何長度單位表示的數值，最常見的單位是 px、em、rem，但也存在許多其他單位。 它還接受百分比值和特殊值 auto。 使用 auto 來居中元素 auto 可以用於告訴瀏覽器自動選擇 margin，最常用於以下方式居中元素： margin: 0 auto; 如上所述，使用兩個數值時，第一個數值應用於底部和頂部，第二個數值應用於左邊和右邊。 現代居中元素的方法是使用Flexbox及其 justify-content: center; 指令。...

學習如何使用 CSS 更改元素背景 可以使用多個 CSS 屬性來更改元素的背景： background-color 背景顏色 background-image 背景圖像 background-clip 背景區域 background-position 背景位置 background-origin 背景原點 background-repeat 背景重複 background-attachment 背景附著 background-size 背景大小 還有一個縮寫屬性 background，可以縮短定義並將它們分組在一行。 background-color 接受顏色值，可以是顏色關鍵字，也可以是 rgb 或 hsl 值： p { background-color: yellow; } div { background-color: #333; } 除了使用顏色，你還可以使用圖像作為元素的背景，指定圖像位置的 URL： div { background-image: url(image.png); } background-clip 可讓你決定背景圖片或顏色的區域。默認值為 border-box，該值延伸到邊框外緣。 其他值包括： padding-box：將背景延伸到填充邊緣，不包括邊框。 content-box：將背景延伸到內容邊緣，不包括填充。 inherit：應用父元素的值。 當使用圖像作為背景時，你需要使用 background-position 屬性來設置圖像的放置位置。left、right、center 都是 X 軸的有效值，top、bottom 是 Y 軸的有效值： div { background-position: top right; } 如果圖像比背景小，則需要使用 background-repeat 屬性設置行為。它應該在所有軸上重複 repeat-x、repeat-y，或者在所有軸上上重複 repeat？後者是默認值。還有一個值 no-repeat。...

如何在 CSS 中使用特性查詢 特性查詢是 CSS 的一個近期且相對較不為人知的功能，但它得到了良好的支持。 我們可以使用它來檢查瀏覽器是否支援某個特性，方法是使用 @supports 關鍵字。 舉個例子，這在目前的時候，檢查瀏覽器是否支援 CSS Grid 特別有用，可以這樣做： @supports (display: grid) { /* 應用這個 CSS */ } 我們檢查瀏覽器是否支援 display 屬性的 grid 值。 我們可以使用 @supports 來檢查任何 CSS 屬性，並檢查任何值。 我們還可以使用邏輯運算符 and、or 和 not 來構建複雜的特性查詢。 以下示例檢查瀏覽器是否同時支援 CSS Grid 和 Flexbox： @supports (display: grid) and (display: flex) { /* 應用這個 CSS */ }