如何使用 CSS 盒模型？ 每个 CSS 元素本质上都是一个盒子。每个元素都是一个通用的盒子。 盒模型根据一些 CSS 属性解释元素的大小。 从内到外，我们有： 内容区域 内边距 边框 外边距 最好的方式是打开浏览器的开发者工具并查看它的显示： 在这里，你可以看到 Firefox 告诉我一个我突出显示的 span 元素的属性。我右键点击它，按下检查元素，然后转到开发者工具的布局面板。 你可以看到，浅蓝色的空间是内容区域。它周围有内边距、边框和外边距。 默认情况下，如果你在元素上设置了宽度（或高度），宽度将应用于内容区域。所有的内边距、边框和外边距计算都是在值的外部完成的，所以当你进行计算时，要记住这一点。 你可以使用 Box Sizing 更改这种行为。

如何在 CSS 中使用盒模型的盒尺寸 當計算元素的寬度時，瀏覽器的默認行為是將計算出的寬度和高度應用於內容區域，而不考慮任何填充、邊框和邊緣。 這種方法已被證明對工作來說相當複雜。 您可以通過設置 box-sizing 屬性來更改這種行為。 box-sizing 屬性是一個很好的助手。它有 2 個值： border-box content-box content-box 是默認值，在 box-sizing 變成一個新事物之前，我們一直使用這個值。 border-box 是我們正在尋找的新東西。如果您在元素上設置了這個值： .my-div { box-sizing: border-box; } 寬度和高度的計算將包括填充和邊框。只有邊緣部分是留出來的，這是合理的，因為在我們的思維中，我們通常將邊緣視為一個單獨的部分：邊緣在方塊之外。 這個屬性只是一個小變化，但具有重大影響。CSS Tricks 甚至宣布了一個國際盒尺寸意識日，只是這麼說而已，建議在頁面上的每個元素都應用它，使用以下代碼： *, *:before, *:after { box-sizing: border-box; }

了解如何在CSS中使用單位 在CSS中，您每天都會使用單位。它們用於設定長度、填充、邊距、對齊元素等。 像是 px、em、rem 或百分比之類的單位。 它們無所不在。也有一些相對較不熟悉的單位。 Pixels（像素） 最常用的測量單位。一個像素並不實際對應到屏幕上的物理像素，因為這會因設備而變化（考慮高DPI設備與非Retina設備）。 有一個慣例可以使這個單位在設備之間保持一致。 Percentages（百分比） 另一個非常有用的度量單位，百分比允許您以父元素相應屬性的百分比值指定數值。 例子： .parent { width: 400px; } .child { width: 50%; /* = 200px */ } 現實世界的測量單位 我們還有那些從現實世界翻譯而來的測量單位。在屏幕上通常無用，但在打印樣式表中可能很有用。它們是： cm 厘米（相當於37.8像素） mm 毫米（0.1cm） q 厘米的四分之一 in 英寸（相當於96像素） pt 點（1英寸=72點） pc 派卡（1派卡=12點） 相對單位 em 是分配給該元素的 font-size 的值，因此其精確值會在不同元素之間變化。它不會隨著使用的字體而改變，只會隨著字體大小改變。在印刷術中，它測量的是字母 m 的寬度。 rem 與 em 類似，但不是根據當前元素的字體大小變化，而是使用根元素（html）的字體大小。您只需要設置一次該字體大小，rem 將成為整個頁面上的一個一致的單位。 ex 類似於 em，但測量的不是 m 的寬度，而是 x 的高度。它可以根據使用的字體和字體大小而改變。 ch 類似於 ex，只是它測量的是 0（零）的寬度，而不是 x 的高度。 Viewport 單位 vw viewport 寬度單位 表示視口寬度的百分比。50vw 表示視口寬度的50%。 vh viewport 高度單位 表示視口高度的百分比。50vh 表示視口高度的50%。 vmin viewport 最小單位 表示高度或寬度中較小者的百分比。30vmin 是當前寬度或高度的30％，取決於哪個小。 vmax viewport 最大單位 表示高度或寬度中較大者的百分比。30vmax 是當前寬度或高度的30％，取決於哪個大。 分數單位 fr 是分數單位，用於將空間分為分數，主要在 CSS Grid 中使用。

