當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/4 编程问答 32 豆豆

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

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

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

📖序言

對于前端來說， css 是入門時和 HTML 一起學習的一門語言，它規定了很多樣式和規范。但對于很多小伙伴來說，有時候可能只是簡單的使用，但卻不知道原來 css 還能畫動畫，又或者原來 css 還有層疊上下文等等概念。

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

一起來學習吧~🧐

📃一、css是啥

1. CSS是什么

CSS ，層疊樣式表（ cascading syle sheets ），是一種用來為結構化文檔（基本就是 html ）添加樣式的語言。

舉個例子：

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

p {color: red; }

2. 誕生背景

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

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

這樣看起來似乎也太冗余了。因此呢，現在有了 css 樣式，來使得樣式和文章結構順利地達到分離的效果。

我們來看下上面這段代碼用 html 和 css 如何進行樣式和結構分離。代碼如下：

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

大家可以看到，有了 css ，這樣的文章結構是不是就清晰了很多呢。

3. 基礎規則

（1）一些基礎規則

現在，讓我們用一段代碼來仔細地分析下 css 的一些規則。大家先看下圖：

在上圖中，整個結構稱為規則集（通常簡稱為“規則”），其各部分釋義如下：

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

（2）其他重要的語法

了解了以上規則集之后，同時我們還需要注意其他重要的語法。具體如下：

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

（3）選擇器

現在，我們來對 css 的選擇器做一個詳細的介紹。

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

選擇器名稱選擇的內容示例

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

（4）層疊與繼承

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

1）層疊

瀏覽器由選擇器優先級來決定規則，一般來說，一個選擇器越具體，那么它的優先級就越高。比如：

一個元素選擇器不是很具體 —— 會選擇頁面上該類型的所有元素。
一個類選擇器稍微具體點 —— 它會選擇該頁面中有特定 class 屬性值的元素，所以它的優先級就要高一點。

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

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

我們來看下顯示效果：

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

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

2）繼承

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

舉個例子：

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

來看一段代碼：

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

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

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

📜二、css怎么學

在進一步講解 css 有哪些規則之前，先給大家分享幾個學習資源。 css 的內容非常多，也比較適合自學，因此這里分享幾個可以在課后不斷耕耘的 css 知識網站。

1. 在線網站

（1）codecademy.com

codecademy.com 是一個老牌的在線編程教育網站，全程交互式自助式學習體驗，非常適合 css 邊學邊練的的場景。

（2）udacity.com

udacity.com 也是一個老牌的在線編程教育網站。雖然是外文網站，但進入課程內中文是拉滿的。有以下兩點推薦理由：①免費；②視頻式教學+課后實驗互動的形式，給喜歡看著老師講解的小伙伴們推薦。

（3）w3school.com && runoob.com

一個中文一個英文。免費，交互式，內容比較全面，不錯的實操演練場。

（4）freecodecamp.org

Github 上 star 最多的項目。由社區貢獻而成的全面的程序員自學課程。

（5）挑一個

有小伙伴說，看了這么多，不知道要挑哪一個來學呢？

推薦順序的話就是從前到后推薦。就是專業在線課程團隊出品 > 自助式學習 ≈ 社區型自助式。

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

2. 持續學習

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

下面我們一起來看一下是哪幾個網站吧~

（1）MDN文檔

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

（2）CSS-TRICKS

網站地址為 https://css-tricks.com/almanac/ 。這是另外一個 css 文檔庫，它擁有非常活躍的 css 社區，里面有各種奇技淫巧，把它作為 mdn 的補充也是相當合適的。

（3）w3c CSS標準

網站地址為 w3.org/Style/CSS。前面的網站和文檔基本上都只在告訴你一些css的用法。比如 color:red; ，就是文本變為紅色。但其實，它遠不止于用來實現文本的顏色，那你想知道它還能干嘛么？

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

📄三、CSS常用規則

1. 布局相關

（1）盒模型

1）css的盒模型

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

我們先來看一張圖：

2）盒模型內容詳述

現在，我們來對盒模型中的內容進行一個詳細的了解。具體如下👇

在 css 中，組成一個塊級盒子需要以下內容：

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

3）盒模型的分類

盒模型中的“盒子” ，又包括塊級盒子(block box)和內聯盒子(inline box)。這兩種盒子會在頁面流(page flow)和元素之間的關系方面表現出不同的行為。

我們現在就這兩個盒子的一些行為來進行闡述。具體如下：

Ⅰ. 第一種行為👇

如果一個盒子對外顯示為 inline ，那么它的行為如下：

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

Ⅱ. 第二種行為👇

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

附上代碼：

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

附上顯示效果：

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

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

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

大家可以看到，對于 content-box 的盒子來說，它整個盒子包含的內容是 content + padding + border 。

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

附上代碼：

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

附上顯示效果：

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

但是細心的效果可能已經發現了一個問題，如果我們每次都要去控制它具體的類選擇器來實現寬高，那這樣寫起來得多累人呀對吧。

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

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

Ⅲ. 第三種行為👇

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

附上代碼：

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

附上效果圖：

到這里，關于盒模型的內容講解就告一段落啦！還有更多的使用技巧和延伸屬性，可以進一步前往 mdn 文檔學習。

（2）正常文檔流

1）舉例說明

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

我們先來看一段代碼：

現在我們來看下效果：

在上面的代碼中， <p> 標簽是塊級元素，而 <span> 標簽是內聯元素。下面，我們就這兩個元素來進行解析。

2）塊級元素和內聯元素

塊級元素👇

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

內聯元素👇

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

（3）彈性布局

1）彈性布局是什么

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

2）一些概念

第一個概念👇

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

來看一段演示：

.container {display: flex; }

具體顯示效果如下：

第二個概念👇

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

來看一個例子：

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

具體顯示效果如下：

第三個概念👇

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

來看一個例子：

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

具體顯示效果如下：

第四個概念👇

同樣地，當父容器高度溢出時， align-items 幫你確定子元素如何垂直對齊。

來看一個例子：

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

或者說，我們也可以給文字來點陰影：

來看下具體效果：

（5）交互相關

大家都知道，平時我們在瀏覽網頁時，有時候在點擊內容時，會有一只小手顯示，而這些就是 css 的交互。通常情況下，我們用 cursor:pointer; 來進行設置。來看一些常見的交互樣式：

對于交互相關的更多內容，大家可以到mdn中交互相關的文檔進一步體驗。

（6）動畫

在 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調試

（1）審查css

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

（2）理解盒模型

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

2. css擴展

（1）css預處理器

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

less
sass
stylus

（2）less

這里我們以 less 為例，看看能夠為 css 擴充哪些功能。

1）變量，編譯后會填充到對應的位置。比如：

2）mixin，類似于函數。比如：

3. css革新

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

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

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

📑五、結束語

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

最后，我們簡略地了解了 css 是如何調試的，以及當今都有什么樣的工具可以幫助到我們更好的寫 css ，又如何用更好的理念去用 css 。

到這里，關于 css 的奧秘探索就結束啦！希望文章對大家有幫助~

🐣彩蛋 One More Thing

（：往期推薦

👉值得關注的HTML基礎知識

👉你可能對position和z-index有一些誤解

👉誰動了我的選擇器？深入理解CSS選擇器優先級

（：番外篇

關注公眾號星期一研究室，第一時間關注優質文章，更多精選專欄待你解鎖~
如果這篇文章對你有用，記得留個腳印jio再走哦~
以上就是本文的全部內容！我們下期見！👋👋👋

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。