<p> 用 box-sizing: border-box 可使 width/height 包含 padding 和 border，避免尺寸失控；推荐全局重置 * {
box-sizing: border-box;}。</p>
怎么用 box-sizing: border-box 避免卡片尺寸失控
极简名片卡片最常翻车的地方，是明明设了 width: 300px，加上 padding 和 border 后实际宽得离谱。浏览器默认的 content-box 模式会让内边距和边框额外“撑开”盒子。
必须在卡片根元素（比如 .card）上写死：
box-sizing: border-box;- 所有后续的
width、height都包含padding和border，数值可预期 - 建议全局重置：
* {box-sizing: border-box;}，省得漏掉子元素
- 别只加在卡片上——如果里面用了
input或button，它们默认仍是content-box，不重置会错位
阴影怎么用 box-shadow 才不显脏、不压字
新手常把 box-shadow 调成浓黑 + 大扩散，结果卡片像蒙了层灰，文字也发虚。极简风格要的是“存在感弱但质感在”，关键在三个参数：偏移、模糊半径、颜色透明度。
推荐写法：
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);立即学习 “ 前端免费学习笔记（深入）”；
-
0 4px：只向下偏移，避免左右飘忽；4px是视觉锚点，太小没层次，太大像浮空 -
12px模糊值要配合偏移——偏移是4px，模糊就别超过16px，否则边缘溶化 -
rgba(0,0,0,0.08)是重点：透明度控制在0.06–0.12之间，比纯黑柔和，也比灰色更中性 - 别叠加多层阴影——
box-shadow: …… , ……看似高级，实则增加渲染负担，且易让卡片“发肿”
字体与行高怎么配才不“空”也不“挤”
极简不是留白越多越好。名片里姓名、职位、联系方式三类信息密度不同，靠统一 line-height 会出问题：姓名显得单薄，电话堆在一起又难扫读。
正确做法是分层控制：
.card h1 {line-height: 1.3;}<br>.card p {line-height: 1.6;}<br>.card .contact {line-height: 1.4;}-
h1用1.3：字号大，行高小点反而稳重；太高会割裂姓名与头像 / 装饰线 -
p（比如简介）用1.6：保证呼吸感，但不超过1.7，否则段落像散架 -
.contact这类紧凑信息用1.4：比正文紧，比标题松，视觉上自动归为“次要区块” - 所有行高都用无单位数值（如
1.4），避免继承时被父级font-size意外放大
响应式断点里最该盯住的其实是 padding
手机上看名片，常出现文字顶到边缘、图标被切掉——问题不在媒体查询没写，而在 padding 没随屏幕缩放动态调整。
别用固定像素值写内边距：
@media (max-width: 480px) {<br> .card { padding: 16px;}<br>}这样在小屏上依然太“满”。
- 改用相对单位：
padding: clamp(12px, 4vw, 24px);，在小屏取下限，大屏取上限，中间平滑过渡 - 如果不用
clamp()，至少分两档：padding: 12px（max-width: 480px）和padding: 24px（桌面） - 注意：
padding缩小时，font-size也要同步调小，否则文字会撑破容器——极简卡片的容错率比想象中低
极简不是删减完事，是每个 padding、每处 shadow、每一行 line-height 都得有明确意图。少一个像素的留白，可能就让整张卡片失去呼吸感。
