載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載

很久以前，CSS就像一陣清新的氣息，只需簡單輕松地為頁面添加樣式。

它涉及設(shè)定規(guī)則，讓瀏覽器自動處理。你可以改變邊距、字體和大小，但這只是淺嘗輒止，你懂的嗎？

真正的亮點是那個"級聯(lián)"的特性，允許樣式繼承和覆蓋其他樣式，創(chuàng)造出一些動態(tài)、酷炫的頁面。快進(jìn)到今天，CSS就像網(wǎng)頁設(shè)計的瑞士軍刀。它具備了使用彈性盒子和網(wǎng)格來實現(xiàn)動畫、轉(zhuǎn)換和適應(yīng)布局的能力，使得網(wǎng)頁變得響應(yīng)式和酷炫。

從基本樣式到復(fù)雜動畫，CSS已經(jīng)發(fā)展到了一個全新的層次。它不再只是簡單的樣式設(shè)置，而是讓你的整個網(wǎng)頁煥發(fā)生機(jī)。

讓我們深入了解CSS是如何發(fā)展至今的（或者直接滾動到最后一節(jié)，展望未來…）。

CSS選擇器——樣式的不斷演變之路

CSS選擇器就像標(biāo)簽游戲中的精確指令。它是一條規(guī)則，用于識別需要樣式化的HTML元素。無論你是指向一個<div>、.class還是#id，選擇器都是你的樣式聲明的信使，確保正確的元素被"標(biāo)記"。讓我?guī)慊氐紺SS的早期時代。那是一個網(wǎng)頁設(shè)計新鮮、原始，而且在很多方面都有限制的時代。還記得舊的HTML標(biāo)簽，比如font和center嗎？我們使用它們是因為我們必須這樣做，而不是因為我們想這樣做。然后，就像90年代漫畫書中的超級英雄一樣，CSS出現(xiàn)了，它帶來了選擇器的力量。最初的CSS選擇器和它們所應(yīng)用的HTML一樣基本：

h1 {
  color: blue;
}

那時的選擇器簡單、有效，但非常有限。這就像用蠟筆繪制西斯廷教堂一樣。

為了增加更多的靈活性，CSS2引入了新的選擇器，比如子元素選擇器(>)、相鄰兄弟選擇器(+)和屬性選擇器([attr=value])。這些選擇器可以實現(xiàn)更精確的樣式化：

/* Child Selector */
div > p {
  color: red;
}

/* Adjacent Sibling Selector */
h1 + p {
  margin-top: 20px;
}

/* Attribute Selector */
input[type="text"] {
  width: 200px;
}

這些選擇器讓我們能夠表達(dá)元素之間更復(fù)雜的關(guān)系，使我們的樣式表更高效和有組織。這是一個進(jìn)步，但我們?nèi)匀恍枰唷?/p>

然后出現(xiàn)了CSS3。它通過更強(qiáng)大的工具擴(kuò)展了CSS選擇器的能力，例如通用兄弟組合器(~)、:not()偽類以及一系列的屬性選擇器：

/* General Sibling Combinator */
h1 ~ p {
  font-size: 1.2em;
}

/* :not() Pseudo-class */
div:not(.highlighted) {
  opacity: 0.5;
}

/* Attribute Selectors */
a[href*="google"] {
  background: url(/images/google-icon.png) no-repeat;
}

我們不再只是對元素進(jìn)行樣式設(shè)置，而是與它們互動，探索它們的屬性，它們之間的關(guān)系。我們開始打造復(fù)雜的設(shè)計，能夠根據(jù)內(nèi)容的結(jié)構(gòu)和含義進(jìn)行響應(yīng)式布局。

CSS3帶來了偽類，如:nth-child、:nth-of-type、:checked，以及偽元素::before和::after。我們的蠟筆已經(jīng)變成了一個完整的藝術(shù)家調(diào)色板，而Web的畫布也因此變得更加豐富多彩。

/* :nth-child Selector */
li:nth-child(odd) {
  background: lightgray;
}

/* :checked Pseudo-class */
input[type="checkbox"]:checked {
  border-color: green;
}

/* ::before and ::after Pseudo-elements */
blockquote::before {
  content: "?";
  font-size: 3em;
}
blockquote::after {
  content: "?";
  font-size: 3em;
}

還值得一提的選擇器是偽類:is。它允許你將多個選擇器組合在一條語句中，減少代碼的重復(fù)性，提高可讀性。如果你想深入了解，請查閱Steve的文章《Simpler CSS Selectors With :is()》。

