【前端】CSS基礎(學習筆記)

一、簡介

1、HTML局限性

HTML只關注內容的語義,但是丑!

2、CSS概要

CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡稱,有時我們也會稱之為 CSS 樣式表或級聯樣式表。

CSS 是也是一種標記語言

CSS 主要用于設置 HTML 頁面中的文本內容(字體、大小、對齊方式等)、圖片的外形(寬高、邊框樣式、邊距等)以及版面的布局和外觀顯示樣式。

由 HTML 專注去做結構呈現,樣式交給 CSS,即 結構 ( HTML ) 與樣式( CSS ) 相分離

3、CSS語法規范

CSS 規則由兩個主要的部分構成:選擇器以及一條或多條聲明。

h1 {color: red;font-size: 25px;
}
  1. 選擇器是用于指定 CSS 樣式的 HTML 標簽,花括號內是對該對象設置的具體樣式
  2. 屬性和屬性值以“鍵值對”的形式出現
  3. 屬性是對指定的對象設置的樣式屬性,例如字體大小、文本顏色等
  4. 屬性和屬性值之間用英文“:”分開
  5. 多個“鍵值對”之間用英文“;”進行區分

所有的樣式,都包含在 <style> 標簽內,表示是樣式表。<style> 一般寫到 </head> 上方。

<head><style>h4 {color: blue;font-size: 100px;}</style>
</head>

4、CSS代碼風格

樣式格式書寫:展開格式

樣式大小寫風格:樣式選擇器,屬性名,屬性值關鍵字全部使用小寫字母

樣式空格風格:屬性值前面,冒號后面,保留一個空格、選擇器(標簽)和大括號中間保留空格

二、基礎選擇器

1、選擇器作用

區分并選擇標簽

2、選擇器分類

選擇器分為基礎選擇器和復合選擇器兩個大類

基礎選擇器是由單個選擇器組成的

3、標簽選擇器

標簽選擇器是用 HTML 標簽名稱作為選擇器,按標簽名稱分類

h1 {color: red;
}

4、類選擇器

類選擇器在 HTML 中以 class 屬性表示,在 CSS 中,類選擇器以一個點“.”號顯示。一個標簽可以有多個名字,空格隔開。

<div class=‘red’> 變紅色 </div>
.red {color: red;
}

樣式點定義,結構類調用。一個或多個,開發最常用

5、id 選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。HTML 元素以 id 屬性來設置 id 選擇器,CSS 中 id 選擇器以“#" 來定義。

<div id=‘red’> 變紅色 </div>
#red {color: red;
}

id 屬性只能在每個 HTML 文檔中出現一次。

樣式#定義,結構id調用,只能調用一次,別人切勿使用

6、通配符選擇器

通配符選擇器使用“*”定義,它表示選取頁面中所有元素(標簽)。

* {margin: 0;padding: 0;
}

三、字體屬性

1、字體系列

CSS 使用 font-family 屬性定義文本的字體系列

div {font-family: Arial,"Microsoft Yahei", "微軟雅黑";
}

各種字體之間必須使用英文狀態下的逗號隔開

一般情況下,如果有空格隔開的多個單詞組成的字體,加引號。

盡量使用系統默認自帶字體,保證在任何用戶的瀏覽器中都能正確顯示

2、字體大小

CSS 使用 font-size 屬性定義字體大小。

px(像素)大小是我們網頁的最常用的單位

谷歌瀏覽器默認的文字大小為16px。不同瀏覽器可能默認顯示的字號大小不一致,我們盡量給一個明確值大小,不要默認大小(可以給 body 指定整個頁面文字的大小)

3、字體粗細

CSS 使用 font-weight 屬性設置文本字體的粗細。

屬性值描述
normal默認值
bold粗體
100~900normal:400;bold:700

4、文字樣式

CSS 使用 font-style 屬性設置文本的風格

屬性值描述
normal默認值
italic斜體

很少使用斜體,反而要給em,i改為不傾斜

5、字體復合屬性

字體屬性可以把以上文字樣式綜合來寫, 這樣可以更節約代碼

body { font: [font-style] [font-weight] font-size[/line-height] font-family;
}

