當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

10分钟带你探索css中更为奇妙的奥秘

發(fā)布時(shí)間：2023/12/4 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 10分钟带你探索css中更为奇妙的奥秘小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

10分鐘帶你探索css中更為奇妙的奧秘

📖序言
📃一、css是啥
- 1. CSS是什么
- 2. 誕生背景
- 3. 基礎(chǔ)規(guī)則
- - （1）一些基礎(chǔ)規(guī)則
  - （2）其他重要的語(yǔ)法
  - （3）選擇器
  - （4）層疊與繼承
  - - 1）層疊
    - 2）繼承
📜二、css怎么學(xué)
- 1. 在線網(wǎng)站
- - （1）codecademy.com
  - （2）udacity.com
  - （3）w3school.com && runoob.com
  - （4）freecodecamp.org
  - （5）挑一個(gè)
- 2. 持續(xù)學(xué)習(xí)
- - （1）MDN文檔
  - （2）CSS-TRICKS
  - （3）w3c CSS標(biāo)準(zhǔn)
📄三、CSS常用規(guī)則
- 1. 布局相關(guān)
- - （1）盒模型
  - - 1）css的盒模型
    - 2）盒模型內(nèi)容詳述
    - 3）盒模型的分類
    - - Ⅰ. 第一種行為👇
      - Ⅱ. 第二種行為👇
      - Ⅲ. 第三種行為👇
  - （2）正常文檔流
  - - 1）舉例說明
    - 2）塊級(jí)元素和內(nèi)聯(lián)元素
  - （3）彈性布局
  - - 1）彈性布局是什么
    - 2）一些概念
  - （4）定位
  - - 1）static
    - 2）相對(duì)定位relative
    - 3）相對(duì)定位absolute
    - 4）z-index
    - 5）應(yīng)用
- 2. 裝飾相關(guān)
- - （1）文字
  - （2）背景
  - （3）邊框
  - （4）陰影
  - （5）交互相關(guān)
  - （6）動(dòng)畫
📰四、css精益求精
- 1. css調(diào)試
- - （1）審查css
  - （2）理解盒模型
- 2. css擴(kuò)展
- - （1）css預(yù)處理器
  - （2）less
- 3. css革新
📑五、結(jié)束語(yǔ)
🐣彩蛋 One More Thing
- （：往期推薦
- （：番外篇

📖序言

對(duì)于前端來說， css 是入門時(shí)和 HTML 一起學(xué)習(xí)的一門語(yǔ)言，它規(guī)定了很多樣式和規(guī)范。但對(duì)于很多小伙伴來說，有時(shí)候可能只是簡(jiǎn)單的使用，但卻不知道原來 css 還能畫動(dòng)畫，又或者原來 css 還有層疊上下文等等概念。

那么在下面的這篇文章中，將帶領(lǐng)大家來探索 css 中更為奇妙的奧秘~

一起來學(xué)習(xí)吧~🧐

📃一、css是啥

1. CSS是什么

CSS ，層疊樣式表（ cascading syle sheets ），是一種用來為結(jié)構(gòu)化文檔（基本就是 html ）添加樣式的語(yǔ)言。

舉個(gè)例子：

假設(shè)我們現(xiàn)在要選擇一個(gè) HTML 頁(yè)面里所有的段落元素，并將其中的文本改成紅色，那么我們可以這樣寫 CSS 。代碼如下：

p {color: red; }

2. 誕生背景

在沒有 css 以前，所有樣式都混在 html 里。假如一個(gè)標(biāo)題要用斜體字、紅色的字符、白色的底色的話，那么我們要這樣寫：

<h2><font color="red" bgcolor="white"><i>使用css</i></font> </h2>

這樣看起來似乎也太冗余了。因此呢，現(xiàn)在有了 css 樣式，來使得樣式和文章結(jié)構(gòu)順利地達(dá)到分離的效果。

我們來看下上面這段代碼用 html 和 css 如何進(jìn)行樣式和結(jié)構(gòu)分離。代碼如下：

<h2>使用css </h2> <style>h2{color: red;background: white;font-style: italic;} </style>

大家可以看到，有了 css ，這樣的文章結(jié)構(gòu)是不是就清晰了很多呢。

3. 基礎(chǔ)規(guī)則

（1）一些基礎(chǔ)規(guī)則

