本文基于图中提供的 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 核心知识点，可覆盖从基础到进阶的开发需求。理解原理后，结合实战技巧和性能优化策略，能够显著提升页面质量和开发效率。