金三銀四找工作的旺季來了，在過去的一段時間裡，我花了很多時間将之前的一些基礎知識做了整理，希望這些内容能夠幫助你在面試的時候，稍微順利一些。是以，我将整理好的這 100 個 CSS 知識技巧分享給你，希望你會覺得太對你有用。
現在，我們就開始進入今天的内容吧。
01. 網站平滑滾動
在<html>元素中添加scroll-behavior: smooth，以實作整個頁面的平滑滾動。
html{
scroll-behavior: smooth;
} 02.連結的屬性選擇器
此選擇器的目标是具有以“https”開頭的 href 屬性的連結。
a[href^="https"]{
color: blue;
} 03.〜合并兄弟姐妹
選擇 <h2> 後面的所有兄弟元素 <p> 元素。
h2 ~ p{
color: blue;
} 04. :not() 僞類
該選擇器将樣式應用于不具有“特殊”類的清單項。
li:not(.special){
font-stlye: italic;
} 05. 用于響應式排版的視口機關
使用視口機關（vw、vh、vmin、vmax）可以使字型大小響應視口大小。
h1{
font-size: 5vw;
} 06. :empty 表示空元素
此選擇器定位空的 <p> 元素并隐藏它們。
p:empty{
display: none;
} 07.自定義屬性（變量）
可以定義和使用自定義屬性，以更輕松地設定主題和維護。
:root{
--main-color: #3498db;
}
h1{
color: var(--main-color);
} 08.圖像控制的Object-fit屬性
object-fit 控制如何調整替換元素（如 <img>）的内容大小。
img{
width: 100px;
height: 100px;
object-fit: cover;
} 09. 簡化布局的網格
CSS 網格提供了一種以更簡單的方式建立布局的強大方法。
.container{
display: grid;
grid-tempalte-columns: 1fr 2fr 1fr;
} 10. :focus-in 僞類
如果該元素包含任何具有 :focus 的子元素，則 :focus-within 會選擇該元素。
form:focus-within{
box-shadow: 0 0 5px rgba(0, 0, 0, 0, 0.2);
} 11. 使用 Flexbox 垂直居中
使用 Flexbox 輕松将内容在容器内水準和垂直居中。
.container {
display: flex;
align-items: center;
justify-content: center;
} 12. 自定義選擇的突出顯示顔色
自定義在網頁上選擇文本時的突出顯示顔色。
::selection {
background-color: #ffcc00;
color: #333;
} 13. 占位符文本樣式
設定輸入字段内占位符文本的樣式。
::placeholder {
color: #999;
font-style: italic;
} 14.漸變邊框
使用background-clip屬性建立漸變邊框。
.element {
border: 2px solid transparent;
background-clip: padding-box;
background-image: linear-gradient(to right, red, blue);
} 15. vw 可變字型大小
根據視口寬度調整字型大小，進而實作更具響應性的排版。
body {
font-size: calc(16px + 1vw);
} 16.彩色元素的圓錐漸變
使用圓錐漸變建立色彩缤紛的動态背景。
.element {
background: conic-gradient(#ff5733, #33ff57, #5733ff);
} 17.響應式文本的 Clamp() 函數
使用clamp()函數設定字型大小的範圍，確定在不同螢幕尺寸上的可讀性。
.text {
font-size: clamp(16px, 4vw, 24px);
} 18.通過字型顯示交換實作高效字型加載
使用字型顯示：交換； 屬性可通過在加載自定義字型時顯示後備字型來提高 Web 字型的性能。
@font-face {
font-family: 'YourFont';
src: url("your-font.woff2") format('woff2');
font-display: swap;
} 19.自定義滾動捕捉點
實施自定義滾動捕捉點以獲得更流暢的滾動體驗，對于圖像庫或滑塊尤其有用。
.scroll-container {
scroll-snap-type: y mandatory;
}
.scroll-item {
scroll-snap-align: start;
} 20.具有字型變化設定的可變字型樣式
利用可變字型和 font-variation-settings 屬性對字型粗細、樣式和其他變體進行微調控制。
.text {
font-family: 'YourVariableFont', sans-serif;
font-variation-settings: 'wght' 500, 'ital' 1;
} 21.自定義下劃線
使用 border-bottom 和 text-decoration 的組合自定義連結上下劃線的樣式。
a {
text-decoration: none;
border-bottom: 1px solid #3498db;
} 22.隐藏的輔助文本
使用類 sr-only 在視覺上隐藏元素，但讓螢幕閱讀器可以通路它們。
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
} 23. 縱橫比框
使用填充技巧來保持圖像或視訊等元素的寬高比。
.aspect-ratio-box {
position: relative;
width: 100%;
padding-bottom: 75%; /* Adjust as needed */
}
.aspect-ratio-box > iframe {
position: absolute;
width: 100%;
height: 100%;
} 24. 選擇偶數和奇數元素
使用 :nth-child 僞類設定替代元素的樣式。
li:nth-child(even) {
background-color: #f2f2f2;
}
li:nth-child(odd) {
background-color: #e6e6e6;
} 25.CSS計數器
使用計數器重置和計數器增量屬性在清單中建立自動編号。
ol {
counter-reset: item;
}
li {
counter-increment: item;
}
li::before {
content: counter(item) ". ";
} 26. 多個背景圖像
将多個背景圖像應用于具有不同屬性的元素。
.bg {
background-image: url("image1.jpg"), url("image2.jpg");
background-position: top left, bottom right;
background-repeat: no-repeat, repeat-x;
} 27. 連字元讓文本更流暢
通過允許使用 hyphens 屬性自動連字元來提高文本可讀性。
p {
hyphens: auto;
} 28.動态樣式的CSS變量
利用 CSS 變量建立動态且可重用的樣式。
:root {
--main-color: #3498db;
}
.element {
color: var(--main-color);
} 29.鍵盤導航的焦點樣式
改進焦點樣式以獲得更好的鍵盤導航和可通路性。
:focus {
outline: 2px solid #27ae60;
} 30.平滑漸變過渡
對漸變背景應用平滑過渡以獲得精美效果。
.gradient-box {
background: linear-gradient(45deg, #3498db, #2ecc71);
transition: background 0.5s ease;
}
.gradient-box:hover {
background: linear-gradient(45deg, #e74c3c, #f39c12);
} 31.文字描邊效果
為文本添加筆劃（輪廓）以獲得獨特的視覺效果。
h1 {
color: #3498db;
-webkit-text-stroke: 2px #2c3e50;
} 32.純CSS漢堡菜單
無需 JavaScript 建立一個簡單的漢堡菜單。
.menu-toggle {
display: none;
}
.menu-toggle:checked + nav {
display: block;
}
/* Add styles for the hamburger icon and menu here */ 33. CSS :is() 選擇器
使用 :is() 僞類簡化複雜的選擇器。
:is(h1, h2, h3) {
color: blue;
} 34.CSS變量的計算
在動态樣式的 CSS 變量中執行計算。
:root {
--base-size: 16px;
--header-size: calc(var(--base-size) * 2);
}
h1 {
font-size: var(--header-size);
} 35. 内容的 attr() 函數
使用 attr() 函數檢索和顯示屬性值。
div::before {
content: attr(data-custom-content);
} 36. CSS 屏蔽
對圖像應用遮罩以獲得創意效果。
.masked-image {
mask: url(mask.svg);
mask-size: cover;
} 37. 混合模式
嘗試混合模式以獲得有趣的色彩效果。
.blend-mode {
background: url(image.jpg);
mix-blend-mode: screen;
} 38. 縱橫比屬性
使用寬高比屬性簡化寬高比框的建立。
.aspect-ratio-box {
aspect-ratio: 16/9;
} 39. 用于文本換行的 shape-outside
使用 shape-outside 屬性使文本環繞指定形狀，進而實作更動态的布局。
.shape-wrap {
float: left;
width: 150px;
height: 150px;
shape-outside: circle(50%);
} 40. ch 機關用于一緻的尺寸
ch 機關表示所選字型中字元“0”的寬度。 它對于建立一緻且響應式的布局很有用。
h1 {
font-size: 2ch;
} 41. ::marker僞元素
使用 ::marker 僞元素設定清單項标記的樣式。
li::marker {
color: blue;
} 42. 背景的 element() 函數
使用 element() 函數動态引用元素作為背景。
.background {
background: element(#targetElement);
} 43. 使用 Flexbox 的粘性頁腳
使用 Flexbox 建立粘性頁腳布局。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
} main {
flex: 1;
} 44.scroll-padding實作平滑滾動
通過調整滾動填充來改進滾動行為。
html {
scroll-padding: 20px;
} 45.互動式高亮效果
使用 CSS 變量建立互動式突出顯示效果。
.highlight {
--highlight-color: #e74c3c;
background-image: linear-gradient(transparent 0%, var(--highlight-color) 0%);
background-size: 100% 200%;
transition: background-position 0.3s;
}
.highlight:hover {
background-position: 0 100%;
} 46. 自定義單選按鈕和複選框
設定不帶圖像的單選按鈕和複選框的樣式。
input[type="radio"] {
appearance: none;
-webkit-appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #3498db;
}
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 2px solid #e74c3c;
} 47. 調整文本區域的屬性大小
使用 resize 屬性控制文本區域的大小調整行為。
textarea {
resize: vertical;
} 48. 文字漸變
使用background-clip 和text-fill-color 屬性為文本建立漸變效果。
.gradient-text {
background-image: linear-gradient(45deg, #3498db, #2ecc71);
background-clip: text;
color: transparent;
} 49. 長單詞的斷字屬性
使用 word-break 屬性可以控制不帶空格的單詞或字元串的長度。
.long-words {
word-break: break-all;
} 50. 可變字型的 font-variation-settings
使用 font-variation-settings 屬性微調可變字型樣式。
.custom-font {
font-family: 'MyVariableFont';
font-variation-settings: 'wght' 600, 'ital' 1;
} 51. 用于創意疊加的混合混合模式
使用 mix-blend-mode 将混合模式應用于元素，在疊加元素時建立有趣的視覺效果。
.overlay {
mix-blend-mode: overlay;
} 52. 設計破損圖像的樣式
使用 :broken 僞類将樣式應用于損壞的圖像。
img:broken {
filter: grayscale(100%);
} 53. CSS 形狀
使用shape-outside 屬性建立有趣的 CSS 形狀設計。
.shape {
shape-outside: circle(50%);
} 54.子串比對的屬性選擇器
使用屬性選擇器和 *= 運算符進行子字元串比對。
[data-attribute*="value"] {
/* Styles */
} 55. 模糊背景的背景濾鏡
使用背景濾鏡對背景應用模糊效果，以獲得磨砂玻璃效果。
.element {
backdrop-filter: blur(10px);
} 56.CSS環境變量
使用 env() 函數通路 CSS 中的環境變量。
.element {
margin-top: env(safe-area-inset-top);
} 57.CSS屬性計數器
使用 :nth-child 選擇器計算特定屬性值的出現次數。
[data-category="example"]:nth-child(3) {
/* Styles for the third occurrence */
} 58. 用于文本換行的 CSS 形狀
将 shape-outside 與 Polygon() 函數結合使用，可實作圍繞不規則形狀的精确文本環繞。
.text-wrap {
shape-outside: polygon(0 0, 100% 0, 100% 100%);
} 59.自定義光标樣式
使用光标屬性更改光标樣式。
.custom-cursor {
cursor: pointer;
} 60. 用于透明顔色的 HSLA
使用透明顔色的 HSLA 值，提供對 Alpha 通道的更多控制。
.transparent-bg {
background-color: hsla(120, 100%, 50%, 0.5);
} 61. 垂直文本的文本方向
使用文本方向屬性垂直旋轉文本。
.vertical-text {
text-orientation: upright;
} 62. 小型大寫字母的字型變體
使用 font-variant 屬性将小型大寫字母應用于文本。
.small-caps {
font-variant: small-caps;
} 63. 背景分割的 box-decoration-break
使用 box-decoration-break 控制跨多行的元素的背景。
.split-background {
box-decoration-break: clone;
} 64. :focus-visible 用于特定焦點樣式
僅當元素處于焦點且焦點不是通過滑鼠單擊提供時才應用樣式。
input:focus-visible {
outline: 2px solid blue;
} 65. 最佳字型渲染的文本渲染
使用文本渲染屬性改進文本渲染。
.optimized-text {
text-rendering: optimizeLegibility;
} 66. 首字母大寫字母
使用initial-letter 設定塊級元素的第一個字母的樣式。
p::first-letter {
font-size: 2em;
} 67. overscroll-behavior 滾動超調
控制使用者滾動超過滾動容器邊界時的行為。
.scroll-container {
overscroll-behavior: contain;
} 68. 垂直布局的寫作模式
使用writing-mode 屬性建立垂直布局。
.vertical-layout {
writing-mode: vertical-rl;
} 69. ::cue 用于設定 HTML5 标題樣式
使用 ::cue 僞元素設定 HTML5 标題文本的樣式。
::cue {
color: blue;
} 70. 用于截斷多行文本的line-clamp
使用 line-clamp 屬性限制元素内顯示的行數。
.truncated-text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
} 71. scroll-snap-align
scroll-snap-align 屬性控制滾動容器内滾動捕捉點的對齊方式，確定精确控制滾動行為并增強使用者體驗。
.container {
scroll-snap-type: x mandatory;
} .item {
scroll-snap-align: center;
} 72. overscroll-behavior
overscroll-behavior 使您能夠定義浏覽器應如何處理滾動過度，防止不必要的滾動效果并改善整體滾動體驗。
.scrollable {
overscroll-behavior: contain;
} 73. 字型字距調整
字型字距調整允許微調字元間距，通過調整文本元素内字元之間的間距來確定最佳的可讀性。
p {
font-kerning: auto;
} 74. 形狀邊緣
當與 CSS 形狀結合使用時，形狀邊距指定浮動元素形狀周圍的邊距，進而可以精确控制文本換行和布局。
.shape {
shape-margin: 20px;
} 75. 滾動邊距
滾動邊距設定滾動容器邊緣和滾動内容開始之間的邊距，通過提供滾動緩沖空間來增強使用者體驗。
.container {
scroll-margin-top: 100px;
} 76. 頁籤大小
滾動邊距設定滾動容器邊緣和滾動内容開始之間的邊距，通過提供滾動緩沖空間來增強使用者體驗。
pre {
tab-size: 4;
} 77. 文本最後對齊
text-align-last 确定塊元素中最後一行文本的對齊方式，進而提供對多行塊中文本對齊的精确控制。
p {
text-align-last: justify;
} 78. 文本對齊
此屬性控制文本對齊行為，指定是否應使用字間或字元間間距進行文本對齊。
p {
text-align: justify;
text-justify: inter-word;
} 79. 列填充
列填充訓示内容如何跨多列布局分布，允許跨列順序或平衡分布内容。
.container {
column-count: 3;
column-fill: auto;
} 80. 輪廓偏移
輪廓偏移調整輪廓和元素邊緣之間的空間，進而可以更好地控制輪廓的外觀而不影響布局。
button {
outline: 2px solid blue;
outline-offset: 4px;
} 81. 字型變體數字
此屬性允許對數字排版渲染進行細粒度控制，進而啟用諸如襯裡和舊式數字、分數和序數訓示符等功能。
p {
font-variant-numeric: lining-nums;
} 82. 字型光學尺寸
啟用或禁用字型光學尺寸調整以調整字元的間距和比例，以改善各種字型大小的視覺和諧。
p {
font-optical-sizing: auto;
} 83. 文本裝飾厚度
控制文本裝飾的粗細，例如下劃線、上劃線和穿線，以進行精确定制。
p {
text-decoration-thickness: 2px;
} 84. 文本下劃線偏移
調整下劃線相對于文本基線的位置，以改進排版細化。
p {
text-underline-offset: 3px;
} 85. 滾動填充塊
定義在可滾動塊容器周圍添加的填充空間，以確定内容在滾動期間保持可見和可通路。
.container {
scroll-padding-block: 20px;
} 86. 内聯滾動填充
設定在可滾動内聯容器周圍添加的填充空間，以增強滾動互動期間的使用者體驗。
.container {
scroll-padding-inline: 10px;
} 87. 換行
指定單詞或字元内的換行方式，以控制換行行為，進而改進文本布局和可讀性。
p {
line-break: strict;
} 88. 盒子裝飾打破
控制跨分段元素的邊框和填充的渲染，以確定跨多行或多列分割的元素的樣式一緻。
.element {
box-decoration-break: clone;
} 89. 首字母
将塊元素的第一個字母或首字母字元設計為裝飾性首字下沉或其他視覺上突出的首字母字元。
p::first-letter {
font-size: 2em;
float: left;
} 90. 圖像渲染
調整圖像的渲染品質和性能，優化各種場景的圖像顯示。
img {
image-rendering: pixelated;
} 91. 字型功能設定
font-feature-settings 允許您啟用或禁用字型中的 OpenType 功能，例如，連字、字距調整和樣式替代。
p {
font-feature-settings: "liga" on;
} 92. 文本導向
此屬性控制文本在其包含框中的方向，進而啟用垂直或橫向文本布局。
.vertical-text {
text-orientation: sideways;
} 93. 文本裝飾-跳過墨迹
text-decoration-skip-ink 控制文本裝飾是否應跳過上升部分和下降部分，進而改善下劃線和穿線的外觀。
p {
text-decoration-skip-ink: auto;
} 94. 文本下劃線位置
text-underline-position 調整下劃線相對于文本基線的位置，進而可以精确控制下劃線的位置。
p {
text-underline-position: under;
} 95. 圖像導向
image-orientation 控制圖像的方向，允許您根據需要旋轉或翻轉它。
img {
image-orientation: from-image;
} 96. column-span
column-span 允許一個元素在多列布局中跨越多個列，進而實作更靈活和動态的設計。
.spanning-element {
column-span: all;
} 97. contain
contains 指定元素的包含政策，通過限制布局計算和渲染的範圍來實作優化，進而提高性能。
.optimized-element {
contain: layout;
} 98. 内容可見性
内容可見性允許您控制螢幕外或隐藏内容的渲染行為，通過跳過隐藏元素的布局和繪制階段來提高渲染性能。
.off-screen {
content-visibility: auto;
} 99. 文字裝飾風格
text-decoration-style 指定用于文本裝飾的線條樣式，允許您選擇不同的線條樣式，例如實線、雙線、點線或虛線。
p {
text-decoration: underline;
text-decoration-style: wavy;
} 100. 字間距
字間距調整文本元素中字之間的間距，使您可以微調版式布局并提高可讀性。
p {
word-spacing: 2px;
} 總結
到這裡，這期整理的100個CSS基礎知識内容均已全部分享完了，如果你覺得還不錯的話，請記得點贊我，關注我，并将今天内容分享給你身邊的朋友們，也許能夠幫助到他。
最後，感謝你的閱讀，祝程式設計愉快！