以下是 120 个经过分类整理的实用 CSS 技巧，涵盖布局、视觉、动画、性能优化等多个维度，每个技巧均附代码示例和场景说明：

一、布局与定位（25 个）

1.水平垂直居中（Flex）

.center { display: flex; justify-content: center; align-items: center; }

适用于任何元素，兼容现代浏览器。

2.双栏固定 + 自适应布局（Grid）

.grid { grid-template-columns: 200px auto; gap: 1rem; }

左侧固定宽度，右侧自适应，替代传统浮动布局。

3.圣杯布局（Grid）

.grid { 
  grid-template-columns: 200px auto 200px;
  grid-template-rows: 60px auto 40px;
}

三列布局，中间内容优先加载，响应式适配。

4.等高卡片布局（Flex）

.card-group { display: flex; gap: 1rem; }
.card { flex: 1; min-height: 200px; }

多列卡片高度自动对齐，适合商品列表。

5.Sticky 固定导航栏

.nav { position: sticky; top: 0; background: #fff; }

滚动时固定在顶部，需确保父元素高度大于导航栏。

6.内容高度占满剩余空间（Grid）

.grid { 
  min-height: 100vh; 
  grid-template-rows: auto 1fr auto; 
}

实现 “Header-Content-Footer” 经典布局。

7.强制换行与省略号

.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.multi-line { display: -webkit-box; -webkit-line-clamp: 3; overflow: hidden; }

单行 / 多行文本截断，移动端列表常用。

8.固定宽高比例容器（16:9）

.ratio { aspect-ratio: 16/9; background: #ccc; }

适配视频或图片，替代 padding hack。

9.Grid 自动填充列

.grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

响应式布局，元素自动换行。

10.粘性定位吸顶效果

.sticky { position: sticky; top: 20px; }

滚动时保持固定间距，适合侧边栏。