最后還有一個提到的選擇器是:where，它與:is類似。然而，關(guān)鍵的區(qū)別在于:where的特異性始終為0。

選擇器為我們提供了在代碼中表達(dá)創(chuàng)意愿景的工具。它們不斷演進(jìn)，推動著Web進(jìn)入設(shè)計的更加令人興奮的前沿。

級聯(lián)——利用特異性和繼承

級聯(lián)是CSS的一個關(guān)鍵特性，當(dāng)正確利用時，可以使你的樣式表更高效、更易于維護(hù)。它指的是將不同的樣式表結(jié)合起來，并解決適用于同一元素的不同CSS規(guī)則之間的沖突。

這里的特異性概念發(fā)揮了關(guān)鍵作用。ID選擇器的特異性高于類選擇器，類選擇器的特異性高于類型選擇器。

#header {
  color: blue; /* This will apply because ID selectors have the highest specificity */
}

.container .header {
  color: red; /* This won't apply to the element with id "header" */
}

header {
  color: green; /* This won't apply to the element with id "header" */
}

了解如何與級聯(lián)一起工作，而不是對抗它，將能夠避免許多問題。使用特異性計算器等工具可以大有裨益。

媒體查詢的靈活性

媒體查詢是CSS的一個關(guān)鍵優(yōu)勢，它提供了內(nèi)置的響應(yīng)式設(shè)計能力。媒體查詢幫助你針對不同的設(shè)備或屏幕寬度應(yīng)用不同的樣式。這種靈活性使得你能夠根據(jù)不同的設(shè)備特性和屏幕尺寸進(jìn)行定制化的樣式設(shè)置。

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

在這個例子中，當(dāng)屏幕寬度小于或等于600px時，body的背景色會變成淺藍(lán)色。這使得CSS在創(chuàng)建響應(yīng)式設(shè)計中扮演著重要的角色。

讓我們回顧一下CSS中的媒體查詢是如何保持新鮮的：

• 1994年：我們的主要人物H?kon Wium Lie提出了媒體查詢的第一個想法。這是一項重大的開端！
• 1998年：CSS2登場，為我們帶來了第一次媒體查詢的體驗。
• 2001年：CSS3亮相，通過一些新功能使媒體查詢升級。
• 2012年：媒體查詢大放異彩！它們成為W3C推薦的標(biāo)準(zhǔn)。

現(xiàn)在：媒體查詢在所有主要的瀏覽器中都得到支持，并成為響應(yīng)式網(wǎng)頁設(shè)計中的關(guān)鍵工具。

動畫和過渡的強(qiáng)大能力

通過CSS3，動畫和過渡已成為現(xiàn)代網(wǎng)頁的重要組成部分，創(chuàng)造了動態(tài)的用戶體驗。你可以在一段時間內(nèi)使CSS屬性發(fā)生變化，控制過渡的速度，并創(chuàng)建基于關(guān)鍵幀的動畫效果。

button {
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: blue;
}

在這段代碼中，當(dāng)你將鼠標(biāo)懸停在按鈕上時，它的背景色會在半秒鐘的時間內(nèi)過渡到藍(lán)色。

擁抱CSS變量的魔力（自定義屬性）

自1997年成立以來，CSS工作組就意識到了對CSS變量的需求。到了2000年代末，開發(fā)人員已經(jīng)創(chuàng)造了各種解決方案，如自定義PHP腳本和預(yù)處理器（如Less和Sass），以彌補(bǔ)這個缺陷。

意識到內(nèi)置的解決方案將簡化這個過程，該組在2012年發(fā)布了CSS變量模塊的第一個草案。在2017年，它更名為層疊變量的CSS自定義屬性，并得到了廣泛的瀏覽器支持。

過去，更新CSS值是一項手動、耗時的工作，靜態(tài)CSS的時代已經(jīng)過去了。現(xiàn)在，我們的工具包中有了CSS變量，可以在整個樣式表中存儲和重用特定的值。這些變量確保一致性，并使更新變得輕而易舉。

以下是CSS變量的一些示例：

:root {
  --brand-color: #32a852;
}

body {
  background-color: var(--brand-color);
}

/* On hovering over the body, the brand color changes */
body:hover {
  --brand-color: #a83258;
}

將鼠標(biāo)懸停在頁面上，瞧！你的網(wǎng)站樣式完全變了個樣。這就是CSS變量的威力！

歷代布局