使用 font 屬性時,必須按上面語法格式中的順序書寫,不能更換順序,并且各個屬性間以空格隔開

不需要設置的屬性可以省略(取默認值),但必須保留 font-size 和 font-family 屬性,否則 font 屬性將不起作用。

四、文本屬性

1、文本顏色

color 屬性用于定義文本的顏色。

表示方式屬性值
預定義的顏色red、green、blue、pink
十六進制#FF0000
RGB代碼rgb(255,0,0) 或者 rgb(100%,100%,100%)

開發中最常用的是十六進制

2、對齊文本

text-align 屬性用于設置元素內文本內容的水平對齊方式。

屬性值解釋
left左對齊(默認)
right右對齊
center居中對齊

3、裝飾文本

text-decoration 屬性規定添加到文本的修飾。可以給文本添加下劃線、刪除線、上劃線等。

屬性值描述
none無(默認)
underline下劃線
overline上劃線(?)
line-through刪除線

4、文本縮進

text-indent 屬性用來指定文本的第一行的縮進,通常是將段落的首行縮進。

em 是一個相對單位,就是當前元素(font-size)1 個文字的大小,如果當前元素沒有設置大小,則會按照父元素的 1 個文字大小

div { text-indent: 10px;
}p { text-indent: 2em;
}

5、行間距

line-height 屬性用于設置行間的距離(行高)。可以控制文字行與行之間的距離.

五、CSS引入方式

1、內部樣式表

內部樣式表(內嵌樣式表)是寫到html頁面內部. 是將所有的 CSS 代碼抽取出來,單獨放到一個 <style> 標簽中

<style>
h4 {color: blue;font-size: 100px;
}
</style>

<style> 標簽理論上可以放在 HTML 文檔的任何地方,但一般會放在文檔的<head>標簽中。代碼結構清晰,但是并沒有實現結構與樣式完全分離

使用內部樣式表設定 CSS,通常也被稱為嵌入式引入,這種方式是練習時常用的方式

2、行內樣式表

行內樣式表(內聯樣式表)是在元素標簽內部的 style 屬性中設定 CSS 樣式。適合于修改簡單樣式

<div style="color: red; font-size: 12px;">青春不常在,抓緊談戀愛</div>

style 其實就是標簽的屬性,在雙引號中間,寫法要符合 CSS 規范

可以控制當前的標簽設置樣式

由于書寫繁瑣,并且沒有體現出結構與樣式相分離的思想,所以不推薦大量使用,只有對當前元素添加簡單樣式的時候,可以考慮使用使用行內樣式表設定 CSS,通常也被稱為行內式引入

3、外部樣式表

  1. 新建一個后綴名為 .css 的樣式文件,把所有 CSS 代碼都放入此文件中。
  2. 在 HTML 頁面中,使用<link> 標簽引入這個文件。
<link rel="stylesheet" href="css文件路徑">

使用外部樣式表設定 CSS,通常也被稱為外鏈式或鏈接式引入,這種方式是開發中常用的方式

六、瀏覽器調試工具

Ctrl+滾輪 可以放大開發者工具代碼大小。

左邊是 HTML 元素結構,右邊是 CSS 樣式。

右邊 CSS 樣式可以改動數值(左右箭頭或者直接輸入)和查看顏色。

Ctrl + 0 復原瀏覽器大小。

如果點擊元素,發現右側沒有樣式引入,極有可能是類名或者樣式引入錯誤。

如果有樣式,但是樣式前面有黃色嘆號提示,則是樣式屬性書寫錯誤。

七、復合選擇器

1、后代選擇器

后代選擇器:選擇父元素里面子元素

寫法:把外層標簽寫在前面,內層標簽寫在后面,中間用空格分隔。當標簽發生嵌套時,內層標簽就成為外層標簽的后代。

ul li { 樣式聲明 } /* 選擇 ul 里面所有的 li標簽元素 */
  1. 元素1 和 元素2 中間用空格隔開
  2. 元素1 是父級,元素2 是子級,最終選擇的是元素2
  3. 元素2 可以是兒子,也可以是孫子等,只要是元素1 的后代即可
  4. 元素1 和 元素2 可以是任意基礎選擇器

2、子選擇器

