从活动卡片认识盒模型
从“好看”到“放得下、读得清”
为黄梅戏分享会做活动卡片，先看看下面三个实际问题。
① 文字贴边
A：没有内部留白
黄梅戏分享会 · A208
B：增加内部留白
黄梅戏分享会 · A208
文字离边框太近，应该调整边框里面，还是外面的空白？
展开示例分析
要让文字与边框拉开距离，应增加内边距 padding。B 设置了 padding: 16px;，四周各留出 16px。
margin 是边框外侧的外边距，用来调整卡片与外部元素的间距，不能代替卡片内部的留白。
两张卡片外宽相同，都使用 border-box；这个设置的含义会在后面解释。
② 卡片超出预留位置
虚线框：预留宽度 300px
另外设置了内边距和边框。
宽度写了 300px，边框外沿就一定是 300px 吗？为什么这里超出了？
展开示例分析
不一定。本例设置 box-sizing: content-box;，所以 width: 300px; 只规定内容区的宽度。
左右内边距各 20px，左右边框各 5px，边框外沿的宽度为：
300 + 20 × 2 + 5 × 2 = 350px
因此超出 50px；这里未计入外边距。后面再看 border-box 怎样让内边距和边框计入这 300px。
③ 图片铺满，人物却不全
完整原图（2∶1）
窄框
同图不同框，观察两侧人物。
图片铺满卡片后，为什么人物或图片中的文字可能被裁掉？
展开示例分析
窄框采用 background-size: cover;：图片保持宽高比例，缩放到足以铺满整个区域。
原图宽高比为 2∶1，窄框却是竖向的；铺满高度后，左右会超出显示区域。本例居中显示，所以两侧人物各有一部分不可见。
只是显示范围被裁切，原图片文件并未改变。后面会对比 contain：完整显示图片，但可能留白。
本课先认识内容区、内边距、边框和外边距，再解释卡片尺寸与背景显示。