多年來，CSS布局經(jīng)歷了許多變化。開發(fā)人員過去常常使用表格和浮動來創(chuàng)建布局，但這種方式難以維護(hù)，而且不太適應(yīng)響應(yīng)式設(shè)計。后來，媒體查詢、彈性盒子和網(wǎng)格布局的引入徹底改變了開發(fā)人員創(chuàng)建布局的方式，使其更具響應(yīng)性和易于維護(hù)。讓我們深入了解一下。

擺脫基于表格的布局，轉(zhuǎn)向CSS

進(jìn)入21世紀(jì)初，基于表格的布局時代開始逐漸消退。還記得那些時光嗎？當(dāng)我們使用table、tr和td來安排頁面上的一切，甚至連布局都是如此。啊，那些日子真是美好！

<table>
  <tr>
    <td>Header</td>
  </tr>
  <tr>
    <td>Main Content</td>
    <td>Sidebar</td>
  </tr>
  <tr>
    <td>Footer</td>
  </tr>
</table>

那是一個我們迫使HTML按照我們的意愿彎曲的時代，將其用于并非原本意圖的用途——布局。但嘿，我們讓它發(fā)揮作用了，對吧？但讓我們真實一點，那是一種痛苦。代碼難以維護(hù)，可訪問性受到了影響，響應(yīng)式設(shè)計也只是一個遙遠(yuǎn)的夢想。我們需要一種改變，而CSS就是那個改變！

浮動布局的時代以及clearfix的黑科技

啊，浮動布局的時代。親愛的讀者們，我?guī)缀蹩梢钥吹侥銈兡樕系膽雅f微笑和沮喪的表情。你們知道，在flexbox出現(xiàn)并讓我們的生活變得輕松得多之前，我們一直被困在浮動布局的世界里。

最初作為圍繞圖片排列文本的簡單方法（想象報紙的版面布局），浮動成為了創(chuàng)建整個網(wǎng)頁布局的意外工具。

.column {
  float: left;
  width: 50%;
}

就這樣，我們就有了一個雙列布局。聽起來很簡單，對吧？但問題出現(xiàn)在我們嘗試在浮動元素下方添加更多元素時。突然間，我們的頁腳就像自己闖蕩一樣，緊貼在DOM結(jié)構(gòu)中更高的內(nèi)容旁邊。哦，這個混亂！

這是由于浮動元素的一個特殊特性導(dǎo)致的。它們在正常的文檔流中被部分移除，這意味著在標(biāo)記中跟隨它們的元素會像浮動元素不存在一樣行為。

為了解決這個問題，我們不得不求助于我們現(xiàn)在親切（或不太親切）稱之為"clearfix黑科技"的方法。這個黑科技通過創(chuàng)建一個新的塊級格式化上下文，強(qiáng)制容器展開以包含浮動元素。

這是著名的clearfix黑科技，它拯救了許多布局：

.group:after {
  content: "";
  display: table;
  clear: both;
}

通過在容器中添加一個偽元素:after，并給它設(shè)置display: table;和clear: both;，我們有效地清除了浮動。突然間，我們的頁腳回到了它們應(yīng)該在的位置，一切都恢復(fù)了正常。

盡管浮動具有一些古怪和意外的行為，但掌握浮動對于每個網(wǎng)頁開發(fā)人員來說是一種成長的必經(jīng)之路。它教會了我們理解CSS的盒子模型、文檔流以及CSS可能表現(xiàn)出的奇妙和奇異的方式的重要性。這是一個具有挑戰(zhàn)性的、有時讓人抓狂的經(jīng)歷，但它是通向我們今天所熟悉和喜愛的CSS之路上的重要里程碑。

使用flexbox和grid的全新布局

兩個最重要的改變游戲規(guī)則的因素，極大地改進(jìn)了網(wǎng)頁開發(fā)，它們分別是：flexbox。這兩個家伙完全顛覆了布局設(shè)計的常規(guī)。

首先是flexbox。在CSS3中引入的flexbox對于盒子的對齊、方向、順序和大小的設(shè)置是一次徹底的革命。不再需要處理浮動和定位的困擾了，大家注意啦。flexbox使得創(chuàng)建靈活、響應(yīng)式的布局變得簡單，用更少的代碼獲得更多的控制。下面是一個簡單的代碼示例，向你展示如何使用它：

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
}

在這個例子中，我們將容器設(shè)置為display: flex;，讓其子元素知道它們處于flex上下文中。justify-content: space-between;讓我們的項目之間保持良好的間距。然后我們使用flex: 1;給項目添加了相同的寬度，填滿了整個容器的空間。簡潔而簡單。

