網(wǎng)站加載特效聊城網(wǎng)站推廣的公司
（一）css概述
1、定義
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網(wǎng)頁數(shù)據(jù)的表現(xiàn)，可以使網(wǎng)頁的表現(xiàn)與數(shù)據(jù)內(nèi)容分離。
2、要點(diǎn)
- 怎么找到標(biāo)簽
- 怎么操作標(biāo)簽對象（element）
3、css的四種引入方式
3.1 行內(nèi)式
在標(biāo)簽的style屬性中設(shè)定CSS樣式。這種方式不需要再找標(biāo)簽對象，但沒有體現(xiàn)出CSS樣式分離的優(yōu)勢，不推薦使用。
<p style="background-color: rebeccapurple">hello yuan</p>
3.2 嵌入式：
將CSS樣式集中寫在網(wǎng)頁的<head></head>標(biāo)簽對的<style></style>標(biāo)簽對中。格式如下：
<head><style>p{background-color: #2b99ff;}</style> </head>
3.3 鏈接式
通過html語言規(guī)范將一個(gè).css文件引入到HTML文件中：
<head><link href="mystyle.css" rel="stylesheet" type="text/css"/> </head>
3.4 導(dǎo)入式
將一個(gè)獨(dú)立的.css文件引入HTML文件中，導(dǎo)入式使用CSS規(guī)則引入外部CSS文件，<style>標(biāo)記也是寫在<head>標(biāo)記中，使用的語法如下：
<style type="text/css">@import"mystyle.css"; // 此處要注意.css文件的路徑 </style>
3.5 推薦方式
- 導(dǎo)入式固有的一個(gè)缺陷：會在整個(gè)網(wǎng)頁裝載完后再裝載CSS文件，因此這就導(dǎo)致了一個(gè)問題，如果網(wǎng)頁比較大則會兒出現(xiàn)先顯示無樣式的頁面，閃爍一下之后，再出現(xiàn)網(wǎng)頁的樣式。
- 鏈接式會在網(wǎng)頁文件主體裝載前裝載CSS文件，因此顯示出來的網(wǎng)頁從一開始就是帶樣式的效果的，它不會象導(dǎo)入式那樣先顯示無樣式的網(wǎng)頁，然后再顯示有樣式的網(wǎng)頁，這是鏈接式的優(yōu)點(diǎn)。
- 推薦鏈接式。
（二）css選擇器
css的選擇器（Selector），指明了{(lán)}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素，是寫css代碼的第一個(gè)要點(diǎn)，找標(biāo)簽
1、基礎(chǔ)選擇器
1.1 通用選擇器*
一個(gè)星號*，匹配任何元素，如：
* { margin:0; padding:0; } // 設(shè)置所有標(biāo)簽外邊距和內(nèi)邊距為0像素
1.2 標(biāo)簽選擇器E
直接匹配標(biāo)簽本身，如：
p { color:green; } // 設(shè)置所有<p>標(biāo)簽的字體顏色是green
1.3 class選擇器.info或E.info
匹配所有class屬性中包含info的元素，可與標(biāo)簽選擇器配合使用，如：
.info { background-color:#ff0; } // 設(shè)置class屬性包含info的標(biāo)簽背景顏色是#ff0 div.info { background-color:#ff0; } // 設(shè)置class屬性包含info的<div>標(biāo)簽背景顏色是#ff0
1.4 id選擇器#info
匹配id屬性等于info的元素，因?yàn)闃?biāo)簽的id是唯一標(biāo)識的，所以只會匹配符合的那一個(gè)標(biāo)簽，如：
#info { background-color:#ff0; } // 設(shè)置id為info的標(biāo)簽背景顏色是#ff0
2、組合選擇器
2.1 多元素選擇器E,F
同時(shí)匹配所有E元素和F元素，E和F之間用逗號分隔，如：
div,p { color:#f00; } // 設(shè)置所有<div>標(biāo)簽和<p>標(biāo)簽的字體顏色是#f00
2.2 后代元素選擇器E F
匹配所有屬于E元素后代的F元素（嵌套在E標(biāo)簽里的F標(biāo)簽，不論多少層），E和F之間用空格分隔，如：
li a { font-weight:bold;} // 設(shè)置所有<li>標(biāo)簽的所有子孫<a>標(biāo)簽的字體加粗
2.3 子元素選擇器E>F
匹配所有E元素的子元素F（只能是緊挨著嵌套的一層），如：
div > p { color:#f00; } // 設(shè)置所有<div>標(biāo)簽的所有子標(biāo)簽<p>元素的字體顏色是#f00
2.4 毗鄰元素選擇器E+F
匹配所有緊隨E元素之后的同級元素F，如：
div + p { color:#f00; } // 設(shè)置所有緊隨在<div>標(biāo)簽之后的<p>標(biāo)簽的字體顏色是#f00
3、屬性選擇器（主要用1和2，其他了解即可）
3.1 E[att]
匹配所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略，比如“[cheacked]”。以下同。），如：
p[title] { color:#f00; } // 設(shè)置所有具有title屬性（不論何值）的<p>標(biāo)簽字體顏色為#f00 [title] { color:#f00; } // 設(shè)置所有具有title屬性（不論何值）的標(biāo)簽字體顏色為#f00
3.2 E[att=val]
匹配所有att屬性等于“val”的E元素，如：
p[title="game"] { color:#f00; } // 設(shè)置所有title屬性="game"的<p>標(biāo)簽字體顏色為#f00 [title="game"] { color:#f00; } // 設(shè)置所有title屬性="game"的標(biāo)簽字體顏色為#f00
3.3 E[att~=val]
匹配所有att屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“val”的E元素，如：
p[title~="game"] { color:#f00; } // 設(shè)置所有title屬性有多個(gè)值，其中一個(gè)值="game"的<p>標(biāo)簽字體顏色為#f00 [title~="game"] { color:#f00; } // 設(shè)置所有title屬性有多個(gè)值，其中一個(gè)值="game"的標(biāo)簽字體顏色為#f00
3.4 E[att^=val]
匹配屬性值以指定值開頭的每個(gè)元素，如：
p[title^="ga"] { color:#f00; } // 設(shè)置所有title屬性的值以"ga"開頭的<p>標(biāo)簽字體顏色為#f00 [title^="ga"] { color:#f00; } // 設(shè)置所有title屬性的值以"ga"開頭的標(biāo)簽字體顏色為#f00
3.5 E[attr$=val]
匹配屬性值以指定值結(jié)尾的每個(gè)元素，如：
p[title$="ga"] { color:#f00; } // 設(shè)置所有title屬性的值以"ga"結(jié)尾的<p>標(biāo)簽字體顏色為#f00 [title$="ga"] { color:#f00; } // 設(shè)置所有title屬性的值以"ga"結(jié)尾的標(biāo)簽字體顏色為#f00
3.6 E[attr*=val]
匹配屬性值中包含指定值的每個(gè)元素，如：
p[title*="ga"] { color:#f00; } // 設(shè)置所有title屬性的值包含"ga"的<p>標(biāo)簽字體顏色為#f00 [title*="ga"] { color:#f00; } // 設(shè)置所有title屬性的值包含"ga"的標(biāo)簽字體顏色為#f00
4、偽類(Pseudo-classes)
- CSS偽類是用來選擇元素的特定狀態(tài)或位置的選擇器。
- 以冒號(:)開頭，用于向特定元素在特定狀態(tài)下應(yīng)用樣式。
- 偽類的作用是根據(jù)元素的狀態(tài)或位置來改變其樣式，這些狀態(tài)可能包括用戶交互（如鼠標(biāo)懸停、點(diǎn)擊）或元素自身的狀態(tài)（如已訪問鏈接、禁用表單元素）。
- 偽類通常與元素選擇器結(jié)合使用，以選擇元素的特定狀態(tài)，如
a:hover用于選擇鼠標(biāo)懸停時(shí)的鏈接。- 格式: 標(biāo)簽:偽類名稱{ css代碼; }
4.1 anchor（錨點(diǎn)）偽類
又稱為鏈接偽類，主要用于選擇和樣式化HTML中的
<a>標(biāo)簽，控制鏈接的顯示效果，這些偽類根據(jù)錨點(diǎn)的不同狀態(tài)來應(yīng)用特定的樣式。以下是常見的錨點(diǎn)偽類：
?
:link?：
- 選擇所有尚未訪問過的鏈接（即默認(rèn)狀態(tài)下的鏈接）。
- 用于定義了鏈接的常規(guī)狀態(tài)
- 示例：
a:link { color: blue; }會將所有未訪問的鏈接文本設(shè)置為藍(lán)色。?
:visited?：
- 選擇所有已經(jīng)訪問過的鏈接。
- 用于閱讀文章，能清楚的判斷已經(jīng)訪問過的鏈接。
- 示例：
a:visited { color: purple; }會將所有已訪問的鏈接文本設(shè)置為紫色。- 出于隱私考慮，現(xiàn)代瀏覽器對
:visited偽類能應(yīng)用的樣式有所限制，通常只能改變顏色。?
:hover?：
- 選擇鼠標(biāo)懸停時(shí)的鏈接。
- 用于產(chǎn)生視覺效果。
- 示例：
a:hover { text-decoration: underline; }會在鼠標(biāo)懸停時(shí)給鏈接添加下劃線。?
:active?：
- 選擇被用戶激活（通常是點(diǎn)擊）時(shí)的鏈接。
- 用于表現(xiàn)鼠標(biāo)按下時(shí)的鏈接狀態(tài)。
- 示例：
a:active { color: red; }會在鏈接被點(diǎn)擊時(shí)將其文本顏色改為紅色。?
:focus?：
- 選擇獲得焦點(diǎn)的鏈接（通常通過鍵盤（Tab）導(dǎo)航或點(diǎn)擊獲得）。
- 常用于添加表單元素的樣式
- 示例：
a:focus { outline: 2px dashed #000; }會在鏈接獲得焦點(diǎn)時(shí)給其添加一個(gè)黑色的外框虛線輪廓，焦點(diǎn)消失后消失。這些偽類可以按照特定的順序來編寫（也稱為“Love-Hate”順序）：
:link->:visited->:hover->:active。這個(gè)順序是基于用戶與鏈接交互的自然流程，從未訪問到訪問，再到懸停和激活。按照這個(gè)順序編寫樣式規(guī)則可以確保它們按照預(yù)期的方式覆蓋和應(yīng)用。<head lang='zh-CN'> <style type="text/css">a:link {color: blue;text-decoration: none;}a:visited {color: purple;}a:hover {text-decoration: underline;}a:active {color: red;}a:focus {outline: 2px dashed #000;}// 補(bǔ)充：可以懸浮一個(gè)區(qū)域更改另一個(gè)區(qū)域的樣式，如：.outer:hover .right{color: red} </style> </head> <body><div class="outer"><a href="#">hello-world</a><a class="right" href="#">go-on</a></div> </body> </html>
4.2 其它偽類
- 動(dòng)態(tài)偽類（如
:hover、:active和:focus）不僅限于鏈接元素，還可以應(yīng)用于任何HTML元素。在表單中，這些動(dòng)態(tài)偽類可以用來增強(qiáng)用戶交互體驗(yàn)，例如當(dāng)用戶將鼠標(biāo)懸停在按鈕上時(shí)改變按鈕的樣式，或者當(dāng)輸入框獲得焦點(diǎn)時(shí)改變其邊框顏色。- 結(jié)構(gòu)偽類（如
:first-child、:last-child、:nth-child、:nth-of-type(n)、:only-child?、:only-of-type?等）則用于選擇具有特定結(jié)構(gòu)關(guān)系的元素，與anchor偽類不同，它們不依賴于元素的狀態(tài)，而是基于元素在文檔樹中的位置。?否定偽類
:not(selector)?：選擇不匹配指定選擇器的元素。例如，:not(.class)選擇沒有.class類的元素。UI元素狀態(tài)偽類
:checked?：選擇被選中的表單元素（例如，復(fù)選框或單選按鈕）。UI元素狀態(tài)偽類
:disabled?：選擇被禁用的表單元素。
:empty?：選擇沒有任何子元素（包括文本節(jié)點(diǎn)）的元素。
:target?：選擇當(dāng)前活動(dòng)的錨點(diǎn)目標(biāo)元素。常用于制作頁面內(nèi)跳轉(zhuǎn)。
:valid? 和 ?:invalid?：分別用于選擇通過驗(yàn)證和未通過驗(yàn)證的表單元素（如<input>元素）。
5、偽元素Pseudo-elements
- 概念與用途：
- 用來在元素的內(nèi)容前面或后面插入額外的內(nèi)容的選擇器。
- 它們以雙冒號(::)開頭（盡管在CSS2中偽元素也可以使用單冒號，但為了區(qū)分偽類和偽元素，CSS3規(guī)范推薦使用雙冒號），用于向元素的特定部分應(yīng)用樣式。
- 偽元素的作用是在元素的內(nèi)容前面或后面插入文檔樹之外的內(nèi)容，并對其進(jìn)行樣式修飾，雖然用戶可以看到這些偽元素生成的內(nèi)容，但它們實(shí)際上并不存在于DOM樹中。
- 常見的偽元素包括
::before、::after、::first-letter、::first-line等- 使用方式?：在元素選擇器后添加雙冒號和偽元素名稱，如
p::before用于在段落內(nèi)容前插入額外內(nèi)容。
5.1 before after偽元素
:before和:after是CSS中的偽元素（在CSS3中更推薦使用雙冒號形式::before和::after來表示偽元素，以與偽類區(qū)分開）- 它們允許你在一個(gè)元素的內(nèi)容之前或之后插入內(nèi)容。這些插入的內(nèi)容不會出現(xiàn)在DOM中，而是通過CSS生成的，通常用于添加裝飾性內(nèi)容，如圖標(biāo)、引號或其他視覺效果。
（1）基本用法
:before：在選定元素的內(nèi)容之前插入內(nèi)容。:after：在選定元素的內(nèi)容之后插入內(nèi)容。- 這兩個(gè)偽元素必須與
content屬性一起使用，以定義要插入的內(nèi)容，否則它們不會生效。content屬性可以包含字符串、圖像或其他可用CSS生成的內(nèi)容。- 不改變DOM結(jié)構(gòu)?：雖然
:before和:after可以在視覺上添加內(nèi)容，但這些內(nèi)容不會出現(xiàn)在DOM中，因此不會改變文檔的實(shí)際內(nèi)容。- 可以像對待普通元素一樣對
:before和:after偽元素應(yīng)用樣式和行為，包括設(shè)置寬度、高度、背景、邊框等。- 兼容性?：雖然
:before和:after在大多數(shù)現(xiàn)代瀏覽器中都得到了很好的支持，但使用雙冒號形式::before和::after可以提高代碼的清晰度和兼容性，因?yàn)殡p冒號形式是CSS3的推薦寫法。
（2）示例
p::before {content: "《";color: blue;
}p::after {content: "》";color: blue;
}
// 上面的CSS代碼會在每個(gè)<p>元素的內(nèi)容之前插入一個(gè)藍(lán)色的“《”，在其內(nèi)容之后插入一個(gè)藍(lán)色的“》”（3）應(yīng)用場景
- 添加裝飾性內(nèi)容?：如圖標(biāo)、引號、分隔符等。
- ?清除浮動(dòng)?：通過
:after偽元素和clear屬性來清除浮動(dòng)元素對父元素高度的影響。- ?創(chuàng)建自定義列表樣式?：在列表項(xiàng)前或后插入自定義樣式。
（4）注意事項(xiàng)
雖然
:before和:after偽元素非常強(qiáng)大且靈活，但它們應(yīng)該被用于添加裝飾性內(nèi)容，而不是有實(shí)際意義的內(nèi)容，因?yàn)橛脩魺o法復(fù)制或與之交互這些通過CSS生成的內(nèi)容。
（三）css優(yōu)先級和繼承
1、優(yōu)先級Specificity
- CSS樣式在瀏覽器中被解析的先后順序，決定當(dāng)多個(gè)樣式規(guī)則應(yīng)用于同一個(gè)HTML元素時(shí)，哪個(gè)樣式規(guī)則最終會被應(yīng)用的機(jī)制。
- 優(yōu)先級由選擇器的類型決定，并且可以通過特定的計(jì)算方法來量化。
1.1 計(jì)分規(guī)則
CSS優(yōu)先級由四個(gè)部分組成，按照優(yōu)先級從高到低排列如下：
?內(nèi)聯(lián)樣式（Inline Styles）?：
- 優(yōu)先級最高，直接寫在HTML元素的
style屬性中。- 計(jì)算分?jǐn)?shù)：1000分。
?ID選擇器（ID Selectors）?：
- 優(yōu)先級次之，使用
#符號標(biāo)識。- 計(jì)算分?jǐn)?shù)：100分。
?類選擇器、偽類選擇器、屬性選擇器（Class Selectors, Pseudo-Class Selectors, Attribute Selectors）?：
- 優(yōu)先級再次之，分別使用
.、:和[]標(biāo)識。- 計(jì)算分?jǐn)?shù)：10分。
?元素選擇器、偽元素選擇器（Element Selectors, Pseudo-Element Selectors）?：
- 優(yōu)先級最低，使用HTML元素名稱標(biāo)識。
- 計(jì)算分?jǐn)?shù)：1分。
1.2 優(yōu)先級算法
- 每個(gè)CSS選擇器都有一個(gè)特定的優(yōu)先級分?jǐn)?shù)，這個(gè)分?jǐn)?shù)由選擇器的類型決定，參看1.1計(jì)分規(guī)則；
- 當(dāng)存在多個(gè)選擇器組合時(shí)，分?jǐn)?shù)累加；
- 總分越高，優(yōu)先級越高；
- 特殊權(quán)重：!important，使一個(gè)樣式的優(yōu)先級高于其他任何非內(nèi)聯(lián)樣式的優(yōu)先級，但低于內(nèi)聯(lián)樣式的優(yōu)先級。
- 如果!important聲明沖突，則比較優(yōu)先權(quán)。
- 優(yōu)先級相同，按照代碼順序，后定義的樣式覆蓋前面的。
- 由繼承而得到的樣式?jīng)]有specificity的計(jì)算，它低于一切其它規(guī)則，比如全局選擇符*定義的規(guī)則。
- 使用
!important雖然可以強(qiáng)制某一條樣式規(guī)則生效，但應(yīng)盡量避免濫用，因?yàn)樗鼤茐腃SS的層疊特性，導(dǎo)致樣式難以維護(hù)。
1.3 應(yīng)用技巧
- 合理組合選擇器?：當(dāng)需要覆蓋某個(gè)樣式時(shí)，可以通過組合多個(gè)選擇器來提高優(yōu)先級。
- ?避免過度復(fù)雜的選擇器?：雖然可以通過組合選擇器來達(dá)到較高的優(yōu)先級，但也會使得選擇器變得過于復(fù)雜，不利于維護(hù)。
- ?使用源順序作為最后的手段?：當(dāng)兩個(gè)選擇器具有相同的優(yōu)先級時(shí)，源順序（即樣式表的出現(xiàn)順序）決定了哪一個(gè)規(guī)則將被應(yīng)用，后面的會覆蓋前面的，因?yàn)镃SS的層疊順序決定了樣式的應(yīng)用方式? 。
1.4 示例
<head lang="en"><style>#p{color: rebeccapurple;}.p{color: #2459a2;}p{color: yellow;}</style>
</head>
<body><p id="p" class="p" style="color: deeppink">hello yuan</p> <!--最終顯示顏色：deeppink-->
</body>1.5 注意事項(xiàng)
- 在實(shí)際開發(fā)中，合理利用優(yōu)先級規(guī)則可以幫助我們更好地組織和管理樣式表。
- 使用瀏覽器的開發(fā)者工具來檢查元素的實(shí)際樣式，可以幫助診斷樣式未按預(yù)期顯示的原因。
2、css繼承
- 繼承是CSS的一個(gè)主要特征，它是依賴于祖先-后代的關(guān)系的。
- 繼承是一種機(jī)制，它允許樣式不僅可以應(yīng)用于某個(gè)特定的元素，還可以應(yīng)用于它的后代。
- 例如一個(gè)BODY定義了的顏色值也會應(yīng)用到段落的文本中。
- 簡單來說，父標(biāo)簽的樣式會被內(nèi)嵌的子孫標(biāo)簽所繼承，除非子元素顯式地設(shè)置了不同的值。
- 即使父元素的權(quán)重很高，子元素通過繼承得到的權(quán)重也是0，任何顯示申明的規(guī)則都可以覆蓋其繼承樣式。這是因?yàn)槔^承的權(quán)重在CSS的優(yōu)先級計(jì)算中是不被考慮的?。
- 實(shí)際開發(fā)中，可以利用CSS的繼承特性來簡化樣式表的編寫，避免在多個(gè)子元素上重復(fù)設(shè)置相同的樣式屬性。
- 同時(shí)，也需要注意非繼承屬性的使用，確保在需要時(shí)顯式地為子元素設(shè)置這些屬性?。
2.1 常見繼承屬性
字體（font）系列屬性、文本（text）系列屬性、顏色（color）屬性、可見性（visibility）屬性、光標(biāo)（cursor）屬性等。這些屬性在父元素上設(shè)置后，子元素通常會繼承相同的值?
2.2 常見非繼承屬性
一些屬性是不會被繼承的，常見的非繼承屬性包括布局相關(guān)屬性，如寬度（width）、高度（height）、邊框（border）、外邊距（margin）、內(nèi)邊距（padding）、背景（background）和顯示類型（display）等。這些屬性在父元素上設(shè)置后，子元素不會繼承相同的值，除非子元素顯式地設(shè)置了這些屬性?
（四）CSS的單位
在CSS中，單位用于指定元素的大小、間距、字體大小等屬性。這些單位可以分為絕對單位、相對單位和自動(dòng)（auto）三種類型。
1、絕對單位
絕對單位表示一個(gè)固定的值，在不同設(shè)備和環(huán)境下保持固定，不會因屏幕大小或分辨率以及瀏覽器設(shè)置而改變。常見的絕對單位包括：
?px（像素）?：
- 最常用的絕對單位，基于屏幕的分辨率。一個(gè)像素通常對應(yīng)于屏幕上的一個(gè)點(diǎn)。
- 由于不同設(shè)備和屏幕的像素密度不同，相同的像素值在不同設(shè)備上可能會呈現(xiàn)不同的物理尺寸。
?in（英寸）?：
- 基于實(shí)際物理長度，1英寸等于2.54厘米。
?cm（厘米）?：
- 基于實(shí)際物理長度。
?mm（毫米）?：
- 基于實(shí)際物理長度。
?pt（點(diǎn)）?：
- 通常用于打印樣式，1點(diǎn)等于1/72英寸。
2、相對單位
相對單位是基于其他元素的大小或視口（viewport）的大小來定義的，因此它們會根據(jù)父元素或視口的大小而改變，使得布局更加靈活和響應(yīng)式，因?yàn)樗鼈兡軌蚋鶕?jù)屏幕尺寸或用戶設(shè)置自動(dòng)調(diào)整元素的大小。常見的相對單位包括：
?%（百分比）?：
- 相對于父元素的大小。例如，如果父元素的寬度是200px，而子元素的寬度設(shè)置為50%，那么子元素的寬度就是100px。
?em?：
- 相對于當(dāng)前元素的字體大小。例如，如果元素的字體大小為16px，那么1em就等于16px。
?rem?：
- 相對于根元素（<html>）的字體大小（很多瀏覽器的默認(rèn)值是16px）的倍數(shù)。
- 使用場景：
- 響應(yīng)式設(shè)計(jì)：通過簡單地改變根元素的字體大小來調(diào)整整個(gè)頁面的布局，而不需要逐個(gè)修改每個(gè)元素的 padding、margin 或其他長度屬性，這使得布局更加靈活和響應(yīng)式
?一致性?：使用 rem 可以確保在整個(gè)頁面中，不同元素之間的間距保持一致性，特別是當(dāng)你想要在不同的屏幕尺寸或設(shè)備上保持一致的視覺效果時(shí)。
可訪問性?：當(dāng)用戶通過瀏覽器設(shè)置改變字體大小時(shí)，使用 rem 單位的布局會自動(dòng)調(diào)整以適應(yīng)新的字體大小，滿足可訪問性需求。
/* 設(shè)置所有段落元素的內(nèi)邊距為 1rem */ p {padding: 1rem; }/* 設(shè)置特定類的內(nèi)邊距 */ .my-class {padding: 1rem; } /*在上述示例中，無論是段落元素還是具有特定類的元素，它們的內(nèi)邊距都將被設(shè)置為 1rem。這意味著，如果根元素的字體大小是 16px，那么這些元素的內(nèi)邊距將是 16px。如果根元素的字體大小改變，那么這些元素的內(nèi)邊距也會相應(yīng)地改變 */?vw和vh（視口寬度和高度）?：
- 相對于視口（視口是用戶網(wǎng)頁的可視區(qū)域，它隨著窗口的縮放而改變）寬度（Viewport Width）和高度（Viewport Height）的1%。
- 例如，1vw等于視口寬度的1%，1vh等于視口高度的1%，100vw等于當(dāng)前視口的完整寬度，100vh 等于當(dāng)前視口的完整高度。
- 使用場景：
全屏布局?：當(dāng)你想要?jiǎng)?chuàng)建一個(gè)占據(jù)整個(gè)瀏覽器窗口高度的元素時(shí)，可以使用 height: 100vh;。這對于創(chuàng)建全屏背景、全屏圖像或全屏視頻等效果特別有用。
響應(yīng)式設(shè)計(jì)?：雖然 vh 單位本身不是響應(yīng)式的（因?yàn)樗谝暱诖笮?，而不是基于元素或父容器的大?。?，但你可以結(jié)合媒體查詢來使用它，以在不同的屏幕尺寸下調(diào)整元素的高度。
創(chuàng)建垂直滾動(dòng)效果?：如果你有一個(gè)內(nèi)容區(qū)，你希望它在垂直方向上滾動(dòng)，并且這個(gè)區(qū)域的高度應(yīng)該與視口高度相匹配，那么你可以使用 height: 100vh; 來設(shè)置這個(gè)區(qū)域的高度。
- 注意事項(xiàng)：
- 視口變化?：當(dāng)瀏覽器窗口的大小改變時(shí)，使用 vh 單位設(shè)置的高度也會相應(yīng)地改變。這意味著，如果你的布局依賴于特定的視口高度，你需要確保在視口大小變化時(shí)，布局仍然能夠保持可用和美觀。
- 兼容性?：雖然現(xiàn)代瀏覽器都支持 vw和vh 單位，但在一些較舊的瀏覽器或某些特定的瀏覽器環(huán)境中（如某些移動(dòng)設(shè)備的瀏覽器），可能不支持或支持不完全。因此，在使用 vw或vh 單位時(shí)，最好進(jìn)行跨瀏覽器測試。
- 內(nèi)邊距、邊框和外邊距?：記得 height 屬性只設(shè)置內(nèi)容區(qū)的高度。如果你想要包括內(nèi)邊距、邊框或外邊距在內(nèi)的總高度與視口高度相匹配，你可能需要使用 box-sizing 屬性來調(diào)整元素的盒模型。
- 示例：
示例 /* 設(shè)置全屏背景 */ .full-screen-background {height: 100vh;background-color: #333; /* 示例背景顏色 */ }/* 創(chuàng)建垂直滾動(dòng)的內(nèi)容區(qū) */ .content-area {height: 100vh;overflow-y: auto; /* 允許垂直滾動(dòng) */ }?vmin? 和 ?vmax?：
- 分別基于視口的最小和最大邊。1vmin等于視口最小邊的1%，1vmax等于視口最大邊的1%。
3、自動(dòng)auto
auto不是一個(gè)具體的單位，而是一個(gè)特殊的關(guān)鍵字，用于讓瀏覽器自動(dòng)計(jì)算元素的大小或位置，例如：
- 使用
width: auto;可以讓瀏覽器根據(jù)內(nèi)容的大小自動(dòng)調(diào)整元素的寬度；margin: auto;可以用于水平居中對齊塊級元素。
4、適用場景
- 在實(shí)際開發(fā)中，選擇合適的單位取決于具體的需求和上下文。
- 絕對單位適用于需要精確控制元素大小的情況；
- 相對單位則更適合創(chuàng)建響應(yīng)式布局；
- 自動(dòng)（auto）則提供了一種讓瀏覽器自動(dòng)處理布局細(xì)節(jié)的方法，從而簡化了開發(fā)過程。
（五）CSS的常用屬性
1、顏色屬性color
值的表示方法：
- 顏色的英文單詞，如：<div style="color:blueviolet">ppppp</div>
- 顏色的十六進(jìn)制代碼，如：<div style="color:#ffee33">ppppp</div>
- 用紅、綠、藍(lán)三種顏色的十進(jìn)制調(diào)合表示，rgb(0~255，0~255， 0~255)，如：<div style="color:rgb(255,0,0)">ppppp</div>
- 用紅、綠、藍(lán)三種顏色的十進(jìn)制調(diào)合表示+透明度，rgba(0~255，0~255， 0~255，0~1)，如：<div style="color:rgba(255,0,0,0.5)">ppppp</div>
各種表示方法的顏色表，可以參照：https://blog.csdn.net/2301_78888169/article/details/143754235
2、字體屬性font
- 字體大小：font-size，可用像素px/百分比%/較大larger或較小smaller表示: 20px/50%/larger(smaller)
- 字體類型：font-family:'Lucida Bright'
- 字體粗細(xì)：font-weight，用數(shù)字100到100以及l(fā)ighter/bold/border表示
- 斜體：font-style: inherit/italic/normal/oblique
3、背景屬性background
- 背景顏色：background-color: cornflowerblue（值參考8.1顏色屬性）
- 背景圖片：background-image: url('圖片路徑');（圖片尺寸不會變化，如果小于背景區(qū)域，則空白部分會復(fù)制圖片平鋪滿）
- 背景圖片是否平鋪：background-repeat: no-repeat;(repeat:平鋪滿，repeat-x橫向平鋪，repeat-y縱向平鋪，no-repeat不平鋪)
- 背景位置：background-position: right top（或20px 20px）;(橫向位置：left center right)(縱向位置：top center bottom)（與左部橫向距離：20px）（與頂部縱向距離?