現(xiàn)在，讓我們用一段代碼來仔細(xì)地分析下 css 的一些規(guī)則。大家先看下圖：

在上圖中，整個(gè)結(jié)構(gòu)稱為規(guī)則集（通常簡(jiǎn)稱為“規(guī)則”），其各部分釋義如下：

選擇器： 選擇了一個(gè)或多個(gè)需要添加樣式的元素（在這個(gè)例子中就是 p 元素）；
聲明： 一個(gè)單獨(dú)的規(guī)則，如 color: red; 用來指定添加樣式元素的屬性；
屬性： 指定要改變 HTML 元素樣式；
屬性的值： 從指定屬性的眾多外觀中選擇一個(gè)值（除了 red 之外還有很多 color 的值）。

（2）其他重要的語(yǔ)法

了解了以上規(guī)則集之后，同時(shí)我們還需要注意其他重要的語(yǔ)法。具體如下：

每個(gè)規(guī)則集（除了選擇器的部分）都應(yīng)該包含在成對(duì)的大括號(hào)里 {} 。
在每個(gè)聲明里要用冒號(hào) : 將屬性與屬性值分隔開。
在每個(gè)規(guī)則集里要用分號(hào) ; 將各個(gè)聲明分隔開。
如果要同時(shí)修改多個(gè)屬性，只需要將它們用分號(hào) ; 隔開。
也可以選擇多種類型的元素并為它們添加一組相同的樣式。將不同的選擇器用逗號(hào)分開。

（3）選擇器

現(xiàn)在，我們來對(duì) css 的選擇器做一個(gè)詳細(xì)的介紹。

選擇器有許多不同的類型，它主要是用來選擇 HTML 文檔中給定的元素。下面給出一些常用的選擇器類型：

選擇器名稱選擇的內(nèi)容示例

元素選擇器（也稱作標(biāo)簽或類選擇器）	所有指定(該)類型的 HTML 元素	p，選擇 <p>
ID選擇器	具有特定 ID 的元素（單一 HTML 頁(yè)面中，每個(gè) ID 只對(duì)應(yīng)一個(gè)元素，一個(gè)元素只對(duì)應(yīng)一個(gè) ID）	#my-id，選擇 <p id="my-id"> 或者 <a id="my-id">
類選擇器	具有特定類的元素（單一頁(yè)面中，一個(gè)類可以有多個(gè)實(shí)例）	.my-class，選擇<p class="my-class">或者<a class="my-class">
屬性選擇器	擁有特定屬性的元素	img[src]，選擇 <img src="myimage.png"> 而不是 <img>
偽(Pseudo)類選擇器	特定狀態(tài)下的特定元素（比如鼠標(biāo)指針懸停）	a:hover，僅在鼠標(biāo)指針懸停在鏈接上時(shí)選擇<a>

（4）層疊與繼承

了解完選擇器之后，我們還需要了解 css 中一個(gè)很重要的概念，層疊與繼承。接下來就讓我們一起來學(xué)習(xí)這個(gè)概念。

1）層疊

瀏覽器由選擇器優(yōu)先級(jí)來決定規(guī)則，一般來說，一個(gè)選擇器越具體，那么它的優(yōu)先級(jí)就越高。比如：

一個(gè)元素選擇器不是很具體 —— 會(huì)選擇頁(yè)面上該類型的所有元素。
一個(gè)類選擇器稍微具體點(diǎn) —— 它會(huì)選擇該頁(yè)面中有特定 class 屬性值的元素，所以它的優(yōu)先級(jí)就要高一點(diǎn)。

我們來舉個(gè)例子看看效果，具體如下：

.main-heading {color: red; }h1 {color: blue; }<h1 class="main-heading"> This is my heading.</h1>

我們來看下顯示效果：

大家可以看到，這個(gè) h1 最終顯示的是紅色字體，而不是藍(lán)色字體。那有小伙伴就會(huì)有疑惑說，不是哪個(gè)在后面才會(huì)選擇哪個(gè)嗎？

答案其實(shí)只對(duì)了一半。在上面的這段代碼中， class 選擇器的優(yōu)先級(jí)要比 h1 屬性選擇器的優(yōu)先級(jí)要高，所以最終顯示的是紅色。

2）繼承

在 css 中，一些設(shè)置在父元素上的 css 屬性是可以被子元素繼承的，有些則不能。