子元素選擇器(子選擇器)只能選擇作為某元素的最近一級子元素。(親兒子元素)

div > p { 樣式聲明 } /* 選擇 div 里面所有最近一級 p 標簽元素 */
  1. 元素1 和 元素2 中間用 大于號 隔開
  2. 元素1 是父級,元素2 是子級,最終選擇的是元素2
  3. 元素2 必須是親兒子

3、并集選擇器

并集選擇器可以選擇多組標簽, 同時為他們定義相同的樣式。通常用于集體聲明。通過英文逗號(,)連接而成,任何形式的選擇器都可以作為并集選擇器的一部分。

ul,div { 樣式聲明 } /* 選擇 ul 和 div標簽元素 */
  1. 元素1 和 元素2 中間用逗號隔開
  2. 逗號可以理解為和的意思
  3. 并集選擇器通常用于集體聲明

4、鏈接偽類選擇器

偽類選擇器用于向某些選擇器添加特殊的效果

偽類選擇器書寫最大的特點是用冒號(:)表示,比如 :hover 、 :first-child 。

鏈接偽類選擇器注意事項

  1. 為了確保生效,請按照 LVHA 的循順序聲明 :link-:visited-:hover-:active。
  2. 記憶法:love hate 或者 lv 包包 hao 。
  3. 因為 a 鏈接在瀏覽器中具有默認樣式,所以我們實際工作中都需要給鏈接單獨指定樣式。
/* a 是標簽選擇器 所有的鏈接 */ 
a { color: gray;
}/* :hover 是鏈接偽類選擇器 鼠標經過 */
a:hover { color: red; /* 鼠標經過的時候,由原來的 灰色 變成了紅色 */
}

6、:focus 偽類選擇器

:focus 偽類選擇器用于選取獲得焦點的表單元素。

焦點就是光標,一般情況 <input> 類表單元素才能獲取,因此這個選擇器也主要針對于表單元素

input:focus { background-color:yellow;
}

八、元素顯示模式

1、塊元素

常見的塊元素有h1~h6、p、div、ul、ol、li等,其中 div 標簽是最典型的塊元素

特點
  1. 比較霸道,自己獨占一行。
  2. 高度,寬度、外邊距以及內邊距都可以控制。
  3. 寬度默認是容器(父級寬度)的100%。
  4. 是一個容器及盒子,里面可以放行內或者塊級元素。
注意
  1. 文字類的元素內不能使用塊級元素
  2. p 標簽主要用于存放文字,因此 p 里面不能放塊級元素,特別是不能放div
  3. h1~h6等都是文字類塊級標簽,里面也不能放其他塊級元素

2、行內元素

常見的行內元素有 a、strong、b、em、i、del、s、ins、u、span等,其中span標簽是最典型的行內元素。有的地方也將行內元素稱為內聯元素。

特點
  1. 相鄰行內元素在一行上,一行可以顯示多個。
  2. 高、寬直接設置是無效的。
  3. 默認寬度就是它本身內容的寬度。
  4. 行內元素只能容納文本或其他行內元素。
注意
  1. 鏈接里面不能再放鏈接
  2. 特殊情況鏈接 <a> 里面可以放塊級元素,但是給 <a> 轉換一下塊級模式最安全

3、行內塊元素

在行內元素中有幾個特殊的標簽: <img /><input /><td>,它們同時具有塊元素和行內元素的特點。稱它們為行內塊元素。

特點
  1. 和相鄰行內元素(行內塊)在一行上,但是他們之間會有空白縫隙。一行可以顯示多個(行內元素特點)。
  2. 默認寬度就是它本身內容的寬度(行內元素特點)。
  3. 高度,行高、外邊距以及內邊距都可以控制(塊級元素特點)

4、元素顯示模式轉換

一個模式的元素需要另外一種模式的特性

轉換為塊元素:display:block;

轉換為行內元素:display:inline;

轉換為行內塊:display: inline-block;

5、單行文字垂直居中

讓文字的行高等于盒子的高度 就可以讓文字在當前盒子內垂直居中

九、背景

1、背景顏色

一般情況下元素背景顏色默認值是 transparent(透明),我們也可以手動指定背景顏色為透明色。

p {background-color: pink;
}div {background-color: transparent;
}

