[TOC] # 選擇器 ## 選擇器表 |選擇器| 例子 |描述| | :---- | :---- | :--- | |.class| .intro |類選擇器| |#id |#firstname |id 選擇器| |* |* |選擇所有元素| |element |p|選擇所有\<p>元素| |element, element| div, p |選擇所有 \<div> 元素和所有 \<p> 元素| |element element |div p |選擇 \<div> 元素內部的所有 \<p> 元素| |element > element |div > p |選擇父元素為 \<div>元素的所有 \<p>元素| |element + element |div + p |選擇緊接在 \<div> 元素之后的所有 \<p> 元素| |element ~ element |p ~ ul |選擇所有為 \<p> 元素兄弟元素的 \<ul> 元素（ul 與 p 為兄弟關系而不是父子關系）| <span style="font-size: 20px;">通過屬性選擇</span> |選擇器| 例子| 描述| | :---- | :---- | :---- | |[attribute]| [target]| 選擇帶有 target 屬性的所有元素| |[attribute=value]| [target=_blank]| 選擇 target="_blank" 的所有元素| |[attribute^=value]| a[src^=”https”]| 選擇其 src 屬性以 "https" 開頭的每個 \<a> 元素| |[attribute$=value]| a[src$=”.pdf”]| 選擇其 src 屬性以 ".pdf" 開頭的每個 \<a> 元素| |[attribute*=value]| a[src*=”abc”]| 選擇其 src 屬性包含 "abc" 子串的每個 \<a> 元素| <span style="font-size: 20px;">偽元素選擇器（針對 CSS 中已經定義好的偽元素使用的選擇器）</span> |選擇器| 例子| 描述| |:---- | :---- | :---- | |:before |p:before |在每個 \<p> 元素的內容之前插入內容（該元素為內聯元素）| |:after |p:after| 在每個 \<p> 元素的內容之后插入內容| |first-line| p:first-line| 選中每個 \<p> 元素的首行| |first-letter| p:first-letter |選中每個 \<p> 元素的首字母| <span style="font-size: 20px;">帶父子關系的選擇器</span> |選擇器| 例子 |描述| | :---- | :---- | :----| |first-child| p:first-child |指定第一個子元素的樣式| |last-child |...|指定最后一個子元素的樣式| |nth-child |...| 指定第 n 個子元素的樣式（從 1 開始）| |nth-last-child| ...| 指定倒數第 n 個子元素的樣式| |only-child |...| 指定唯一子元素的樣式（該元素是唯一的子元素）| `nth-child(odd) `選擇第奇數個子元素；`nth-child(even) `選擇第偶數個子元素 需要注意`h2:nth-child(odd)` 并不是指 "針對 div 元素中第奇數個 h2 子元素來使用"，而是指 "當 div 元素中的第奇數個子元素如果是 h2 子元素時使用" 這樣的含義可能會導致一些問題，所以有了 `nth-of-type` 和 `nth-last-of-type` 這兩個選擇器，在計算子元素到底是第奇數個還是第偶數個時只會針對同指定類型的子元素進行計算。 同樣的，有 `only-of-type` 選擇器可以設定指定類型的是唯一子元素的元素的樣式。 <span style="font-size: 20px;">偽狀態選擇器（指定的樣式只有當元素處于某種狀態下時才起作用）</span> |選擇器| 描述| |:----| :---- | |:hover |鼠標經過| |:active| 鼠標按下還未松開| |:target |選擇當前活動的元素（一般用于指定當前頁面中的鏈接跳轉到的元素的樣式）| |:focus |元素獲得光標焦點時的樣式，文本框控件獲得焦點并進行文字輸入時使用| |:enabled |元素處于可用狀態時的樣式| |:disabled |元素處于不可用狀態時的樣式| |::selection| 當元素處于選中狀態時的樣式，注意這個是兩個冒號| |:invalid :valid | 指定當元素通過 required、pattern 等屬性進行檢查時不符合 / 符合元素規定格式時的樣式| |:required（已指）:optional（未指）| 指定允許使用 required 屬性，且已經指定了 / 未指定 required 屬性的 input 元素、select 元素以及 textarea 元素的樣式| |:in-range :out-of-range |需設置 min 和 max 屬性，指當輸入值在該范圍內 / 不在該范圍內時的樣式| |:checked |元素處于選取狀態時的樣式| |:default |指定頁面打開時默認處于選取狀態的單選框或復選框控件的樣式| css 設置鏈接樣式下列說法正確的是（C） - a:hover 可以在 a:visited?之前生效 - a:hover 可以在 a:link 之前生效 - a:active?必須位于?a:hover?之后 - a:active?鏈接被點擊后的樣式 1. link: 鏈接平常的狀態 2. visited: 鏈接被訪問過之后 3. hover: 鼠標放到鏈接上的時候 4. active: 鏈接被按下的時候 正確順序：“愛恨原則”（LoVe/HAte），即四種偽類的首字母 LVHA。再重復一遍正確的順序：a:link、a:visited、a:hover、a:active 因為當鼠標經過未訪問的鏈接，會同時擁有 a:link、a:hover 兩種屬性，a:link 離它最近，所以它優先滿足 a:link，而放棄 a:hover 的重復定義。當鼠標經過已經訪問過的鏈接，會同時擁有 a:visited、a:hover 兩種屬性，a:visited 離它最近，所以它優先滿足 a:visited， 而放棄 a:hover 的重復定義。 <span style="font-size: 20px;">過濾選擇器</span> |選擇器 |例子| 描述| |:----| :---- | :---- | |:not(selector) |:not(p)| 選擇非 \<p> 元素的每個元素。 |:root |:root| 選擇文檔的根元素 |:empty| td:empty| 選擇沒有子元素的每個 \<td> 元素（包括文本節點）(一般用于指定表格項為空時的樣式)| ## 優先級與權重 CSS的權重分為 4 個級別： - 內聯樣式（HTML 文檔中的 style 屬性） - ID 選擇器 - 類、偽類、屬性選擇器 - 元素、偽元素 這 4 個級別的權重從高到低代表不同的優先級，內聯樣式的優先級最高，元素和偽元素的優先級最低，最終權重值根據不同的優先級加權計算。可以使用 “0, 0, 0, 0” 這樣來表示一個權重，分別對應上面的 4 個級別。 **比較權重大小時，先從高優先級的權重開始比較，遇到相同值后再比較后面的優先級。** > 有些文案將這 4 個級別的權重值描述為 1000， 100， 10， 1；需要注意的是，在做權重計算時，低級別的權重不會進位成高級別的權重，如 11 個類選擇器的權重并不會超過 1 個 ID 選擇器 | 選擇器/內聯樣式 | 權重說明 | | :---- | :---- | | * | 通配符和繼承的屬性，權重為 0, 0, 0, 0 | | ul li | 2 個元素選擇器，權重為 0, 0, 0, 2 | | ul li .item | 2 個元素選擇器，1 個類選擇器，權重為 0, 0, 1, 2 | | ul li:hover | 2 個元素選擇器，1 個偽類選擇器，權重為 0, 0, 1, 2 | | #content | 1 個 ID 選擇器，權重為 0, 1, 0, 0 | | body #content | 1 個 ID 選擇器，1 個元素選擇器，權重為 0, 1, 0, 1 | | div[id="content"] | 1 個元素選擇器，1 個屬性選擇器，權重為 0, 0, 1, 1 | | style="" | 內聯樣式屬性，權重為 1, 0, 0, 0 | 最后，還有一個特殊的規則就是`!important`，可以將對應的規則提升到最高的權重。 # 文字與字體 ## 文本相關屬性 |屬性 |描述 |值 | | --- | --- | --- | |color |設置文本顏色 |……下面都有 inherit 不寫了 | |direction | 規定文本方向/書寫方向 |ltr(默認:從左到右) rtl | |letter-sapcing |設置字符間距| normal length | |line-height |設置行高 |normal length % number| |text-align| 設置文本水平對齊方式 |left right center justify | |text-decoration |規定添加到文本的裝飾效果 |none underline overline line-through blink | |text-indent |規定文本塊首行的縮進 |length %| |text-shadow |規定添加到文本的陰影效果 | text-shadow: h-shadow v-shadow blur color | |text-transform |控制文本的大小寫 |none capitalize uppercase lowercase | |white-space |規定如何處理元素中的空白以及控制換行 |normal nowrap(不換行直到遇到\<br>) pre(空白會被瀏覽器保留) pre-wrap | |word-spacing |設置單詞間距 | normal length| |text-outline |規定文本輪廓 |text-outline: thickness（輪廓粗細） blur（模糊半徑） color;| |text-overflow |規定當文本溢出包含元素時的操作| clip（修剪） ellipsis（省略號） string（使用給定的字符串）| |text-justify |text-align 設置為 "justify" 時使用的對齊方法 | text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim | | word-break | 規定自動換行的處理方法 | normal 使用瀏覽器默認的換行規則；break-all 允許在單詞內換行；keep-all 只能在半角空格或連字符處換行。 | | word-wrap | word-wrap 屬性允許長單詞或 URL 地址換行到下一行。 | normal 只在允許的斷字點換行（瀏覽器保持默認處理）；break-word 在長單詞或 URL 地址內部進行換行。 | 1.設置容器寬度后結合 `word-break: break-all;` 和 `word-wrap: break-word;` 屬性可以實現文字的自動換行。 2.設置單行文本溢出顯示 "..." 使用 `text-overflow: ellipse` 還需要給父元素加上 `overflow: hidden` 才行，且父元素要設置寬度。 ## 字體相關屬性 |屬性 |說明 |值| |--- |--- | ---| |font-family |規定文本的字體系列 | ... | |font-size| 規定字體尺寸 | ... | |font-style |字體樣式 |normal italic oblique| |font-weight| 字體粗細 |normal bold bolder（更粗） lighter| font-family 可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。也就是說，font-family 屬性的值是用于某個元素的字體族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。 有兩種類型的字體系列名稱： ? 指定的系列名稱：具體字體的名稱，比如："times"、"courier"、"arial"。 ? 通常字體系列名稱：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace" 提示：使用逗號分割每個值，并始終提供一個類族名稱作為最后的選擇。 注意：使用某種特定的字體系列（Geneva）完全取決于用戶機器上該字體系列是否可用；這個屬性沒有指示任何字體下載。因此，強烈推薦使用一個通用字體系列名作為后路。 ## 使用自定義字體 現在一般使用 .woff2 格式的自定義字體，需要從網上下載 .ttf 格式然后轉換為 .woff2 格式，鑒于 Web 字體一般都是有版權的，使用須謹慎。 ```css <style> @font-face { font-family: 'myFirstFont'; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } </style> ``` # 盒模型 標準盒子模型：box-sizing: content-box（默認）  IE盒子模型：box-sizing: border-box  區別： - 標準盒子模型 width 和 height 只包括內容 (content) 的寬和高 尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。 - IE盒子模型 width 和 height 包括內容、內邊距和邊框 尺寸計算公式: width = border + padding + (內容的)width，height = border + padding + (內容的)height 一般來說，使用 flex 布局的容器會設置`box-sizing: border-box` # 布局 ## postion 的屬性 `static` 默認位置：在一般情況下，我們不需要特別的去聲明它，但有時候遇到繼承的情況，我們不愿意見到元素所繼承的屬性影響本身，從而可以用 Position:static 取消繼承，即還原元素定位的默認值。設置為 static 的元素，它始終會處于頁面流給予的位置(static 元素會忽略任何 top、 bottom、left 或 right 聲明)。一般不常用。 `relative` 相對定位：相對定位是相對于元素默認的位置的定位，它偏移的 top，right，bottom，left 的值都以它原來的位置為基準偏移，而不管其他元素會怎么樣。注意 relative 移動后的元素在原來的位置仍占據空間。 `absolute` 絕對定位：設置為 absolute 的元素，如果它的父容器設置了 position 屬性，并且 position 的屬性值為 **absolute 或者 relative 或者 fixed**，那么就會依據父容器進行偏移。如果其父容器沒有設置 position 屬性，那么偏移是以 body 為依據（這里會向上找到第一個有設置 position 為 absolute 或 relative 或 fixed 的父元素相對它定位）。注意設置 absolute 屬性的元素在標準流中不占位置。 <span style="color: red">另外，設置了 position:absolute 的元素將變為塊級元素</span> `fixed` 固定定位：位置被設置為 fixed 的元素，可定位于相對于瀏覽器窗口的指定坐標。不論窗口滾動與否，元素都會留在那個位置。它始終是以 body 為依據的。 注意設置 fixed 屬性的元素在標準流中不占位置。 `sticky`：新增屬性（兼容性低）。設置了 sticky 的元素，在屏幕范圍（viewport）時該元素的位置并不受到定位影響（設置 top、left 等屬性無效），當該元素的位置將要移出偏移范圍時，定位又會變成 fixed，根據設置的 left、top 等屬性成固定位置的效果。 sticky 屬性生效有以下限制： 1. 須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。 - 并且 top 和 bottom 同時設置時，top 生效的優先級高，left 和 right 同時設置時，left 的優先級高。 2. 設定為 position:sticky 元素的任意父節點的 overflow 屬性必須是 visible，否則 position:sticky 不會生效。這里需要解釋一下： - 如果 position:sticky 元素的任意父節點定位設置為 overflow:hidden，則父容器無法進行滾動，所以 position:sticky 元素也不會有滾動然后固定的情況。 - 如果 position:sticky 元素的任意父節點定位設置為 position:relative | absolute | fixed，則元素相對父元素進行定位，而不會相對 viewprot 定位。 3. 達到設定的閥值。即設定了 position:sticky 的元素表現為 relative 還是 fixed 是根據元素是否達到設定了的閾值決定的。 - 該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。 - 當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。亦即如果你設置了 top: 50px，那么在 sticky 元素到達距離相對定位的元素頂部 50px 的位置時固定，不再向上移動。 比如使用 sticky 屬性實現頂部導航欄固定，`position:sticky; top:0;`表示 top 值 0 為閾值，當該元素距離頁面視窗頂部的距離大于 0 時為 relative 定位，小于 0 時為 fixed 定位。 [sticky 使用示例](https://www.cnblogs.com/coco1s/p/6402723.html) ## flex 布局 采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱 "容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱 "項目"。 注意：設為 Flex 布局以后，子元素的 float、clear 和 vertical-align 屬性將失效。 flex 布局的屬性可以分為在容器上設置的屬性和在項目上設置的屬性 詳細閱讀：[https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) ### 容器的屬性 以下6個屬性設置在容器上：`flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content` - flex-direction: 決定主軸的方向，即項目的排列方向，有 4 個可選的值 - row(默認值)：主軸為水平方向，起點在左端 - row-reverse：主軸為水平方向，起點在右端 - column：主軸為垂直方向，起點在上沿 - column-reverse：主軸為垂直方向，起點在下沿  ***** - flex-wrap: 默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap 屬性定義，如果一條軸線排不下，如何換行。它有3種可能的取值：nowrap wrap wrap-reverse  ***** - flex-flow: flex-direction 和 flex-wrap 的簡寫 - justify-content: 定義了項目在主軸上的對齊方式，其有 5 種可能的取值。具體對齊方式與軸的方向有關。下面假設主軸為從左到右 - flex-start（默認值）：左對齊 - flex-end：右對齊 - center：居中 - space-between：兩端對齊，項目之間的間隔相等 - space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍]  ***** - align-items: 定義項目在交叉軸上如何對齊，它有 5 個可能的取值 - flex-start：交叉軸的起點對齊 - flex-end：交叉軸的終點對齊 - center：交叉軸的中點對齊 - baseline：項目的第一行文字的基線對齊 - stretch(默認值)：如果項目未設置高度或設為 auto，將占滿整個容器的高度  ***** - align-content: 該屬性用于定義多根軸線的對齊方式，如果只有一根軸線則該屬性無效（多行才有效），其有 6 種可能的取值  ### 項目的屬性 以下 6 個屬性設置在項目上，限于篇幅，這里只列出便于記憶的要點 - order: 定義項目的排列順序，默認為 0，數值越小，排列越靠前  - flex-grow: 定義項目的放大比例，默認為 0，即如果存在剩余空間也不放大；如果所有項目的 flex-grow 屬性都為 1，則它們將等分剩余空間。如果一個項目的 flex-grow 屬性為 2，其他項目為 1，則前者占據的剩余空間將比其他項多一倍。  - flex-shrink: 定義了項目的縮小比例，默認為 1，即如果空間不足，該項目將縮小；如果所有項目的 flex-shrink 屬性都為 1，當空間不足時，都將等比例縮小。如果一個項目的 flex-shrink 屬性為 0，其他項目都為 1，則空間不足時，前者不縮小。 - flex-basis: 定義了在分配多余空間之前，項目占據的主軸空間(main size)。瀏覽器根據這個屬性，計算主軸是否有多余空間，默認值為 auto，即項目本來的大小。它可以設為跟 width 或 height 屬性一樣（比如 350px），則項目將占據固定空間。 - flex: flex-grow、flex-shrink、flex-basis 的簡寫，默認值 0 1 auto，后兩個屬性可選。有兩個快捷值：auto（1 1 auto）和 none（0 0 auto） - align-self: align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性。默認值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。該屬性可能取 6 個值，除了 auto，其他都與 align-items 屬性完全一致。  ## column布局（多欄布局） 一般在對文本內容內部布局時才會使用 |屬性 |描述| 值| | :----| :---- | :---- | |column-count| 規定元素應該被分隔的列數| number auto（由其他屬性決定）| |column-fill| 規定如何填充列 |balance auto| |column-gap| 規定列之間的間隔| length normal（建議1em）| |column-rule| 設置所有column-rule-*的簡寫|| |column-rule-color| 規定列之前規則的顏色| color| |column-rule-style| 規定列之間規則的樣式| | |column-rule-width| 規定列之間規則的寬度| length auto| |column-span| 規定元素應該橫跨的列數| number all| |column-width| 規定列的寬度| length auto| |columns| column-width 和 column-count的簡寫|| 簡寫： ```css columns: column-width column-count; column-rule: column-rule-width column-rule-style column-rule-color; ``` # 變形處理及動畫 ## transfrom變形處理  | 變形方法 | 描述 | | --- | --- | |translate3d(x,y,z) |3D 轉換-移動| |translate(x,y) |2D 轉換-移動| |translateX(x) |只用 X 軸| |translateY(y) |只用 Y 軸| |translateZ(z) |3D 轉換-只用 Z 軸| | --- | --- | |scale3d(x,y,z) |3D 轉換-縮放| |scale(x,y) |2D 轉換-縮放| |scaleX(x) |通過設定 X 軸的值來定義縮放轉換| |scaleY(y) |通過設定 Y 軸的值來定義縮放轉換| |scaleZ(z) |3D 縮放-通過 Z 軸設置| | --- | --- | |rotate3d(x,y,z,angle) |3D 轉換-旋轉| |rotate(angle/value) |可以填值 = 縮放倍率 2D 轉換-旋轉| |rotateX(x) |定義沿著 X 軸的 3D 旋轉| |rotateY(x) |定義沿著 Y 軸的 3D 旋轉| |rotateZ(x) |定義沿著 Z 軸的 3D 旋轉| | --- | --- | |skew(x-angle,y-angle) |定義沿著 X 和 Y 軸的 2D 傾斜轉換| |skewX(angle) |定義沿著 X 軸的 2D 轉換| |skewY(angle) |定義沿著 Y 軸的 2D 旋轉| | --- | --- | |perspective(n) |為 3D 轉換元素定義透視視圖| |matrix(n,n,n,n,n,n)| 定義 2D 轉換，使用六個值的矩陣| |matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)|定義 3D 轉換，使用 16 個值 4x4| |transform-origin: |x-axis y-axis z-axis; |指定變形的基準點，不指定的話默認以元素的中心為基準點| 可以一次對元素進行多種變形處理： ```css transform: translate(100px, 100px) rotate(45deg) scale(1.5); ``` ## transition & animation 動畫 <span style="font-size: 20px;">transition</span> 簡寫：`transition：property duration timing-function transition-delay` - property：對哪個屬性進行平滑過渡，可以用 all 表示所有屬性 - duration：在多久時間內完成屬性值的平滑過渡 - timing-function：通過什么方法進行平滑過渡 - linear：以相同的速度開始至結束，等同于cubic-bezier(0, 0, 1, 1) - ease：慢速開始，然后變快，慢速結束 - ease-in：慢速開始的過渡效果 - ease-out：慢速結束的過渡效果 - ease-in-out：慢速開始和慢速結束的過渡效果 - cubic-bezier(n, n, n, n)：自定義過渡效果，可能的值0~1 - transition-delay：延遲時間，單位 s、ms 可以平滑過渡多個屬性：`transition: background-color 1s linear, color 1s linear, width 1s linear;` <span style="font-size: 20px;">animation</span> 使用方式：在指定元素的樣式中添加 animation 屬性并指定動畫名稱和時間等 樣式文件中定義對應的 @keyframes 動畫名稱 簡寫：`animation: name duration timing-function delay iteration-count direction` 也可以單獨設置：`animation-name: xxx; animation-duration: xxx;` - animation-name（單獨設置時的樣式名稱）：動畫名稱 - animation-duration：規定動畫完成一個周期所花費的秒或毫秒，默認是 0 - animation-timing-function：規定動畫的速度曲線，默認是 ease，值與 transition 相同 - animation-delay：規定動畫從何時開始，默認是 0 - animation-iteration-count：規定動畫的播放次數，默認是 1，infinite 表示無限 - animation-direction：規定動畫是否在下一個周期逆向播放，默認是 "normal"，"alternate" 表示輪流反向播放 - animation-play-state：規定動畫在運行還是暫停，可以在 JS 中使用該屬性，這樣能在播放過程中暫停動畫；paused 規定動畫已暫停，running 規定動畫正在播放 - animation-fill-mode： 規定對象動畫時間之外的狀態，語法：`animation-fill-mode : none | forwards | backwards | both;` - none 不改變默認行為。 - forwards 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。 - backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。 - both 向前和向后填充模式都被應用。 # 顏色篇 [顏色對照表](https://www.sioe.cn/yingyong/yanse-rgb-16/) 目前有 4 種設定顏色的方式： - RGB + opacity（元素透明度） - RGBA：紅色值（R）、綠色值（G）、藍色值（B）、alpha通道值（A）；RGB 值范圍 0~255，alpha 通道范圍 0~1 - HSL：色調（H）、飽和度（S）、亮度（L）；色調值 0 或 360 表示紅色，120 表示綠色，240 表示藍色，取值大于 360 時，實際的值等于該值除以 360 后的余數。飽和度和亮度的取值范圍是 0%~100% - HSLA：HSL 加個 alpha 通道 <span style="font-size: 20px;">alpha 通道與 opacity 屬性的區別</span> opacity 只能指定整個元素的透明度，而使用 alpha 通道可以單獨針對元素的背景色和文字顏色等指定透明度。 <span style="font-size: 20px;">指定顏色值為 transparent</span> 如果將顏色值指定為 transparent，則會將背景、文字或邊框等的顏色設定為完全透明，相當于使用了值為 0 的 alpha 通道 > 網絡解釋：transparent 它代表著全透明黑色，即一個類似 rgba(0,0,0,0) 這樣的值。 > 例如在 css 屬性中定義：background:transparent，意思就代表背景透明。 > 實際上 background 默認的顏色就是透明的屬性，所以寫和不寫都是一樣的。 > transparent 一般使用場景： > 如果一個元素覆蓋在另外一個元素之上，而你想顯示下面的元素，這時你就需要把上面這個元素的 background 設置為 transparent # 單位篇 | 單位 | 描述 | | --- | --- | | em | 相對于當前元素的 `font-size` 的計量單位。一般瀏覽器默認字體大小為 16px，那么 2em = 32px | | rem| 根元素（html）的 `font-size` | | vw| viewpoint width 視窗寬度； 1vw = 視窗寬度的 1% | | vh| viewpoint height 視窗高度；1vh = 視窗高度的 1% | | vmin| vw 和 vh 中較小的那個 | | vmax| vw 和 vh 中較大的那個 |