舉個(gè)例子：

如果你設(shè)置一個(gè)元素的 color 和 font-family ，那么每個(gè)在里面的元素也都會(huì)有相同的屬性值，除非你直接在元素上設(shè)置屬性。

來看一段代碼：

p {color: blue; }<p>text in p<span>text in span</span>.</p>

在上面的這段代碼中，它將全部顯示為藍(lán)色。這是為什么呢？？

理論上 span 會(huì)顯示為黑色，但是它沒有。原因在于 color 是繼承屬性，因此 span 中的文字也將繼承到 p 的樣式，所以最終顯示的也為藍(lán)色。

📜二、css怎么學(xué)

在進(jìn)一步講解 css 有哪些規(guī)則之前，先給大家分享幾個(gè)學(xué)習(xí)資源。 css 的內(nèi)容非常多，也比較適合自學(xué)，因此這里分享幾個(gè)可以在課后不斷耕耘的 css 知識(shí)網(wǎng)站。

1. 在線網(wǎng)站

（1）codecademy.com

codecademy.com 是一個(gè)老牌的在線編程教育網(wǎng)站，全程交互式自助式學(xué)習(xí)體驗(yàn)，非常適合 css 邊學(xué)邊練的的場(chǎng)景。

（2）udacity.com

udacity.com 也是一個(gè)老牌的在線編程教育網(wǎng)站。雖然是外文網(wǎng)站，但進(jìn)入課程內(nèi)中文是拉滿的。有以下兩點(diǎn)推薦理由：①免費(fèi)；②視頻式教學(xué)+課后實(shí)驗(yàn)互動(dòng)的形式，給喜歡看著老師講解的小伙伴們推薦。

（3）w3school.com && runoob.com

一個(gè)中文一個(gè)英文。免費(fèi)，交互式，內(nèi)容比較全面，不錯(cuò)的實(shí)操演練場(chǎng)。

（4）freecodecamp.org

Github 上 star 最多的項(xiàng)目。由社區(qū)貢獻(xiàn)而成的全面的程序員自學(xué)課程。

（5）挑一個(gè)

有小伙伴說，看了這么多，不知道要挑哪一個(gè)來學(xué)呢？

推薦順序的話就是從前到后推薦。就是專業(yè)在線課程團(tuán)隊(duì)出品 > 自助式學(xué)習(xí) ≈ 社區(qū)型自助式。

如果你是零基礎(chǔ)，上面任一一個(gè)課程，一個(gè)周末左右應(yīng)該能學(xué)的差不多。有了基礎(chǔ)后，以后你再想深挖哪個(gè)場(chǎng)景下的 css 應(yīng)用規(guī)則，再去看文檔即可。什么場(chǎng)景（字體、定位、顏色等），這些內(nèi)容對(duì)應(yīng)的需要去查哪些屬性相信你心中也應(yīng)該有了自己的一個(gè)答案~

2. 持續(xù)學(xué)習(xí)

如果一直在干前端這一行的話，那么，以下這些網(wǎng)站，可能會(huì)陪你到 35歲，甚至也有可能是一輩子。（言重了hh）

下面我們一起來看一下是哪幾個(gè)網(wǎng)站吧~

（1）MDN文檔

網(wǎng)站地址為 [https://developer.mozilla.org/zh- CN/docs/Web/CSS](https://developer.mozilla.org/zh- CN/docs/Web/CSS) 。它是 css 的文檔庫(kù)，基本上會(huì)是前端程序員最常來的地方，同時(shí) html 和 js 的規(guī)則也在這里面。除此之外呢，里面還有豐富的各式各樣的教程，把它當(dāng)做是一個(gè)自由探索的網(wǎng)站也是相當(dāng)不錯(cuò)滴。

（2）CSS-TRICKS

網(wǎng)站地址為 https://css-tricks.com/almanac/ 。這是另外一個(gè) css 文檔庫(kù)，它擁有非常活躍的 css 社區(qū)，里面有各種奇技淫巧，把它作為 mdn 的補(bǔ)充也是相當(dāng)合適的。

（3）w3c CSS標(biāo)準(zhǔn)

網(wǎng)站地址為 w3.org/Style/CSS。前面的網(wǎng)站和文檔基本上都只在告訴你一些css的用法。比如 color:red; ，就是文本變?yōu)榧t色。但其實(shí)，它遠(yuǎn)不止于用來實(shí)現(xiàn)文本的顏色，那你想知道它還能干嘛么？

