浏览器默认 box-sizing: content-box，width 仅控制内容区；需显式设置 border-box 并覆盖伪元素、第三方组件；flex 子项还需 min-width: 0；max/min-width 等尺寸属性同样受 box-sizing 影响；内容溢出（如图片、文本）需单独处理。

因为浏览器默认用 box-sizing: content-box，你写的 width 只管内容区，padding 和 border 是额外加在外面的——这不是写错了，是规范行为。

box-sizing: border-box 必须显式生效，不能只靠通配符

很多人写了 * { box-sizing: border-box; } 就以为万事大吉，但 ::before 和 ::after 伪元素默认仍是 content-box，它们一插入就可能悄悄撑破布局。必须连带覆盖：

• * { box-sizing: border-box; }
• *::before, *::after { box-sizing: border-box; }
• 第三方 UI 组件（比如 .ant-input）常显式设回 content-box，得单独加固：input, textarea, button { box-sizing: border-box; }
• 打开 DevTools →「Computed」面板，直接查目标元素的 box-sizing 值，别只看 Styles 面板有没有那行代码

flex 子项光有 border-box 还不够，min-width: 0 得跟上

哪怕 box-sizing 已确认为 border-box，input、img 或含长文本的子项仍可能拒绝收缩，根源是它们默认带 min-width: auto。Flex 容器不会强制压缩它，结果 padding 一加，照样溢出。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须给 Flex 容器的**直接子元素**加 min-width: 0
• input、textarea 等替换元素自身也得加 min-width: 0，否则浏览器 UA 样式会维持最小宽度（如 Chrome 的 ~13ch）
• 如果子项内部还有嵌套 Flex，内层容器也得单独加 min-width: 0

max-width / min-width 同样受 box-sizing 控制，漏掉就白改

box-sizing: border-box 不只影响 width，所有涉及尺寸的属性都走同一套计算逻辑。很多人只改了 width，却忘了 max-width: 90% 或 min-width: 320px 也会被 padding 推爆。

• 检查所有尺寸相关声明：width、max-width、min-width、height、max-height
• 移动端尤其危险：width: 100vw + padding: 16px = 实际宽度 > 视口，必然触发横向滚动条；应改用 width: 100% 并确保父级有明确 content width
• 安全写法示例：width: 100%; max-width: 500px; padding: 16px; box-sizing: border-box;

真正容易被忽略的，是 padding 本身不溢出，但里面的内容会——比如没设 max-width: 100% 的 img、没配 overflow: hidden 的 white-space: nowrap 文本、或没加 gap 却乱用 margin 的 Flex 子项。盒模型只是第一道防线，内容行为才是最终决定因素。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！