學習CSS虛擬元素的基礎知識 虛擬元素用於樣式化元素的特定部分。 它們以兩個冒號::開頭。 有時你會在代碼中看到它們用單個冒號表示，但這只是一種為了向後兼容而支持的語法。應該使用兩個冒號來區分它們和虛擬類別。 ::before和::after可能是最常用的虛擬元素。它們用於在元素之前或之後添加內容，例如圖標。 以下是虛擬元素的列表： 虛擬元素 目標 ::after 在元素之後創建一個虛擬元素 ::before 在元素之前創建一個虛擬元素 ::first-letter 可用於樣式化一塊文本的首個字母 ::first-line 可用於樣式化一塊文本的首行 ::selection 標記用戶選中的文本 讓我們來做個例子。假設您想要設置段落的第一行字體大小稍大，這在印刷排版中很常見： p::first-line { font-size: 2rem; } 或者您想讓首個字母加粗： p::first-letter { font-weight: bolder; } ::after 和 ::before 則稍微有點不直觀。我記得在使用 CSS 添加圖標時使用過它們。 使用 content 屬性來在元素之後或之前插入任何形式的內容： p::before { content: url(/myimage.png); } .myElement::before { content: "嘿嘿！"; }

如何在 CSS 中使用註解 CSS 允許您在 CSS 文件中，或是頁面標頭的 style 標籤中寫註解。 格式是 C-style（或者您喜歡的 JavaScript-style）的註解，使用 /* 這是一個註解 */。 這是一個多行註解。在您添加結束的 */ 標記之前，所有在開頭行之後的行都會被註解掉。 範例： #name { display: block; } /* 好規則！ */ /* #name { display: block; } */ #name { display: block; /* color: red; */ } CSS 沒有像 C 語言 或 JavaScript 中的 // 這樣的行內註解。 然而請注意，如果您在規則之前加上 //，這條規則將不會被應用，看起來就像註解生效了。實際上，CSS 檢測到語法錯誤後，會忽略帶有錯誤的行，直接處理下一行。 知道這一點後，您可以有意地編寫行內註解，但要小心，因為您無法像在區塊註解中那樣隨意添加文字。 例如： // 好規則！ #name { display: block; } 在這個例子中，由於 CSS 的工作原理，#name 規則實際上被註解掉了。如果您對此感興趣，您可以在 這裡 找到更多細節。為了避免不必要的麻煩，請避免使用行內註解，並依賴於區塊註解。

了解 CSS 選擇器的所有重要事項 選擇器允許我們將一個或多個聲明與頁面上的一個或多個元素關聯起來。 基本選擇器 假設在頁面上有一個 p 元素，我們想要使用黃色顯示其中的文字。 我們可以使用選擇器 p 來定位該元素，該選擇器定位頁面上所有使用 p 標籤的元素。實現我們想要的效果的一個簡單 CSS 規則如下： p { color: yellow; } 每個 HTML 標籤都有對應的選擇器，例如：div、span、img。 如果一個選擇器匹配多個元素，則頁面上的所有元素都將受到更改的影響。 HTML 元素有兩個在 CSS 中非常常用的屬性，用於將樣式與頁面上的特定元素關聯起來：class 和 id。 這兩者之間有一個重大的區別：在 HTML 文檔中，您可以在多個元素中重複使用相同的 class 值，但是您只能使用一次 id。根據以下的推論，使用 class 時，您可以選擇具有 2 個或多個特定類名的元素，而使用 id 則無法實現這一點。 使用 . 符號來標識類，使用 # 符號來標識 id。 使用 class 的示例： <p class="dog-name"> Roger </p> .dog-name { color: yellow; } 使用 id 的示例： <p id="dog-name"> Roger </p> #dog-name { color: yellow; } 結合選擇器...

CSS 在處理錯誤時非常靈活。當它遇到錯誤時，它不同於 JavaScript，不會整個拆開東西然後全部停止執行腳本。 CSS 試圖盡力遵從你的要求。 如果一行有錯誤，它會跳過該行並繼續往下一行執行，而不報錯。 如果你忘記在一行上加上分號： p { font-size: 20px color: black; border: 1px solid black; } 有錯誤的那一行和下一行 都不會 生效，但第三行的規則將會正確應用在頁面上。基本上，CSS 會一直掃描直到遇到分號，但在達到之前，該規則已經變成了 font-size: 20px color: black;，這是無效的，所以它會跳過。 有時候我們很難意識到錯誤在哪裡，因為瀏覽器不會告訴我們。 這也是為什麼有像 CSS Lint 這樣的工具存在的原因。

