英文 | https://medium.com/@nasyxrakeeb2/10-css-pro-tips-code-this-not-that-codipher-f94558e82756
翻譯 | 楊小愛
CSS 是每個 Web 開發人項目中的重要組成部分。對于沒有設計和 UI 的 Web 開發人員來說，一切都是不可能的。
是以，在使用 CSS 時保持高效非常重要。在本教程中，我們将介紹最重要的 CSS 專業技巧，以節省您的時間并讓您的生活更輕松。
在本教程中，我們介紹了許多重要的 CSS 提示和技巧，以提升您的開發效率。此外，我們還介紹了其他一些不太重要的 CSS 概念，以幫助你更好的了解和使用CSS技能。
1、學習 CSS 盒子模型
什麼是 Web 程式設計中的 CSS 盒子模型？
了解 CSS 盒子模型是每個 CSS 或 Web 開發人員的重要前景。如果你學習了 CSS 盒子模型，它會讓 CSS 中的一切變得簡單。它對 Web 開發生命周期産生了巨大的影響。
在這個迷你 CSS 盒子模型教程中，我們将快速了解 CSS 盒子模型是什麼以及它是如何工作的。
在談論 CSS 中網站的設計和布局時，使用的是盒子模型。簡單來說，CSS 盒模型是一個包含多個元件的容器，包括邊框、邊距、内邊距和内容本身。
總之，它是一個用于自定義不同元素布局的 CSS 工具包。
Web 浏覽器将每個元素呈現為标準 CSS 框模型所描述的框。
CSS 确定這些框的位置、大小和屬性，例如，顔色、高度、寬度、邊框、背景等。
元素的總高度和元素的寬度計算如下：
總高度：高度 + 上下内邊距 + 上下邊框 + 上下邊距。
總寬度：寬度+左右内邊距+左右邊框+左右外邊距。
CSS box-sizing 屬性：
元素的總高度和總寬度由稱為 box-sizing 的 CSS 屬性定義。CSS 屬性 box-sizing 定義元素的總高度和寬度。
box-sizing 的預設值為 content-box。
簡單來說，這意味着邊距、邊框和填充将添加到使用 width 和 height 屬性指定的總高度和寬度中。
此外，添加邊距、内邊距和邊框不會減小内容區域的總大小。
box-sizing 還有另一個值，稱為border-box。
設定時會減小内容區域的大小。或者換句話說，當向元素添加邊距、内邊距和邊框時，元素的總高度和總寬度不會增加。
CSS盒子模型的組成部分：
1、内容：
這是 CSS 盒子模型的主要元素。簡單來說，它就像一個顯示文本、圖像、視訊等的框，通過使用寬度和高度等屬性來調整大小。内容區包含元素的主要内容。内容包括文本、圖像或視訊。
2、填充：
填充在其邊界内圍繞元素建立空間。
使用屬性在 HTML 元素上設定填充。
a) 内邊距：2px；// 2px 填充所有邊
b) 内邊距：2px 3px；//上下2px，左右3px
c) 内邊距：2px 3px 4px；// 頂部2px，左右3px，底部4px
d) 内邊距：2px 3px 4px5px ；// 頂部 2px，右側 3px，底部 4px，左側 5px
或使用單獨的 CSS 屬性。
填充左：填充頂部：填充右：填充底部：
3、邊框：
邊框在元素周圍建立分隔線或空間，标記元素的結束。填充和内容包含在其中。邊框可根據要求定制。
您可以使用 CSS 屬性邊框為例，通過“border: 1px solid green”來更改邊框的大小、樣式、顔色和寬度。
而 1px 是大小，solid 是樣式，green 是邊框的顔色。
其他各種 CSS 屬性可以應用于邊框。這些屬性包括但不限于邊界半徑等。
4、邊距：
邊距是元素邊界之外的空間。它在相鄰元素之間建立了一個空間。邊距大小由簡寫屬性 margin 或單獨的屬性決定，例如 margin-top、margin-bottom、margin-left、margin-bottom。這些 CSS 屬性的工作方式與填充大小屬性的工作方式類似。
2、使用 Mozilla Firefox CSS 工具
Firefox 或 Mozilla Firefox 是由 Mozilla 基金會開發的免費開源網絡浏覽器。Mozilla Firefox 可用于 Windows、Mac、Linux、Android 和 IOS 裝置。截至 2021 年 12 月，Firefox 作為桌面網絡浏覽器的使用份額為 8.34%，是全球第四大最受歡迎的浏覽器。
Mozilla Firefox 附帶了許多對開發人員來講的好工具，開箱即用。其中最好的是：
CSS 網格布局 Firefox 開發工具
Firefox 擁有驚人的 CSS 開發者工具。其中之一是網格容器。當我們檢查一個網格項時，它會可視化整個網格容器的布局。它使調試和更改屬性更容易。
除了單個網格容器外，它還顯示頁面上應用的所有網格布局的表格。要使用它，隻需選擇網格項目以檢查網格線和名稱。
您還可以在 Firefox 開發人員工具中檢視 grid-gap 和其他與網格相關的屬性。
Flex box Firefox 開發工具：
與 CSS 網格類似，firefox CSS 開發工具也使使用 flex-box 布局更容易。與網格類似，它可視化單個 flex-box 屬性，如 flex-direction、align-items 和 justify-content。
元素注釋 Firefox 開發工具：
Firefox CSS 開發人員工具提供了令人驚歎的注釋，使您作為開發人員的工作更輕松。
隻需檢視 HTML，您就可以看到哪些元素溢出并采取必要的措施來修複它。此外，您可以檢視使用 flexbox 和 CSS-grid 布局的元素。
在網站的視覺方面工作時會産生很大的不同。它使事情變得整潔且易于修複。
3、 CSS 彈性盒子
在 CSS3 中的 CSS flexbox 出現之前，布局網頁是一項艱巨的任務。開發人員需要數百行代碼來設計一個簡單的布局。
CSS flexbox 讓我們的生活變得輕松。現在隻需幾行代碼，我們甚至可以布局最複雜的布局。
什麼是 CSS 彈性盒？
flexbox 被設計用來布置一維布局模型。使用 CSS flexbox，您可以用幾行代碼設計一維布局。
Flexbox 提供具有強大對齊功能的項目之間的空間配置設定。它還提供了一種簡單幹淨的方式來在 flex 容器中排列項目。
Flexbox 使布局具有響應性和移動友好性。它對于建立小規模布局很有用。
彈性盒的特點：
- Flexbox 布局靈活。
- 提供一種強大的方式來排列和對齊項目。
- 提供一種正确間隔項目的方法。
- 使用 flexbox，您可以輕松管理項目的順序和順序。
- 流行的 CSS 庫 Bootstrap 基于 flexbox。
如何使用 CSS flex-box 繪制布局？
第 1 步：建立一個 flex container。
為了使 flex container成為父容器，我們将 display 屬性設定為 flex。
.container { display: flex; } 将flex-container 的flex-direction:屬性設定為1。
flex-direction 屬性改變 flexbox 的方向。預設情況下，它設定為row。但是我們可以把它改成一列，把彈性項目放在一列中。
我們還可以将 flex-direction 屬性設定為 column-reverse 和 row-reverse。這颠倒了彈性項目的順序。
.container { display: flex; flex-direction: row; // column, row-reverse, column-reverse } 2、 flex-wrap
flex-wrap 屬性指定彈性項目是否應該換行。
flex-wrap 屬性可以有三個值 wrap、nowrap 和 wrap-reverse。
wrap 值指定彈性項目應在必要時進行包裝，而 nowrap 值指定彈性項目不應包裝。如果沒有指定值，nowrap 也是 flex-wrap 的預設值。
wrap-reverse 值指定彈性項目應該以相反的順序換行。
.container { display: flex; flex-direction: row; flex-wrap: wrap; // nowrap, wrap-reverse }
3、flex-flow
簡單來說，flex-flow 隻是用于設定 flex-direction 和 flex-wrap 屬性的傘形或簡寫屬性。
.container { display: flex; flex-flow: row wrap; }
4、justify-content
justify-content 屬性用于在水準軸上對齊彈性項目。
.container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; // center, flex-end, space-between, space-around }
justify-content 屬性可以具有下面給出的五個值之一。
a) flex-start:
flex-start 值與 flex 容器開始處的項目對齊。這是 justify-content 屬性的預設值。
b) center:
center 值将項目對齊在 flex 容器的中心
c) flex-end:
flex-end 值與 flex-start 相反。它在彈性容器的末端對齊彈性項目。
d) space-between:
space-between 值僅在彈性項目之間添加空間，而不是分别在第一個和最後一個元素之前或結尾。
e) space-around:
space-around 值在彈性項目之間、結尾和之後添加空間。
5、 align-items:
align-items 屬性用于在 y 軸上對齊彈性項目。它采用下面給出的五個值之一。
a) flex-start
flex-start 對齊容器頂部的項目。
b) flex-end
flex-end 對齊容器底部的項目。
c) center
居中對齊容器中間的項目。
d) baseline
基線值根據它們的基線對齊彈性項目。
e) stretch
拉伸值拉伸彈性項目以填充彈性容器。如果未指定其他值，則這是 align-items 屬性的預設值。
6、 align-content
align-content 屬性用于對齊 flex 容器中的行。它可以有以下六個值。
a) flex-center
center 值将所有行居中在 flex 容器的中心。
b) flex-start
flex-start 值對齊 flex-container 開頭的所有行
c) flex-end
flex-end 值對齊 flex-container 末尾的所有行
d) space-between
space-between 配置設定 flex-rows 之間的可用空間，但不會在第一行的開頭和最後一行之後添加空間。
e) space-around
space-around 值在第一行之前和最後一行之後添加空間，并在行之間配置設定剩餘空間。
f) stretch
拉伸值相對于行容器中最長的項目垂直拉伸彈性行。
第 2 步：應用于彈性項目的屬性：
這些是用于 flex 容器的直接子級的屬性。此外，flex 容器的直接子項會自動成為 flex 項。
有 6 個 flex-item 屬性。這些如下：
1) order
顧名思義，順序是彈性項目在彈性容器中顯示的順序。它覆寫 HTML 順序。order 的預設值為 0。
order 的值小于 0 表示 order 小于 1 的元素将顯示在每個其他元素之前。
.item { order: 2; }
2) flex-grow:
使用 flex-grow 屬性，我們可以指定一個彈性項目相對于其他彈性項目應該增長多少。
flex-grow 的預設值為 0。簡單來說，這意味着 flex-items 不會相對于可用空間增長。
.item { order: 2; flex-grow: 1; }
3) flex-shrink:
flex-shrink 屬性指定一個 flex 項目相對于 flex 容器中的其餘項目将收縮多少。flex-shrink 的預設值為 1。這意味着如果空間小于每個項目所需的空間，則每個項目都會收縮。
.item { order: 2; flex-grow: 1; flex-shrink: 0; // The item won't shrink }
4) flex-basis:
彈性項目的初始長度是使用 flex-basis 屬性設定的。
.item { order: 2; flex-grow: 1; flex-shrink: 1; flex-basis: 300px; } 5）flex：
flex 屬性隻是一個簡寫屬性，可以一次性指定 flex-grow、flex-shrink 和 flex-basis 屬性。
.item { order: 2; flex: 1 1 200px; // flex: flex-grow flex-shrink flex-basis; } 6) align-self:
align-self 屬性指定彈性容器内特定項目的對齊方式。它覆寫了 flex 容器上指定的屬性 align-items。
.item { align-self: center; }
在 Codepen 上嘗試 CSS flex-box：
請參閱 nadeem (@nasyxnadeem) 在 CodePen 上的 Pen CSS flex-box 模型。位址：https://codepen.io/nasyxnadeem/pen/bGYYbqe
4、 CSS Grid，最重要的 CSS 專業技巧
CSS 網格布局是這10個技巧中比較重要的知識，CSS 網格布局對 CSS 來說有點新，這使得它更加重要，它也取代了傳統的浮動布局。此外，它是 flex-box 布局的二維版本。與傳統的浮動布局相比，它可以更輕松地建立複雜的頁面布局并将代碼減少到幾行。
CSS 網格布局是一個強大的工具，可以建立二維布局。CSS 網格布局在将大型網頁劃分為小元件并根據大小、位置和優先級或重要性定義這些元件之間的關系方面做得非常出色。
此外，CSS 網格布局有點類似于表格，因為它像表格一樣将大布局劃分為行和列。CSS 網格布局讓我們的生活更輕松。
在網格出現之前，我們不得不編寫數百行代碼并花費大量時間建立一個簡單的布局。但是，現在隻需幾行代碼和幾分鐘的時間。您還可以嘗試 CSS 網格圖檔庫以了解有關 CSS 網格的更多資訊。
如何建立 CSS 網格布局？
要建立 CSS 網格布局，我們建立一個容器并将其 display 屬性設定為網格。
這并不是建立網格布局所需要做的全部。您必須使用 CSS 屬性 grid-template-columns 和 grid-template-rows 顯式建立網格行和列。
下面給出了一個 3 x 3 網格的示例。
.container { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); } 應用于 CSS 網格容器的屬性。
1）grid-template-columns屬性：
grid-template-columns 屬性定義了網格布局中列的數量和寬度。
這是一個示例，我們建立了 4 個等寬的列。
grid-template-columns: repeat(4, 1fr); or grid-template-columns: repeat(4, auto); css repeat（）函數：
上面執行個體使用repeat函數建立 4 列，每列 1fr。
這是另一個示例，我們建立了 4 列不同寬度的列。
grid-template-columns: 20px 100px 200px 100px; 2）grid-template-rows：
grid-template-rows 屬性的工作方式與 grid-template-columns 相同。唯一的差別是它建立行而不是列。
這是一個示例，我們建立了 4 行相同高度：
grid-template-rows: repeat(4, 1fr); 或4排不同高度。
grid-template-columns: 50px 300px 350px 100px; 3）column-gap屬性：
column-gap 屬性在列之間添加指定的空間。
column-gap: 30px; 在上面的代碼示例中，将在所有列之間添加 30px 的間隙。
4）row-gap屬性：
row-gap 屬性在行之間添加指定的空間。
row-gap: 20px;
在上面的代碼塊中，行之間添加了 20px 的間隙。
5）gap屬性：
gap 屬性是 row-gap 和 column-gap 的簡寫屬性。
gap: 10px; //both column and row gap gap: 10px 39x; // row-gap: 10px; column-gap: 39px; 6）justify-content ：
justify-content 用于水準對齊容器内的整個網格。網格的寬度需要小于容器的寬度才能讓 justify-content 産生效果。
justify-content 可以具有以下值。
.container { display: flex; justify-content: space-evenly; // space-around, space-between , center, start, end a) space-evenly
space-evenly 值在可用空間中的項目的開始、結束和項目之間添加相等的空間。
b) space-around
space-around 值與 space-evenly 類似，唯一的差別是前後空間之和等于兩個相鄰項之間的空間。
c) space-between
space-between 值在項目之間添加空間，但不在網格的開始和結束處。
d) center
center值将所有網格項對齊在網格的中心。
e) start
起始值對齊網格容器開始處的所有網格項。
f) end
end值對齊網格容器末尾的所有網格項
7) align-content
align-content 垂直對齊容器内的整個網格。與 justify-content 一樣，網格的寬度需要小于容器寬度才能産生效果。
.container { display: grid; align-content: center; //space-evenly, space-around, space-between, start, end } align-content 可以具有以下值：
a) center
b) space-evenly
c) space-around
d) space-between
e) start
f) end
align-content 的值與 justify-content 類似。
應用于網格項目的屬性：
a) grid-column 屬性：
grid-column 屬性用于設定網格容器中元素的開始和結束列。例如，如果一個項目的 grid-column 屬性設定為 1 / 5，這意味着該項目從網格列第 1 行開始，到網格列第 5 行結束。可以使用像 1/ span 4 這樣的跨度來編寫相同的内容。
.item { grid-column: 1 / 5; // Or grid-column: 1 / span 4; } b) grid-row屬性：
grid-row 屬性類似于 grid-column 屬性，唯一的差別是我們使用 grid-row 屬性來設定網格項的開始和結束行。我們也可以像在 grid-column 屬性中一樣使用 span。
.item { grid-row: 1 / 2; } c) grid-area 屬性：
grid-area 屬性是 grid-column 和 grid-row 的簡寫屬性。
網格區域：網格行開始/網格列開始/網格行結束/網格列結束；
上面的 grid-row 和 grid-column 屬性可以使用 grid-area as 來設定。
.item { grid-area: 1 / 1 / 2 / 5; } Codepen 上的 CSS 網格示例：https://codepen.io/nasyxnadeem/pen/bGYYzmB
5、使用CSS變量：
變量讓調試和維護代碼庫變得容易。如果您必須多次使用相同的值，最好建立一個 CSS 變量。
如果您以後碰巧更改了該值，則不必在多個位置進行更改。此外，您可以使用 javascript 動态操作 CSS 變量。
您還可以使用 SCSS 變量和 mixin 讓您的生活更輕松一些。此外，SCSS mixin 讓您可以重用 CSS 代碼塊。
如何定義和使用 CSS 變量？
在全局範圍内定義 CSS 變量。
:root { --bg-color: green; } 為了在本地範圍内定義 CSS 變量，我們在我們想要使用的 CSS 選擇器中定義變量。此外，可以使用我們在全局範圍中聲明的相同文法在局部範圍内覆寫全局變量。
在全局範圍内使用 CSS 變量：
element { background-color: var(--bg-color); } 本地 CSS 變量也使用上面定義的相同文法。唯一的差別是它們是在本地範圍内聲明的。
如何在 SAAS 中聲明和使用變量？
a) 聲明：
scss 中的變量可以使用以下文法聲明
$main-color: black; b) 用法：
element { background-color: $main-color: } 如何使用 javascript 通路 CSS 變量？
讓我們以下面給出的 CSS 變量為例。
:root { --bg-dark: #336699; }
要使用 JavaScript 擷取上述變量，請使用。
getComputedStyle(document.body).style.getPropertyValue('--bg-dark')
如何使用 JavaScript 覆寫 CSS 變量？
document.documentElement.style.setProperty('--bg-dark', '#787898');
6、CSS Calc() 函數：
CSS calc() 函數有助于在 CSS 中進行簡單的計算。這是一個有用的功能，有時可以成為特定 CSS 問題的最佳解決方案。CSS calc() 函數可以進行基本的數學計算，例如通過求解數學表達式來計算 HTML 元素的寬度。
CSS calc() 函數示例：
計算 HTML div 元素的寬度。
.div { width: calc(100% - 100px) }
上述 div 的大小将等于 div 的父級的計算寬度減去 100px。
其他需要檢視的重要 CSS 屬性。
a) CSS 中的過渡時間函數屬性：
Transition-timing-function 允許動畫随時間改變速度。它的預設值是輕松。但是，它可以具有以下值
1) ease：開始慢，然後快，最後慢
2）linear：從開始到結束的速度相同
3) ease-in：開始時慢，後快
4）ease-out：快速開始但緩慢結束
5) ease-in-out：三次貝塞爾曲線的緩慢開始和結束(0.42, 0, 0.58, 1)
6) step-start：在開始之前先走一步
7）step-end：在動畫結束時走一步
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
b) 動畫定時功能：
它指定動畫的速度曲線。速度曲線使變化平滑。它與 transition-timing-function 具有相同的值，并且與這種情況下的含義相同。Ease 是動畫計時功能的預設值。
c) 三次貝塞爾() 函數：
與上述兩個屬性不同，這是一個實際的 CSS 函數。它定義了三次貝塞爾曲線。cube-bezier() 函數與 animation-timing-function 屬性和 transition-timing-function 屬性一起使用。
三次貝塞爾曲線示例：
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
7、CSS state management counter：
這可能會讓您感到驚訝，但這是事實。有一個内置的 CSS 狀态管理計數器。它允許您根據元素在文檔中的位置更改元素的外觀。
CSS state management counter可用于
1）自動編号網頁中的标題。
2) 更改有序清單的編号。
簡單來說，CSS counter隻是可以根據 CSS 規則的使用次數遞增或遞減的變量。
如何使用 CSS counter？
a) 初始化一個或多個 CSS counter：
您可以使用以下文法初始化計數器
counter-reset: heading;
它将标題變量設定為 0。
或多個 counter，如
counter-reset: heading paragraph;
或者将其初始化為一個數字
counter-reset: heading 4;
上面的代碼行将标題初始化為 4。
b) 增加或減少一個 CSS counter：
counter-increment: heading; // Increase the value of heading by 1
counter-increment: heading -1; // decrease the value of heading by 1 要将其增加一個不同的數字，您可以使用該數字代替 -1，如 counter-increment：标題 5; 将航向增加 5。
c) 顯示計數器：
CSS counter可以使用 counter() 函數顯示。
content: counter(heading) displays the value of counter heading
8、 Foucs-within 僞類：
focus-within 僞類表示已獲得焦點的元素或其子元素已獲得焦點。當使用者單擊或點選元素或使用鍵盤上的 tab 鍵選擇元素時觸發。
它類似于 focus 僞類，但不同之處在于如果該元素中包含的元素獲得焦點，則不會觸發焦點。
Codepen 上的焦點僞類示例：https://codepen.io/nasyxnadeem/pen/JjOZqOG
Codepen 上的 focus-within 僞類示例：https://codepen.io/nasyxnadeem/pen/JjOZqOG
9、The aspect ratio one-liner:
縱橫比是元素的寬度與其高度的比率。通常用冒号 (2:3) 分隔的高度和寬度表示。在 2:3 的示例中，元素的寬度為 2 個機關，高度為 3 個機關。
在 CSS 中，它的寬度和高度由正斜杠 (2/3) 分隔。
此外，對于 HTML 元素，縱橫比是元素的首選寬度和高度之比。
設定縱橫比可以通過一行 CSS 完成。
aspect-ratio: 1 / 1;
Codepen 上的縱橫比線上示例：https://codepen.io/nasyxnadeem/pen/xxPyQqG
10、學習 SCSS
SASS (SCSS) 是一種預處理器腳本語言，它被編譯成 CSS（層疊樣式表）。它有兩種文法，一種是原始的，一種是時髦的。
最初稱為“縮進文法”的文法實作了類似于 Html 的文法。使用分隔縮進來分隔不同的代碼塊和換行符。
它的檔案擴充名為 .sass。根據 SASS 的官方網站，SASS 是一個很棒的樣式表。
另請閱讀，5 個實用的 SCSS 混合示例：https://codipher.com/5-practical-scss-mixin-examples/
總結
一個好的使用者界面是每個網站的重要組成部分。大多數時候，原始 CSS 可以完成這項工作。即使您使用其他 CSS 庫，如 Bootstrap、Tailwind CSS 等，您仍然需要了解 CSS 才能實作您的設計。
是以，CSS 是每個 Web 開發人員生命周期的重要組成部分，即使他們主要使用 CSS 庫。
并且在 CSS 中保持高效和高效隻會使設計過程順利進行。這就是為什麼，我們進行了研究，為您找出 10 個 CSS 專業技巧。
如果您喜歡本教程，請在本文末尾留下回報。我們很高興您能來到這裡，并希望您喜歡 10 個專業的 CSS 技巧。
我們還有其他 CSS 相關的文章，如果您有興趣，請閱讀它們。
是以，如果您對這些 CSS 專業技巧感興趣，請告訴我們。
感謝你的閱讀。