然后是grid布局，下一個重大飛躍。Grid布局在2017年左右引入，將CSS布局提升到了一個全新的水平，同時讓我們定義了列和行。CSS grid讓我們能夠創(chuàng)建復(fù)雜的二維布局，在之前是非常困難的。以下是一個簡單示例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  grid-column: span 2;
}

在這段代碼中，.container是我們的網(wǎng)格容器。我們使用grid-template-columns: repeat(3, 1fr);定義了三個相等寬度的列，并使用grid-gap: 10px;設(shè)置它們之間的間距為10像素。然后對于我們的項目，我們使用grid-column: span 2;使項目跨越兩列。那真是強(qiáng)大的功能！

如果你研究一下grid-template-areas屬性，你就可以成為真正的CSS grid專家。

還記得居中元素時的困擾嗎？不論是垂直居中還是水平居中，組合使用各種屬性如margin、position、top、left和transform，足以讓人頭暈?zāi)垦！?/p>

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

快進(jìn)到今天，flexbox讓居中變得輕而易舉：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

在過去，創(chuàng)建復(fù)雜布局通常意味著使用浮動元素，這可能會很棘手且難以管理。以下是使用浮動元素創(chuàng)建雙列布局的簡化示例：

.container::after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 50%;
}

如今，借助CSS Grid，你可以用極少的代碼創(chuàng)建復(fù)雜的布局，而無需頭痛的困擾：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

對未來的一瞥

CSS中有幾個即將推出的功能和改進(jìn)已經(jīng)在網(wǎng)頁設(shè)計和開發(fā)社區(qū)引起了極大的關(guān)注。你可以在Chrome團(tuán)隊的最新文章《CSS和UI的新特性》中找到詳細(xì)的列表。

以下是我對其中一些功能感到興奮的原因：

容器查詢

目前尚未在Firefox和Safari中支持

容器查詢使得能夠?qū)ψ釉剡M(jìn)行樣式設(shè)置，并在布局中進(jìn)行布局控制。可以根據(jù)元素的可用空間來進(jìn)行元素的改變，如下所示：

由于容器查詢的存在，樣式是動態(tài)的。改變視口的大小會根據(jù)每個元素的可用空間觸發(fā)相應(yīng)的變化。

語法與媒體查詢有些相似，只是你只需定義在容器大小滿足條件時所需的樣式：

以下是實際應(yīng)用的樣子：

/* Create a containment context */
.post {
  container-type: inline-size; /* size & normal are valid values as well */
}

/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;
}

/* If the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

樣式查詢

目前尚未在Firefox和Safari中支持

查詢父容器的樣式值：

<li class="card-container" style="--sunny: true;">
  <div class="weather-card">
    <div class="day">Saturday</div>
    <div class="date">February <span>12</span></div>
    <div class="temps">
      <div class="high">High: <span>55</span></div>/
      <div class="low">Low: <span>47</span></div>
    </div>
    <div class="features">
      Clear skies, sun
    </div>
  </div>
</li>

<style>

.card-container {
  container-name: weather;
}

/* In case the custom propery --sunny: true; change the child */

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

</style>

:has偽類

目前尚未在Firefox中支持。

根據(jù)后代元素來設(shè)置樣式的一種方法。基本上，你可以根據(jù)子元素來應(yīng)用樣式，這意味著它可以作為一種理想的父選擇器。然而，你也可以在父元素內(nèi)部對子元素進(jìn)行樣式設(shè)置。

<article>
 <h1>Hello</h1>
 <h2>World</h2>
</article>

<style>
/* style parent according to children */
article:has(h1) {
 background: lightgray;
}

/* style child by parent content */
article:has(h1) h2 {
   color: yellow;
}

/* style sibling by adjacent element */
h1:has(+ h2) {
 color: hotpink;
}
</style> 

text-wrap: balance

目前僅在Chromium中支持

這個新值，顧名思義，將允許你平衡文本，因此你不再需要使用JS來實現(xiàn)。將其應(yīng)用于文本塊將真正讓你的設(shè)計師開心。

嵌套

目前尚未在Firefox中支持

最后，就像SASS和Less一樣，嵌套和共同定位與選擇器相關(guān)的樣式：

.parent {
  color: blue;

  .child {
    color: red;
  }
}

此外，你還可以嵌套媒體查詢（和容器查詢）：