CSS 是一種語言，用於定義網頁在瀏覽器中的視覺外觀。由於最新的功能，CSS 的使用變得更加簡單。 什麼是 CSS CSS 的簡要歷史 CSS 的外觀 分號 格式和縮排 如何在網頁中加載 CSS 1：使用 link 標籤 2：使用 style 標籤 3：內聯樣式 什麼是 CSS CSS（層疊樣式表的縮寫）是用於為 HTML 文件添加樣式的語言，它告訴瀏覽器如何渲染頁面上的元素。 在 CSS 出現之前，人們希望能夠為他們的網頁添加樣式，因為當時的網頁看起來都很相似和“學術”。在個性化方面，你不能做許多事情。 HTML 3.2 引入了內聯定義顏色的選項，以及像 center 和 font 這樣的呈現標籤，但它很快變成了一個不理想的情況。 CSS 讓我們將所有與展示相關的內容從 HTML 移動到 CSS 中，這樣 HTML 就可以恢復為定義文檔結構而不是在瀏覽器中的外觀的格式。 CSS 不斷演進，5年前使用的 CSS 可能已經過時了，因為新的慣用 CSS 技術和瀏覽器的變化。 很難想象 CSS 誕生時的情況以及網頁有多麼不同。 當時，我們有幾個競爭的瀏覽器，主要有 Internet Explorer 和 Netscape Navigator。 通過使用 HTML，頁面被樣式化，使用特殊的呈現標籤（例如 bold）和特殊的屬性，其中大部分現在已被棄用。 這意味著你只能有有限的自定義機會。 大部分的樣式決策都由瀏覽器決定。 此外，你要為它們之一構建一個網站，因為每個瀏覽器都引入了不同的非標準標籤以提供更多的功能和機會。 不久後，人們意識到需要一種方法來跨瀏覽器樣式化頁面。 1994 年提出了最初的想法，1996 年，CSS 發布了第一個版本，即 CSS Level 1（“CSS 1”）。...

在這篇文章中，我將介紹屬性選擇器的使用方法。 你也可以參考 基本 CSS 選擇器介紹文章，在那裡我介紹了幾種基本的 CSS 選擇器：使用類型選擇器、類別、ID，如何結合它們，如何選擇多個類別，如何在同一規則中樣式化多個選擇器，如何使用子選擇器和直接子選擇器來遵循頁面層級，以及相鄰兄弟元素選擇器。 屬性存在選擇器 第一種選擇器類型是屬性存在選擇器。 我們可以使用 [] 語法來檢查元素是否具有某個屬性。p[id] 將選中頁面中所有帶有 id 屬性的 p 標籤，無論其值為何： p[id] { /* ... */ } 精確屬性值選擇器 在方括號內，你可以使用 = 來檢查屬性值，只有當屬性與指定的精確值匹配時，CSS 才會生效： p[id="my-id"] { /* ... */ } 匹配屬性值部分 雖然 = 讓我們可以檢查精確值，但我們還有其他運算符： *= 檢查屬性是否包含該部分值 ^= 檢查屬性是否以該部分值開頭 $= 檢查屬性是否以該部分值結尾 |= 檢查屬性是否以該部分值和連字符開頭（在類別中很常見），或者只包含該部分值 ~= 檢查屬性是否在屬性中包含該部分值，但是與其它部分之間用空格隔開 我們提到的所有檢查都是區分大小寫的。 如果在方括號的結尾加上 i，檢查就會忽略大小寫。它在許多瀏覽器中都有支持，但並非所有瀏覽器都支持，可以在 https://caniuse.com/#feat=css-case-insensitive 進行檢查。

如何使用 CSS transform 屬性 變形效果可讓你在 2D 或 3D 空間中，移動、旋轉、縮放和扭曲元素。它們是一個非常酷的 CSS 功能，尤其是與動畫結合時。 2D 變形效果 transform 屬性接受以下函數： translate() 移動元素 rotate() 旋轉元素 scale() 按比例縮放元素的大小 skew() 扭曲元素 matrix() 使用 6 個元素的矩陣執行上述任一操作，這種寫法不太直觀，但節省空間 我們還有具體軸的函數： translateX() 在 X 軸上移動元素 translateY() 在 Y 軸上移動元素 scaleX() 按比例縮放元素在 X 軸上的大小 scaleY() 按比例縮放元素在 Y 軸上的大小 skewX() 扭曲元素在 X 軸上 skewY() 扭曲元素在 Y 軸上 以下是一個示例，使用變形效果將 .box 元素的寬度放大為原來的2倍，高度縮小為原來的一半： .box { transform: scale(2, 0.5); } transform-origin 屬性可以設置變形的原點（即 (0, 0) 坐標），從而改變旋轉中心。 組合多個變形效果 你可以通過在每個函數之間使用空格將多個變形效果組合在一起。 例如： transform: rotateY(20deg) scaleX(3) translateY(100px); 3D 變形效果 我們還可以進一步，在 3D 空間而不是 2D 空間中移動元素。在 3D 空間中，我們增加了另一個軸，即 Z 軸，使視覺效果更具深度。...