书籍摘要

书籍概况

• 作者: Eric A. Meyer 和 Estelle Weyl
• 出版时间: 2017年
• 页数: 1088页
• 定位: 全面覆盖CSS核心规范与最新特性的权威指南，适合从基础到进阶的开发者，尤其关注现代Web布局与用户体验优化。

核心内容

1. 基础概念与核心机制

• 选择器与层叠规则: 详解选择器类型、特异性计算及层叠优先级，强调CSS规则的冲突解决机制。
• 盒模型与定位:
  • 盒模型组成: 包含内容区域、内边距（padding）、边框（border）、外边距（margin），并讨论替换元素（如<img>）与非替换元素的差异。
  • 定位模式: 涵盖static、relative（相对自身定位）、absolute（相对于最近非静态祖先）、fixed（视口固定）和sticky（滚动吸附）。

2. 布局系统

• 传统布局: 浮动（float）与清除浮动技巧，用于实现多列布局。
• 现代布局:
  • Flexbox: 弹性盒模型，支持动态分配空间与对齐，适合一维布局。
  • Grid: 网格布局系统，提供二维布局能力，支持复杂行列结构，是响应式设计的核心工具。
• 表格布局与列表: 通过display: table模拟表格行为，以及列表项标志（list-style-type）与生成内容（伪元素:before、:after）的定制。

3. 视觉与动画

• 颜色与背景: 支持RGBA、HSLA等颜色模式，渐变（gradient）与多重背景的实现。
• 变形与动画:
  • 2D/3D变换: 包括旋转、缩放、平移等效果。
  • 过渡（Transitions）与动画（Animations）: 定义属性变化的时序与关键帧，实现平滑交互效果。
• 滤镜与混合模式: 如模糊（blur()）、颜色调整（contrast()）及图层混合（mix-blend-mode）。

4. 响应式与适配

• 媒体查询（Media Queries）: 根据设备特性（如屏幕尺寸、分辨率）动态调整样式，支持多端适配。
• 视口与单位: 使用vw、vh等相对单位，结合calc()函数实现灵活布局。

5. 高级特性与最佳实践

• 生成内容与计数器: 通过伪元素插入动态内容（如链接URL展示），并利用计数器（counter-reset、counter-increment）实现复杂编号逻辑。
• 性能优化: 避免过度层叠规则，合理使用硬件加速（如transform），减少重绘与回流。
• 可访问性: 强调语义化HTML与ARIA角色结合，确保样式不影响屏幕阅读器解析。

特色与价值

• 模块化知识体系: 针对CSS3的模块化特性，分章节深入讲解各独立规范（如Flexbox、Grid），便于按需学习。
• 实践导向: 通过大量代码示例解析常见布局问题（如居中、等高列），并对比不同方案的优缺点。
• 前瞻性: 涵盖当时最新的CSS特性（如2017年的Grid布局），并预测未来发展方向。

适用读者

• 初学者: 系统学习CSS语法与核心概念。
• 进阶开发者: 深入掌握复杂布局与性能优化技巧。
• 全栈工程师: 快速查阅CSS规范细节与兼容性方案。