2、背景圖片

background-image 屬性描述了元素的背景圖像。實際開發常見于 logo 或者一些裝飾性的小圖片或者是超大的背景圖片, 優點是非常便于控制位置

div {background-image : none;
}p {background-image : url(https://rexhao.work/medias/logo.png);
}

注意:背景圖片后面的地址,千萬不要忘記加 URL, 同時里面的路徑不要加引號。

3、背景平鋪

background-repeat: repeat | no-repeat | repeat-x | repeat-y
參數作用
repeat背景圖像在縱向和橫向上平鋪(默認)
no-repeat背景圖便不平鋪
repeat-x背景圖像在橫向上平鋪
repeat-y背景圖像在縱向平鋪

4、背景圖片位置

利用 background-position 屬性可以改變圖片在背景中的位置

background-position: x y;

參數代表的意思是:x 坐標和 y 坐標。 可以使用 方位名詞 或者 精確單位

參數說明
length百分數 | 長度值
positiontop | center | bottom | left |right 方位名詞
  1. 參數是方位名詞
    1. 如果指定的兩個值都是方位名詞,則兩個值前后順序無關,比如 left top 和 top left 效果一致
    2. 如果只指定了一個方位名詞,另一個值省略,則第二個值默認居中對齊
  2. 參數是精確單位
    1. 如果參數值是精確坐標,那么第一個肯定是 x 坐標,第二個一定是 y 坐標
    2. 如果只指定一個數值,那該數值一定是 x 坐標,另一個默認垂直居中
  3. 參數是混合單位
    1. 如果指定的兩個值是精確單位和方位名詞混合使用,則第一個值是 x 坐標,第二個值是 y

5、背景圖像固定(背景附著)

background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其余部分滾動,后期可以制作視差滾動的效果

background-attachment : scroll | fixed
參數作用
scroll背景圖隨著對象滾動
fixed背景圖像固定

6、背景復合寫法

為了簡化背景屬性的代碼,我們可以將這些屬性合并簡寫在同一個屬性 background 中,節約代碼量。

background: 背景顏色 背景圖片地址 背景平鋪 背景圖像滾動 背景圖片位置;

background: transparent url(image.jpg) repeat-y fixed top;

7、背景色半透明

CSS3 為我們提供了背景顏色半透明的效果。

background: rgba(0, 0, 0, 0.3);
  1. 最后一個參數是 alpha 透明度,取值范圍在 0~1之間
  2. 習慣把 0.3 的 0 省略掉,寫為 background: rgba(0, 0, 0, .3);
  3. 背景半透明是指盒子背景半透明,盒子的內容不受影響
  4. CSS3 新增屬性, IE9+ 版本瀏覽器才支持的。但現在實際開發,我們不太關注兼容性寫法了,可以放心使用

十、CSS三大特性

1、層疊性

相同選擇器給設置相同的樣式,此時一個樣式就會覆蓋)另一個沖突的樣式。層疊性主要 解決樣式沖突的問題

相同優先級,后來居上

2、繼承性

子標簽會維承父標簽的某些樣式,如文本顏色和字號。(子承父業)

text-,font-,line-,color屬性

行高的繼承
body {font: 12px/1.5 Microsoft YaHei;
}

行高可以跟單位也可以不跟單位

如果子元素沒有設置行高:繼承父元素的行高為 1.5,此時子元素的行高是 :當前子元素的文字大小 * 1.5

優勢就是里面的子元素可以根據自己文字大小自動調整行高

3、優先級

選擇器權重
繼承、*0,0,0,0
元素選擇器0,0,0,1
類選擇器、偽類選擇器0,0,1,0
ID選擇器0,1,0,0
行內元素1,0,0,0
!important無窮大
  1. 權重是有4組數字組成,但是不會有進位。
  2. 等級判斷從左向右,如果某一位數值相同,則判斯下一位數值
  3. 繼承的權重是0,如果該元素沒有直接選中 ,不管父元素權重多高,子元素得到的權重都是0。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/209015.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/209015.shtml
英文地址,請注明出處:http://en.pswp.cn/news/209015.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

blender 粒子系統 roughness 屬性