.card {
  display: flex;
  gap: 1rem;

  @media (width >=480px) {
    display: grid;
  }
}

另外，第一個例子也可以這樣寫：

.parent {
  color: blue;

  & .child {
    color: red;
  }
}

子網(wǎng)格

在Firefox和Safari中得到支持，并在Chrome的標(biāo)志下使用

子網(wǎng)格是完善網(wǎng)格布局的一部分，可以將網(wǎng)格布局應(yīng)用于網(wǎng)格項的子元素，從而實現(xiàn)更一致和可維護(hù)的布局。通過添加grid-template-rows或grid-template-columns屬性并設(shè)置為subgrid值來使用：

<div class="grid">
  <div class="item">
    <div class="subitem"></div>
  </div>
</div>

<style>
/* some styles removed for brevity */
.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-color: #ffd8a8;
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
  background-color: rgb(40, 240, 83); /* green */
}
</style>

Scoped CSS

仍處于工作草案階段，指定特定樣式適用的范圍，從本質(zhì)上為CSS創(chuàng)建本地的命名空間：

@scope (.card) {
  /* only affects a .title that is within a .card */
  .title { 
    font-weight: bold;
  }
}

滾動驅(qū)動的動畫

仍處于實驗階段

根據(jù)滾動容器的滾動位置控制動畫的播放。再次減少了使用JavaScript創(chuàng)建視差滾動、閱讀指示器等功能的復(fù)雜性。你可以在這里看到一些很棒的演示。

級聯(lián)層（@layer）

現(xiàn)在得到了廣泛支持，在存在多個級聯(lián)層的情況下，定義了優(yōu)先級的順序。您可以根據(jù)重要性對樣式表進(jìn)行排序：

@layer base {
  a {
    font-weight: 800;
    color: red; /* ignored */
  }

  .link {
    color: blue; /* ignored */
  }
}

@layer typography {
  a {
    color: green; /* styles *all* links */
  }
}

@layer utilities {
  .pink {
    color: hotpink;  /* styles *all* .pink's */
  }
}

View transitions

（在Firefox和Safari中不受支持）

允許在單個步驟中更改DOM，同時在兩個狀態(tài)之間創(chuàng)建動畫過渡。不再需要使用單頁應(yīng)用程序（SPA）來完成此操作。

這需要一些JavaScript：

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(()=> updateTheDOMSomehow(data));
}

然后 CSS 接管：

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

結(jié)束

CSS的未來充滿了巨大的潛力，可以簡化復(fù)雜的任務(wù)，提升性能，并讓開發(fā)者創(chuàng)建沉浸式的體驗。

隨著CSS的發(fā)展，我們可能會看到新的高級特性涌現(xiàn)，模糊了CSS和JavaScript之間的界限，為目前依賴于JavaScript庫的任務(wù)提供了原生解決方案。

此外，可能會出現(xiàn)更全面的CSS框架，利用這些新功能。

保持對最新的CSS發(fā)展的了解非常重要，因為CSS在網(wǎng)頁設(shè)計和開發(fā)中的重要性持續(xù)存在。關(guān)注CSS Working Group的更新、追隨行業(yè)領(lǐng)導(dǎo)者，并探索瀏覽器預(yù)覽中的新功能，將有助于您保持更新。

擁抱前方令人興奮的可能性，不斷學(xué)習(xí)，并積極參與塑造未來的網(wǎng)絡(luò)。

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請別忘了點贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時，如果您想獲取更多前端技術(shù)的知識，歡迎關(guān)注我，您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容，敬請期待。

、浮動

本章目標(biāo)：

• 會使用display屬性排版網(wǎng)頁元素
• 會使用float屬性排版網(wǎng)頁元素
• 會使用float屬性創(chuàng)建橫向多列布局
• 會使用四種防止父級邊框塌陷的清除浮動的方法

4.1、標(biāo)準(zhǔn)文檔流

標(biāo)準(zhǔn)文檔流：指元素根據(jù)塊元素或行內(nèi)元素的特性按從上到下，從左到右的方式自然排列。這也是元素默認(rèn)的排列方式

標(biāo)準(zhǔn)文檔流組成

• 塊級元素（block） <h1>…<h6>、<p>、<div>、列表
• 內(nèi)聯(lián)元素（inline） <span>、<a>、<img/>、<strong>... 內(nèi)聯(lián)標(biāo)簽可以包含于塊級標(biāo)簽中，成為它的子元素，而反過來則不成立

4.2、display

display屬性

在這里插入圖片描述