舉例說明你知道的css技巧有哪些？

王铁柱6發表於2024-11-27
CSS

好的，這裡有一些我知道的 CSS 技巧，並附帶例子：

1. 居中元素 (水平和垂直)

  • Flexbox: 現代且靈活的居中方法。

    .container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

  • Grid: 另一個強大的佈局工具，也適用於居中。

    .container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}

  • 絕對定位 + transform: 對於已知尺寸的元素。

    .container {
  position: relative;
}

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

2. 使用 :before 和 :after 建立偽元素

  • 新增圖示、裝飾性元素等，無需額外 HTML。

    .element::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%; /* 建立圓點 */
}

3. 使用 aspect-ratio 保持元素比例

  • 無需複雜的計算或 JavaScript 即可維護影像或影片的寬高比。

    .element {
  aspect-ratio: 16 / 9; /* 16:9 的寬高比 */
  width: 100%;
}

4. object-fit 控制影像/影片在容器中的顯示方式

  • 防止影像/影片變形。

    .element {
  width: 200px;
  height: 150px;
  object-fit: cover; /* 覆蓋整個容器，可能裁剪部分影像 */
  object-fit: contain; /* 包含整個影像，可能留白 */
}

5. 使用 filter 新增視覺效果

  • 例如模糊、灰度、對比度等。

    .element {
  filter: blur(5px);
  filter: grayscale(100%);
}

6. clip-path 建立複雜的形狀

  • 超越基本的矩形和圓形。

    .element {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 建立菱形 */
}

7. CSS 變數 (Custom Properties)

  • 提高程式碼可維護性和重用性。

    :root {
  --primary-color: #007bff;
}

.element {
  color: var(--primary-color);
}

8. @media 查詢實現響應式設計

  • 根據螢幕大小調整樣式。

    @media (max-width: 768px) {
  .element {
    font-size: 14px;
  }
}

這只是一些例子，CSS 還有很多其他的技巧和特性。 希望這些例子能幫助你更好地理解和應用 CSS。 如果你有更具體的需求，請告訴我，我會盡力提供更相關的技巧。

相關文章