CSS 盒模型：卡片组件
css · beginner · 15-20 min · Step 1/6CSS 盒模型
每个 HTML 元素都是一个"盒子"，由 4 层组成：
┌─────────── margin ───────────┐
│ ┌──────── border ──────────┐ │
│ │ ┌───── padding ────────┐ │ │
│ │ │ │ │ │
│ │ │ content │ │ │
│ │ │ │ │ │
│ │ └──────────────────────┘ │ │
│ └──────────────────────────┘ │
└──────────────────────────────┘
box-sizing 属性
| 值 | 宽度计算 | 推荐？ |
|---|---|---|
| content-box (默认) | width = 内容宽度 | 不推荐 |
| border-box | width = 内容 + padding + border | 推荐 |
/* 全局设置 border-box — 现代 CSS 最佳实践 */
*, *::before, *::after {
box-sizing: border-box;
}
用border-box后，设置width: 200px就是最终宽度，不用再减去 padding 和 border。