你應該知道的 CSS 特性

今天我想和你談談五個很酷的 CSS 功能，它們可能會改變你寫樣式的方式。如果您正在學習 CSS，這些功能將使您的生活更輕鬆。讓我們一一看看它們，並透過範例展示我們如何「手動」做事以及如何使用這些工具簡化它們。

1. calc()：直接在CSS中執行計算？

您是否發現自己手動添加或減去值來調整元素的大小？使用 calc()，您可以直接在樣式表中執行此操作，無需事先計算。

沒有 calc() 的範例：

.container {
  width: 70%;
  margin: 20px;
}

calc() 範例：

.container {
  width: calc(70% - 20px);
  margin: 20px;
}

使用 calc()，您可以組合不同的測量單位，例如百分比和像素，以實現更靈活、適應性更強的設計。

---

2.repeat()：簡化網格的創建？

如果您使用網格佈局，您可能會發現自己正在編寫重複的列或行。使用repeat()，可以避免冗餘程式碼並提高可讀性。

沒有repeat()的例子：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Tres columnas iguales */
}

使用重複（）的範例：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Lo mismo, pero más limpio */
}

repeat() 非常適合複雜網格或具有定義模式的網格

---

3. min()：控制最大動態尺寸？

min() 可讓您指定多個值中的最小尺寸，非常適合響應式設計。

沒有 min() 的範例：

.box {
  width: 50vw; /* Podría ser demasiado grande en pantallas grandes */
}

@media (min-width: 600px) {
  .box {
    width: 300px; /* Tamaño fijo en pantallas más grandes */
  }
}

min() 範例：

.box {
  width: min(50vw, 300px); /* Escoge automáticamente el valor más pequeño */
}

使用 min()，您可以減少媒體查詢規則並實現更流暢的設計。

---

4.clamp()：響應式佈局中的全尺寸控制

clamp() 可讓您定義一系列最小和最大尺寸，非常適合需要根據螢幕尺寸縮放的字體和元素。

沒有clamp()的例子：

.text {
  font-size: 16px; /* Tamaño fijo */
}

@media (min-width: 600px) {
  .text {
    font-size: 20px;
  }
}

@media (min-width: 1200px) {
  .text {
    font-size: 24px;
  }
}

夾子（）的例子：

.text {
  font-size: clamp(16px, 2vw, 24px); /* Escala entre 16px y 24px */
}

使用clamp()，您可以消除多個媒體查詢規則並獲得更靈活的佈局。

---

5. fit-content()：讓寬度適合內容

fit-content() 讓您可以讓元素的寬度適合其內容的大小，但不會超出您定義的最大值。這對於建立可動態調整其包含的文字的按鈕或元素非常有用，但在寬螢幕上不會變得過大。

沒有 fit-content() 的範例：

.button {
  width: auto; /* Se expande según el contenido */
  padding: 10px 20px;
  border: 1px solid black;
}

（在這種情況下，如果按鈕文字很長，按鈕會被拉伸太長。）

fit-content() 的範例：

.container {
  width: 70%;
  margin: 20px;
}

使用 fit-content()，按鈕將適合文字的大小，但寬度永遠不會超過 200px。如果文字較短，按鈕就會較小。

以上是你應該知道的 CSS 特性的詳細內容。更多資訊請關注PHP中文網其他相關文章！