w3c文檔，或許就能告訴你答案。

📄三、CSS常用規(guī)則

1. 布局相關(guān)

（1）盒模型

1）css的盒模型

在介紹布局相關(guān)的屬性之前，我們要先了解一個(gè)概念：在 CSS 中，所有的元素都被一個(gè)個(gè)的 “盒子（box）” 包圍著。因此，理解這些盒子的基本原理，是我們使用 CSS 實(shí)現(xiàn)準(zhǔn)確布局、處理元素排列的關(guān)鍵。

我們先來看一張圖：

2）盒模型內(nèi)容詳述

現(xiàn)在，我們來對(duì)盒模型中的內(nèi)容進(jìn)行一個(gè)詳細(xì)的了解。具體如下👇

在 css 中，組成一個(gè)塊級(jí)盒子需要以下內(nèi)容：

Content box：這個(gè)區(qū)域主要是用來顯示內(nèi)容，它的大小可以通過 width 和 height 來進(jìn)行設(shè)置。
Padding box：這個(gè)區(qū)域包圍在內(nèi)容區(qū)域外部的空白區(qū)域，它的大小可以通過 padding 的相關(guān)屬性來進(jìn)行設(shè)置。
Border box：這個(gè)區(qū)域是邊框盒，邊框盒包裹內(nèi)容和內(nèi)邊距，它的大小通過 border 的相關(guān)屬性來進(jìn)行設(shè)置。
Margin box：這是最外面的區(qū)域，是盒子和其他元素之間的空白區(qū)域，它的大小通過 margin 的相關(guān)屬性來進(jìn)行設(shè)置。

3）盒模型的分類

盒模型中的“盒子” ，又包括塊級(jí)盒子(block box)和內(nèi)聯(lián)盒子(inline box)。這兩種盒子會(huì)在頁(yè)面流(page flow)和元素之間的關(guān)系方面表現(xiàn)出不同的行為。

我們現(xiàn)在就這兩個(gè)盒子的一些行為來進(jìn)行闡述。具體如下：

Ⅰ. 第一種行為👇

如果一個(gè)盒子對(duì)外顯示為 inline ，那么它的行為如下：

盒子不會(huì)產(chǎn)生換行。
width 和 height 屬性將不起作用。
垂直方向的內(nèi)邊距、外邊距以及邊框會(huì)被應(yīng)用但是不會(huì)把其他處于 inline 狀態(tài)的盒子推開。
水平方向的內(nèi)邊距、外邊距以及邊框會(huì)被應(yīng)用且會(huì)把其他處于 inline 狀態(tài)的盒子推開。
用做鏈接的 <a> 元素、 <span> 都是默認(rèn)處于 inline 狀態(tài)的。

Ⅱ. 第二種行為👇

下面我們用一個(gè)例子來展示下 contet-box 。具體如下：

附上代碼：

.box {width: 350px;height: 150px;margin: 25px;padding: 25px;border: 5px solid black; }

附上顯示效果：

我們來計(jì)算一下，在上面的這個(gè)例子中， box 元素真正占用的面積是多少？

模型寬度 = 350px(content) + 25px(padding) + 25px(padding) + 5px(border) + 5px(border) = 410px。

模型高度 = 150px(content) + 25px(padding) + 25px(padding) + 5px(border) + 5px(border) = 210px。

大家可以看到，對(duì)于 content-box 的盒子來說，它整個(gè)盒子包含的內(nèi)容是 content + padding + border 。

那如果我們想要修改瀏覽器這一默認(rèn)行為，也就是想要不管 padding 和 border 怎么撐開，整個(gè)盒子加起來的寬高就只能是我們定義的寬高，又該怎么處理呢？

附上代碼：

.box {width: 350px;height: 150px;margin: 25px;padding: 25px;border: 5px solid black; } .box {box-sizing: border-box; }

附上顯示效果：

大家可以看到，使用了 box-sizing: border-box 之后，它的所有寬度加起來是 350px ，高度加起來是 150px 。通過這個(gè)屬性，達(dá)到了我們想要的效果。

