卡片容器需设为display: block或inline-block并配合box-sizing: border-box，避免margin折叠与padding撑宽；注意inline-block空白间隙、box-shadow顺序及inset位置；padding控内容内距，margin管外部间距；border-radius需配overflow: hidden。
卡片容器必须设为 display: block 或 inline-block 才能生效盒模型控制
很多人直接对 <div> 写 width 和 padding 却没效果，是因为默认是 display: inline（如 <span>），或父容器未触发 BFC 导致 margin 折叠。项目卡片应显式声明 display: block 或更常用的 display: inline-block（便于多卡片横向排列）。
关键点：
-
box-sizing: border-box必须加在卡片根元素上，否则padding会撑大总宽，导致响应式错乱 - 若用
inline-block，注意 HTML 换行符会产生 4px 左右空白间隙，可用font-size: 0在父容器中消除 - 避免对卡片直接设
float—— 容易引发清除问题，现代布局优先用flex或grid管理排列，盒模型只负责单卡内部结构
box-shadow 的四个长度值顺序不能错，且 inset 要写在最前
阴影不是“加一层贴图”，而是按 CSS 规范解析为：offset-x offset-y blur-radius spread-radius color。漏掉 spread-radius 会导致模糊变重、边缘发虚；误把 inset 放在颜色后会整个失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 基础浮层效果用：
box-shadow: 0 2px 8px rgba(0,0,0,0.1)（无spread，偏柔和） - 强调立体感可加正向
spread：box-shadow: 0 4px 12px 2px rgba(0,0,0,0.08) - 内凹按钮/选中态用
inset：box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)，注意inset必须紧挨box-shadow:后，不可换位 - 别用
text-shadow模拟卡片阴影——它只作用于文字，且无法控制方向与扩散
内外边距组合时，margin 和 padding 的语义分工要清晰
新手常把所有间距都堆在 padding 上，结果内容被顶出、点击热区变小，或与其他卡片 margin 叠加造成意外空隙。
正确分工：
-
padding控制「卡片内容到边框」的距离（比如图片和标题之间的留白） -
margin控制「卡片自身到其他元素」的距离（比如卡片与卡片之间、卡片与页面边缘之间） - 垂直方向慎用
margin-top：相邻块级元素的上下margin会合并，改用margin-bottom更可控 - 如果卡片带
border-radius，记得overflow: hidden防止图片或子元素圆角溢出
.project-card {
display: inline-block;
box-sizing: border-box;
width: 280px;
padding: 16px;
margin: 0 12px 24px;
border-radius: 8px;
background: #fff;
box-shadow: 0 4px 12px 2px rgba(0,0,0,0.08);
overflow: hidden;
}
真实项目里，阴影和盒模型只是基础骨架；内容层级（比如标题字重、图标对齐、hover 时 transform: translateY(-2px) 配合阴影加深）才是让用户觉得“有质感”的关键。这些细节不写死在初始 CSS 里，而靠后续状态类动态叠加。 
