一、Flexbox与Grid布局
Flexbox（弹性盒子）适用于一维布局，通过`display: flex`激活，支持`justify-content`、`align-items`等属性实现灵活排列。Grid（网格布局）则面向二维布局，使用`display: grid`定义容器，配合`grid-template-columns/rows`构建复杂布局体系。两种布局方式互补，Flexbox适合组件级布局，Grid更擅长页面级结构。
二、响应式设计进阶
媒体查询（`@media`）仍是响应式核心，但现代CSS新增特性：
`clamp()`函数实现动态尺寸：`width: clamp(300px, 50%, 800px)`
CSS容器查询（实验性）：通过`@container`基于父容器尺寸响应
视口单位（vw/vh/vmin/vmax）配合calc()实现比例适配
三、过渡与动画
使用`transition`创建平滑过渡：
```css
.button {
transition: all 0.3s ease-in-out;
}
```
关键帧动画：
```css
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.element { animation: slide 0.5s forwards; }
```
四、CSS变量与预处理
CSS自定义属性（变量）：
```css
:root {
--primary-color: #2196F3;
}
.element {
color: var(--primary-color);
}
```
Sass/Less等预处理器提供嵌套语法、混合宏等功能，提升代码可维护性。
五、性能优化
减少重排：优先使用transform/opacity
使用`will-change`预声明变化属性
避免通配符选择器（*）
按需加载CSS（@import影响性能）
六、结语
掌握中阶CSS需理解现代布局方案、响应式策略及性能优化技巧。建议通过实践项目巩固知识，同时关注CSS新特性发展（如层叠层@layer、作用域样式等）。进阶者可探索CSS-in-JS方案或框架集成。