但是細(xì)心的效果可能已經(jīng)發(fā)現(xiàn)了一個(gè)問題，如果我們每次都要去控制它具體的類選擇器來實(shí)現(xiàn)寬高，那這樣寫起來得多累人呀對(duì)吧。

因此呢，如果你希望所有元素都使用替代模式，那么你可以直接設(shè)置 box-sizing 在 <html> 元素上，然后設(shè)置所有元素來繼承該屬性，如下代碼所示：

html {box-sizing: border-box; }*, *::before, *::after {box-sizing: inherit; }

Ⅲ. 第三種行為👇

display 有一個(gè)特殊的值，它在內(nèi)聯(lián)和塊之間提供了一個(gè)中間狀態(tài)。這在一種情況下非常有用，比如說，你不希望一個(gè)項(xiàng)切換到新的一行，但是呢，又希望它可以設(shè)定寬度和高度。那么我們可以設(shè)置 display: inline-block; ，來達(dá)到我們最后的效果。下面我們來看一個(gè)例子：

附上代碼：

span {margin: 20px;padding: 20px;width: 80px;height: 50px;border: 2px solid blue;display: inline-block; }

附上效果圖：

到這里，關(guān)于盒模型的內(nèi)容講解就告一段落啦！還有更多的使用技巧和延伸屬性，可以進(jìn)一步前往 mdn 文檔學(xué)習(xí)。

（2）正常文檔流

1）舉例說明

盒模型解釋了一個(gè)元素塊的尺寸，那么元素塊在整篇文檔中的位置是如何確定的呢？

我們先來看一段代碼：

現(xiàn)在我們來看下效果：

在上面的代碼中， <p> 標(biāo)簽是塊級(jí)元素，而 <span> 標(biāo)簽是內(nèi)聯(lián)元素。下面，我們就這兩個(gè)元素來進(jìn)行解析。

2）塊級(jí)元素和內(nèi)聯(lián)元素

塊級(jí)元素👇

默認(rèn)情況下，塊級(jí)元素按照基于其父元素的書寫順序（默認(rèn)值： horrizontal-tb ）的塊流動(dòng)方向（ block flow direction ）放置；
每個(gè)塊級(jí)元素會(huì)在上一個(gè)元素的下方另起一行，它們會(huì)被設(shè)置好的 margin 分隔開，且塊級(jí)元素是垂直組織的。

內(nèi)聯(lián)元素👇

而對(duì)于內(nèi)聯(lián)元素來說，其表現(xiàn)與塊級(jí)元素有所不同，它們不會(huì)另起一行；只要其父級(jí)塊級(jí)元素的寬度內(nèi)有足夠的空間，那么塊級(jí)元素里面的內(nèi)容將與其他內(nèi)聯(lián)元素被安排在同一行。
但是呢，如果空間不夠，那么溢出的文本或元素將被移到新的一行。

（3）彈性布局

1）彈性布局是什么

彈性盒子是一種用于按行或按列來布局元素的一維布局方法。元素可以膨脹以填充額外的空間，收縮以適應(yīng)更小的空間。如下圖所示：

2）一些概念

第一個(gè)概念👇

只需要在容器上加 display:flex 屬性，你就可以得到一個(gè)橫排的布局。就盒模型而言，此時(shí)容器類似于塊級(jí)元素( display:block ) ，但寬度默認(rèn)由子元素決定；子元素類似 inline-block 元素，可以設(shè)置寬高且不換行。且子元素原本的 display 實(shí)行基本被無視了，這是一種隱含的盒模型狀態(tài)。

來看一段演示：

.container {display: flex; }

具體顯示效果如下：

第二個(gè)概念👇

這種布局非常靈活，可以完成 90% 的布局要求。同時(shí)，可以使用 flex-direction 屬性來控制子元素的排布順序。

來看一個(gè)例子：

.container {disply: flex; }.container {flex-direction: row | row-reverse | column | column-reverse; }

具體顯示效果如下：

第三個(gè)概念👇

flex 布局類似塊級(jí)盒子，可以設(shè)置比子元素所需要更大的寬度。而 justify-content 屬性，會(huì)幫你確定此時(shí)元素如何分配空間。

來看一個(gè)例子：

.container {disply: flex; }.container {justify-content: flex-start | flex-end | center | space-between; }

具體顯示效果如下：

第四個(gè)概念👇

同樣地，當(dāng)父容器高度溢出時(shí)， align-items 幫你確定子元素如何垂直對(duì)齊。