粒子系統中的Roughness是一種用來控制粒子的隨機性和不規則性的屬性&#xff0c;它可以影響粒子的發射方向、速度、大小、旋轉等。Roughness有以下幾個子屬性&#xff1a; - **Uniform**&#xff1a;這個屬性用來控制粒子的發射方向的隨機性&#xff0c;即粒子在法線方向上的偏…

托盤四向穿梭車自動化密集庫供應|單機智能向系統智能跨越的HEGERLS托盤四向車系統

隨著物流產業的迅猛發展&#xff0c;托盤四向穿梭式自動化密集倉儲系統可認為是在穿梭車貨架系統基礎上提出的一種新倉儲概念。托盤四向穿梭式立體庫因其在流通倉儲體系中所具有的高效密集存儲功能優勢、運作成本優勢與系統化智能化管理優勢&#xff0c;已發展為倉儲物流的主流…

喜訊:加速度商城系統全系列產品品牌全新升級為Shopfa

2月1日訊&#xff1a;經過1年多的品牌文化塑造&#xff0c;深圳市加速度軟件開發有限公司經過研究決定&#xff0c;將旗下的多商戶商城系列、小程序商城系列、B2B商城系列、供應商集采系列、電子元器件商城系列、跨境獨立站商城系列、MRO工業品商城系列、外賣商城系列、智慧零售…

重寫 AppiumService 類,添加默認啟動參數,并實時顯示啟動日志

一、前置說明 在Appium的1.6.0版本中引入了AppiumService類&#xff0c;可以很方便的通過該類來管理Appium服務器的啟動和停止。經過測試&#xff0c;使用該類的實例執行關閉server時&#xff0c;并沒有釋放端口號&#xff0c;會導致第二次啟動時失敗。另外&#xff0c;使用該…

6.2 U-boot 頂層 Makefile

一、U-boot工程目錄分析 如果要分析uboot源碼&#xff0c;首先要將uboot源碼進行編譯&#xff0c;編譯需要在Ubuntu進行&#xff0c;把uboot文件放在一個目錄下。 編譯完成后的文件是這樣&#xff1a; 我們需要看的文件夾如下。 1. arch 文件夾 從上圖可以看出有很多架構&…

geolife筆記:整理處理單條軌跡

以 數據集筆記 geolife &#xff08;操作篇&#xff09;_geolife數據集-CSDN博客 軌跡為例 1 讀取數據 import pandas as pd data pd.read_csv(Geolife Trajectories 1.3/Data//000/Trajectory/20081023025304.plt,headerNone, skiprows6,names[Latitude, Longitude, Not_Im…

【GEE筆記】在線分類流程,標注樣本點、分類和精度評價

GEE在線分類流程 介紹 GEE&#xff08;Google Earth Engine&#xff09;是一個強大的地理信息處理平臺&#xff0c;可以實現在線的遙感影像分析和處理。本文將介紹如何使用GEE進行在線的分類流程&#xff0c;包括標注樣本點、分類和精度評價。本文以2020年5月至8月的哨兵2影像…

什么是散列函數

散列函數是一種公開的數學函數。散列函數運算的輸入信息也可叫作報文。散列函數運算后所得到的結果叫作散列碼或者叫作消息摘要。散列函數具有如下一些特點&#xff1a; &#xff08;1&#xff09;不同內容的報文具有不同的散列碼&#xff0c;而一旦原始報文有任何改變&#xf…

__attribute__ 詳解

GNU C的一大特色(卻不被初學者所知)就是__attribute__機制。__attribute__可以設置函數屬性(Function Attribute)、變量屬性(Variable Attribute)和類型屬性(Type Attribute)。 特征: __attribute__書寫特征是: __attribute__前后都有兩個下劃線,并切后面會緊…

文件管理和操作工具Path Finder mac功能介紹

Path Finder mac是一款Mac平臺上的文件管理和操作工具&#xff0c;提供了比Finder更豐富的功能和更直觀的用戶界面。它可以幫助用戶更高效地瀏覽、復制、移動、刪除和管理文件&#xff0c;以及進行各種高級操作。 Path Finder mac軟件功能 - 文件瀏覽&#xff1a;可以快速瀏覽文…

【數據結構 — 排序 — 插入排序】

