举例说明你知道的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。 如果你有更具体的需求，请告诉我，我会尽力提供更相关的技巧。