CSS 核心技术知识点详解：从基础到进阶

本文基于图中提供的 17 个 CSS 核心知识点展开讲解，涵盖基础概念、布局原理、实战技巧及性能优化等内容。每个知识点均附代码示例和原理分析，帮助读者系统性掌握 CSS 核心能力。

1. 选择器

作用：定位 HTML 元素并应用样式。
常见类型：

• 类选择器：.class-name { ... }
• ID 选择器：#id-name { ... }
• 属性选择器：[type="text"] { ... }

代码示例：

.button { color: red; }     /* 类选择器 */
#header { height: 80px; }  /* ID 选择器 */
input[required] { border: 1px solid red; } /* 属性选择器 */

2. 定位（Positioning）

核心属性：position
取值：

• static（默认）
• relative（相对定位，不脱离文档流）
• absolute（绝对定位，相对于最近非 static 父元素）
• fixed（固定定位，相对于视口）

代码示例：

.box {
  position: relative;
  top: 20px; /* 相对于原位置向下偏移 20px */
}

3. 盒子模型（Box Model）

组成：content → padding → border → margin
两种模型：

• 标准盒模型：width = content
• IE 盒模型：width = content + padding + border

切换方式：

.box { box-sizing: border-box; } /* 使用 IE 盒模型 */

4. 字符串类（Text & Font）

常见属性：

• font-family：字体类型
• text-align：文本对齐
• line-height：行高

代码示例：

.text {
  font-family: "Arial", sans-serif;
  text-align: center;
  line-height: 1.5;
}

5. 代码规范

最佳实践：

• 使用 kebab-case 命名（如 .main-header）
• 避免使用 !important
• 分组书写属性（布局属性 → 外观属性）

6. 实战技巧

模块化 CSS：

/* 按钮模块 */
.btn {
  padding: 8px 16px;
  border-radius: 4px;
}
.btn-primary { background: blue; }

7. 优先级（Specificity）

权重计算规则：
内联样式（1000） > ID（100） > 类/伪类（10） > 元素（1）

示例：

#nav .item { color: red; } /* 权重：100 + 10 = 110 */
.item { color: blue; }      /* 权重：10 → 最终显示红色 */

8. 浮动（Float）

用途：实现文字环绕或传统布局。
问题：父容器高度塌陷。
清除浮动：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

9. BFC（块级格式化上下文）

触发条件：overflow: hidden、display: inline-block 等。
作用：隔离外部布局，避免外边距合并。

代码示例：

.container {
  overflow: hidden; /* 触发 BFC */
}

10. 性能优化

关键点：

• 减少重绘和回流（如使用 transform 替代 top/left）
• 压缩 CSS 文件（使用 Webpack 等工具）

11. CSS3 动画特效

核心属性：

• @keyframes 定义动画
• animation 应用动画

代码示例：

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
.box { animation: slide 2s infinite; }

12. 包装类（Wrapper）

用途：作为页面内容容器，限制最大宽度并居中。
代码示例：

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

13. 渲染原理

流程：
HTML → DOM 树 → CSSOM 树 → 合并为渲染树 → 布局（Layout） → 绘制（Paint）

优化建议：减少 DOM 层级和复杂选择器以加快渲染。

14 & 15. Flex 布局

容器属性：

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

项目属性：

.item {
  flex: 1; /* 等价于 flex: 1 1 0 */
}

16. 布局思维

响应式设计：使用媒体查询适配不同屏幕。
移动优先：

/* 默认移动端样式 */
@media (min-width: 768px) {
  /* 平板及以上样式 */
}

总结

掌握这 17 个 CSS 核心知识点，可覆盖从基础到进阶的开发需求。理解原理后，结合实战技巧和性能优化策略，能够显著提升页面质量和开发效率。