1. Flexbox Layout 📐
Flexbox 是创建响应式布局的核心工具。它允许容器动态调整子元素的大小和排列方式。
- Direction Control: 使用
flex-direction设置主轴方向（row,column）。 - Gap and Wrap:
gap定义间距，flex-wrap控制换行（nowrap,wrap）。 - Alignment:
justify-content和align-items实现对齐（flex-start,center,space-between）。
2. CSS Grid 🧱
Grid 提供二维布局系统，适合复杂页面结构。
- Grid Areas: 定义区域（
grid-template-areas）。 - Auto Flow: 自动填充行/列（
auto-flow）。 - Responsive Grid: 结合
fr单位实现弹性分配。
3. Animations & Transitions 🎬
通过 @keyframes 和 transition 属性实现动态效果。
- Smooth Transitions: 设置
transition-property和transition-duration。 - Animation Timing: 使用
animation-timing-function（ease,linear）。 - Infinite Loops:
animation-iteration-count: infinite创建循环动画。
4. Responsive Design 📱
利用媒体查询（@media）适配不同设备。
- Breakpoints: 定义
max-width或min-width触发响应式样式。 - Grid + Flexbox: 联合使用实现灵活布局。
- Image Responsiveness:
max-width: 100%保证图片自适应。
了解更多基础CSS，请访问 /en/docs/css_basic ✅
5. Advanced Selectors 🔍
使用更精准的CSS选择器提升代码效率。
:nth-child()选择特定子元素。:not()排除元素。:has()匹配包含子元素的父元素（需现代浏览器支持）。