CSS常用元素属性实战：布局、动效与兼容性避坑指南

CSS这玩意儿，写了几年回头看，发现真正高频用到的属性也就那么几十个，但偏偏是这些基础属性，组合起来能玩出无数花样，也最容易踩坑。这一篇是“css常用功能总结”系列的第二篇，重点聊常用元素属性，涵盖布局、文字、动效、选择器这些日常必碰的场景。文章里的代码我都会配上注释，适合有一定HTML/CSS基础、想系统补全知识点的前端初学者，也适合写了几年CSS但老在兼容性上栽跟头的同学。

系列第一篇我把CSS的优先级、盒模型、定位几个底层概念过了一遍，这次直接落到元素属性上。我的习惯是：先在一个真实场景里看这个属性解决什么问题，再谈语法和参数，最后复盘踩过的坑。这样学完的东西才是能上线的，而不是背了一堆文档。

1. 布局篇：Flex与Grid的实战选型

1.1 Flex布局子元素宽度自适应的核心写法

Flex现在是布局的默认选项，但很多人只会用 display: flex 加 justify-content，一旦遇到子元素宽度自适应就懵。其实关键全在 flex 这个复合属性上，它由 flex-grow、flex-shrink、flex-basis 三部分组成。举个例子，一个导航栏里三个菜单项要等宽均分，最省事的写法是：

css复制.nav {
  display: flex;
}
.nav-item {
  flex: 1;
}

flex: 1 是 1 1 0% 的简写，意思是：允许放大、允许缩小、基础宽度为0，三项内容最终平分容器宽度。这里有个很多人忽略的细节：如果把 flex 写成 1 1 auto，效果完全不同，因为 auto 的基础宽度会跟着内容走，内容多的项就会更宽，做不到真正的均分。想保持内容宽度但只在剩余空间里弹性分配，用 auto 反而更合适。

踩坑最多的是子元素里加了长文本或者图片后，Flex 子项死活不按预期收缩。这类问题九成是 min-width 默认值在作怪。Flex 项的 min-width 默认是 auto，意思是“至少不能小于内容宽度”，内容一长就撑破容器。解决办法是给子项加一句 min-width: 0，让它在必要时可以收缩到比内容更窄。这个坑在移动端适配里特别常见，卡片列表明明设了 flex: 1，还是横向溢出，先检查一下是不是少了这一句。

1.2 Grid布局与gap属性的配合

Grid 和 Flex 不是替代关系，而是互补关系：Flex 适合一维布局（一行或一列），Grid 适合二维布局（行列同时控制）。我写后台管理系统的时候，卡片网格布局用 Grid 是最顺手的：

css复制.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

这行代码的意思是：每一列最小220像素，最大等分容器宽度，能排几列就排几列，列与列、行与行之间保持16像素间距。以前没 gap 的时候，大家只能用 margin 加负值的方式模拟间距，不仅代码丑，换行时边缘还会多出多余间距。现在 gap 属性在 Flex 布局里同样生效，比如给弹窗的操作按钮区设置 gap: 8px，比挨个加 margin 干净得多。

需要注意，gap 在较老的浏览器里对 Flex 的支持不如对 Grid 那么稳定。如果是维护一个面向老版本移动端的项目，布局间距还是尽量用 margin 兜底，或者用 @supports 做特性检测，支持 gap 就用，不支持就退回老方案。我个人在项目里的习惯是：新项目直接上，老项目先看用户占比再决定要不要用。

1.3 原子化CSS与布局工具的取舍

最近“原子性css”这个词热度很高，本质是把样式拆成单一职责的类，比如 .flex、.p-4、.text-center，在 HTML 里拼类名完成布局。这类方案的优势是写起来快、代码量少，团队里不容易出现命名冲突；劣势也明显，HTML 会变得很长，遇到复杂交互时追踪样式来源比较费劲。

我的态度是：原子化CSS适合组件化程度高、样式模式固定的中后台项目；不推荐在需要大量自定义视觉、动画细节的营销页或官网里强行使用。因为这类页面的设计高度定制，原子类很难覆盖，最后还得写一堆内联样式或自定义 CSS，反而更乱。选型时别只看“时髦”，要看项目里重复的样式模式有多少，重复多的才值得用原子化。

2. 文字与字体：从基础属性到渐变、竖排

2.1 字体族与font属性的坑

字体相关属性是每个页面都躲不开的，但越基础越容易踩坑。font-family 的取值顺序是有讲究的：先写西文字体，再写中文字体，最后写通用字体族。原因很简单，西文字体通常只包含拉丁字符，放到前面能优先匹配英文和数字，中文则落到后面的中文字体上。一个实践中比较稳的写法：

css复制body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pin