盒模型

Box Model

样式与 CSS也叫：CSS 盒模型、盒子模型、box-sizing

一句话：浏览器把每个元素都看成一个矩形盒子，由内到外依次是内容、内边距、边框和外边距四层。

详细解释

页面上的每个元素都是一个盒子：最里面是内容（content），外面一圈是内边距（padding），再外面是边框（border），最外面是外边距（margin）。在开发者工具里选中元素，能看到这四层的示意图和具体数值。

新手最常踩的坑是宽度计算：默认情况下 width: 200px 只算内容，再加 20px 内边距和 1px 边框，元素实际占 242px，排版就被撑破了。写上 box-sizing: border-box 后，width 包含内边距和边框，更符合直觉，现在大多数项目会给所有元素统一加上。

元素之间距离不对、宽度超出容器时，先打开开发者工具看盒模型。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

卡片宽度设为 300px，加了内边距后就超出容器了。请给全局加上 box-sizing: border-box，让宽度包含内边距和边框；卡片内边距 16px、1px 浅灰边框，卡片之间用 16px 的间距隔开。