來看一個(gè)例子：

.container {disply: flex; }.container {align-items: stretch | flex-start | flex-end | center | baseline; }

或者說，我們也可以給文字來點(diǎn)陰影：

來看下具體效果：

（5）交互相關(guān)

大家都知道，平時(shí)我們?cè)跒g覽網(wǎng)頁(yè)時(shí)，有時(shí)候在點(diǎn)擊內(nèi)容時(shí)，會(huì)有一只小手顯示，而這些就是 css 的交互。通常情況下，我們用 cursor:pointer; 來進(jìn)行設(shè)置。來看一些常見的交互樣式：

對(duì)于交互相關(guān)的更多內(nèi)容，大家可以到mdn中交互相關(guān)的文檔進(jìn)一步體驗(yàn)。

（6）動(dòng)畫

在 css 中，還可以用 transition 、 animation 和 transform 等寫出很多炫酷的效果。

來看一段代碼演示：

.tran {width: 100px;height: 100px;background: mediumpurple;transition: width 300ms ease-in;animation: spin 5s ease-in-out infinite; }@keyframes spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);} }

具體顯示效果如下：

📰四、css精益求精

1. css調(diào)試

（1）審查css

在 css 的面板里，可以直接開關(guān)、編輯、新增屬性的值。如下圖所示：

（2）理解盒模型

同時(shí)，我們來可以通過 layout view 來展示一張選定元素的盒模型示意圖。如下圖所示：

2. css擴(kuò)展

（1）css預(yù)處理器

另一種組織 CSS 的方法是利用一些對(duì)于前端開發(fā)者可用的工具，它們讓你可以稍微更程式化地編寫 CSS 。預(yù)處理工具以你的原文件為基礎(chǔ)來進(jìn)行運(yùn)行，并將它們轉(zhuǎn)化為樣式表。代表工具有：

less
sass
stylus

（2）less

這里我們以 less 為例，看看能夠?yàn)?css 擴(kuò)充哪些功能。

1）變量，編譯后會(huì)填充到對(duì)應(yīng)的位置。比如：

2）mixin，類似于函數(shù)。比如：

3. css革新

隨著 CSS 的不斷發(fā)展，到現(xiàn)在，我們編寫樣式已經(jīng)不一定需要寫 css 文件了。下面羅列出幾種常見的類型：

（1） 以 styled-components 為代表的 css-in-js 方案，通過用 JavaScript 的力量來武裝 css 。

（2） 以 tailwindcss 為代表的 utility-class 方案，改樣式只需要修改 html 文件即可，用有限的選擇幫助你定好設(shè)計(jì)規(guī)范。

📑五、結(jié)束語(yǔ)

在上面的文章中，我們從 css 的誕生背景和基礎(chǔ)定義入手，先初步認(rèn)識(shí)了 css 。緊接著，介紹了如何能夠正確地學(xué)習(xí) css ，以及 css 關(guān)鍵的盒模型、文檔流、布局、定位等關(guān)鍵概念和相關(guān)的 css 屬性，并展示了 css 裝飾文檔的可能性。

最后，我們簡(jiǎn)略地了解了 css 是如何調(diào)試的，以及當(dāng)今都有什么樣的工具可以幫助到我們更好的寫 css ，又如何用更好的理念去用 css 。

到這里，關(guān)于 css 的奧秘探索就結(jié)束啦！希望文章對(duì)大家有幫助~

🐣彩蛋 One More Thing

（：往期推薦

👉值得關(guān)注的HTML基礎(chǔ)知識(shí)

👉你可能對(duì)position和z-index有一些誤解

👉誰(shuí)動(dòng)了我的選擇器？深入理解CSS選擇器優(yōu)先級(jí)

（：番外篇

關(guān)注公眾號(hào)星期一研究室，第一時(shí)間關(guān)注優(yōu)質(zhì)文章，更多精選專欄待你解鎖~
如果這篇文章對(duì)你有用，記得留個(gè)腳印jio再走哦~
以上就是本文的全部?jī)?nèi)容！我們下期見！👋👋👋

總結(jié)

以上是生活随笔為你收集整理的10分钟带你探索css中更为奇妙的奥秘的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：手机游戏运营商十大品牌排行榜
下一篇：前端只是切图仔？来学学给开发人看的UI设