數據結構 — 排序 — 插入排序 一.排序1.1.排序的概念及其運用1.1.1排序的概念1.1.2排序運用1.1.3 常見的排序算法 二.插入排序2.1.直接插入排序2.1.1.算法講解2.1.2.代碼實現2.1.2.1.函數定義2.1.2.2.算法接口實現2.1.2.3.測試代碼實現2.1.2.4.測試展示 2.2.希爾排序2.2.1.算法…

ASO優化:幫助實現企業和用戶的共贏

大數據時代APP拉獲新客&#xff0c;ASO優化應該這么玩&#xff01; 市場那么大&#xff0c;用戶那么廣。企業設計的APP如何在茫茫人群中精準地把自己送到用戶面前&#xff0c;并與ta產生溝通呢。隨著時代的發展&#xff0c;數據成為企業競爭的核心。APP的營銷發展離不開數據推…

gcc tips - GCC使用技巧與高級特性

目錄 1. 獲取 GCC 編譯器預定義的宏 2. 列出依賴的頭文件 3. 保存預處理結果到文件&#xff08;展開define, 展開include header&#xff09; 4. 寫回調跟蹤記錄函數運行 -finstrument-functions 5. -fdump-rtl-expand 畫函數調用關系圖 GCC&#xff0c;全稱GNU Compiler …

第一課【習題】三方庫

三方組件是開發者在系統能力的基礎上進行了一層具體功能的封裝&#xff0c;對其能力進行拓展的工具 。 可以通過ohpm uninstall 指令下載指定的三方庫 lottie使用loadAnimation方法加載動畫。 通過ohpm安裝lottie后&#xff0c;在哪個文件中會生成相關的配置信息&#xf…

C++ - 哈希

在順序結構以及平衡樹中&#xff0c;由于元素關鍵碼與其存儲位置之間沒有對應的關系&#xff0c;因此在查找一個元素時&#xff0c;必須要經過關鍵碼的多次比較&#xff1b;比如順序表中需要從表頭開始依次往后比對尋找&#xff0c;查找時間復雜度為 O(N)&#xff0c;平衡樹中需…

快速登錄界面關于如何登錄以及多賬號列表解析以及config配置文件如何讀取以及JsLogin模塊與SdoLogin模塊如何通信(4)

1、### Jslogin模塊與前端以及JsLogin模塊與Sdologin的交互 配置文件的讀取: <CompanyIdForQq value"301"/> <CompanyIdForWx value"300"/><CompanyIdForWb value"302"/><qq value"https://graph.qq.com/oauth2.0/au…

freertos統計任務運行時間和堆棧使用情況(快速應用篇)

這里寫自定義目錄標題 背景配置FreeRTOSCconfig.h統計時鐘源任務中打印 背景 本文直接講解如果快速實現freertos打印任務運行時間&#xff0c;堆棧使用情況等調試信息&#xff0c;不講解原理。 配置 FreeRTOSCconfig.h 增加以下代碼&#xff1a; #define configUSE_TRACE_…

git clone 命令

git clone 是一個用于克隆&#xff08;clone&#xff09;遠程 Git 倉庫到本地的命令。 git clone 可以將一個遠程 Git 倉庫拷貝到本地&#xff0c;讓自己能夠查看該項目&#xff0c;或者進行修改。 git clone 命令&#xff0c;你可以復制遠程倉庫的所有代碼和歷史記錄&#xf…

template

類型&#xff1a; string 詳細&#xff1a; 一個字符串模板作為 Vue 實例的標識使用。模板將會替換掛載的元素。掛載元素的內容都將被忽略&#xff0c;除非模板的內容有分發插槽。 如果值以 # 開始&#xff0c;則它將被用作選擇符&#xff0c;并使用匹配元素的 innerHTML 作為…

深入了解 Axios 攔截器

深入了解 Axios 攔截器 本文將向您介紹什么是 Axios 攔截器以及如何使用它們。通過分步指南和示例代碼&#xff0c;您將學習如何使用 Axios 攔截器來處理請求和響應&#xff0c;并添加授權和錯誤處理。 什么是 Axios 攔截器&#xff1f; Axios 攔截器允許您在請求發送和響應…