本文共 2955 字，大约阅读时间需要 9 分钟。

CSS学习指南

1. 内容生成

通过CSS伪元素（before 和 after）向元素中添加新内容。这种方法无需额外的HTML标记，就能在现有标记中增加内容。

• 属性：content

  • 取值：
  • 字符串（string）：普通文本，使用""引起来。
  • url()：生成图像到指定的内容区域。
  • 计数器（counter）。

• 示例：

  div::before {
    content: url('...'); /* 添加图标 */
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 5px;
  }

• 解决溢出问题：

  div::before {
    content: '';
    display: table;
  }

• 解决父元素高度问题：

  .clear:after {
    content: '';
    display: block;
    clear: both;
  }

• 计数器：

  • 声明：counter-reset

    counter-reset: c1 0; /* 初始化计数器 */
    counter-reset: c1 c2 10; /* 初始化多个计数器 */

  • 设置增量：counter-increment

    counter-increment: c1 1; /* 设置计数器增量 */

  • 使用：counter()

    div:before {
      content: counter(c1) "、";
    }

2. 转换

转换允许元素在2D或3D空间中改变位置、大小、形状和角度。

• 2D位移：

  translate(x, y); /* 移动x轴和y轴 */
  translateX(x); /* 移动x轴 */
  translateY(y); /* 移动y轴 */

• 缩放：

  scale(value); /* 缩放比例 */
  scaleX(x); /* x轴缩放 */
  scaleY(y); /* y轴缩放 */

• 旋转：

  rotate(ndeg); /* 旋转角度 */

• 倾斜：

  skew(xdeg); /* x轴倾斜 */
  skewY(ydeg); /* y轴倾斜 */

• 3D旋转：

  rotateX(xdeg); /* x轴旋转 */
  rotateY(ydeg); /* y轴旋转 */
  rotateZ(zdeg); /* z轴旋转 */

• 3D位移：

  translate(x, y, z); /* 移动x、y、z轴 */
  translateX(x); /* 移动x轴 */
  translateY(y); /* 移动y轴 */
  translateZ(z); /* 移动z轴 */

• 3D效果：

  perspective: 1000px; /* 人眼距离 */
  transform-style: preserve-3d; /* 保持3D效果 */

3. 过渡

实现元素样式的平滑变换，需定义转换属性和持续时间。

• 属性：transition

  • 取值：
  • transition-property：指定过渡属性。
  • transition-duration：时间（默认0秒）。
  • transition-timing-function：速度函数（ease、linear等）。
  • transition-delay：延迟时间（默认0秒）。

• 示例：

  .d1 {
    transition: background 2s linear;
    border-radius: 50%;
  }
  .d1:hover {
    background: #005aa0;
    border-radius: 50%;
  }

4. 动画

动画是复杂版的过渡，通过关键帧控制每一步变化。

• 关键帧：

  @keyframes animation_name {
    0% { /* 初始状态 */ }
    100% { /* 结束状态 */ }
  }

• 调用动画：

  animation: animation_name 5s ease infinite;

• 示例：

  @keyframes xuanzhuan {
    0% { transform: rotateX(-20deg) rotateY(0deg); }
    50% { transform: rotateX(-20deg) rotateY(180deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
  }

5. 媒体查询

针对不同设备（如屏幕、打印机）定义不同的样式。

• 语法：

  @media (min-width: 500px) and (max-width: 1000px) {
    .gridmenu {
      width: 100%;
    }
  }

• 常用属性：

  • min-width
  • max-width
  • orientation
  • resolution

• 示例：

  @media screen and (min-width: 700px) {
    .d1 {
      width: 800px;
    }
  }

6. Flexbox

Flexbox用于创建弹性布局，提供对盒状模型的灵活控制。

• 基本写法：

  display: flex;

  • 兼容性：-webkit-flex（Chrome、Safari）

• 属性：

  • flex-direction：主轴方向排列。
  • flex-wrap：子元素是否换行。
  • justify-content：主轴方向对齐方式。
  • align-items：交叉轴方向对齐方式。

• 子元素属性：

  • order：子元素排列顺序。
  • flex-grow：空间分配比例。
  • flex-shrink：空间缩小比例。

• 示例：

  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }

7. 滤镜

定义元素的可视效果，常用于图像处理。

• 常用滤镜：

  • blur：模糊
  • brightness：亮度
  • contrast：对比度
  • grayscale：灰度

• 示例：

  img {
    filter: brightness(0.5);
  }

8. 多列

将文本拆分为多列，适合长内容展示。

• 属性：

  • column-count：列数。
  • column-gap：列间距。
  • column-rule：分割线样式。

• 示例：

  .text-container {
    column-count: 3;
    column-gap: 40px;
  }

9. CSS Hack

通过特定符号实现跨浏览器的样式统一。

• 常用方法：

  • 属性前缀：

    -webkit-transform: translate(50%, 50%);
    transform: translate(50%, 50%);

  • 选择器前缀：

    *+div { /* IE7+ */
      ...
    }

• 示例：

  .d1 {
    background-color: #black\0 #green\0 #blue;
  }

• HTML中引用：

通过以上方法，可以在不同浏览器和设备上实现一致的CSS样式应用，从而提升开发效率和用户体验。