根本原因是默认box-sizing: content-box，width: 100%仅指内容区宽度，padding和border会额外叠加导致溢出；解决方案是使用box-sizing: border-box，推荐全局设置, ::before, *::after { box-sizing: border-box; }。

为什么width: 100% + padding会撑破父容器

不是写错了，是浏览器默认用box-sizing: content-box——此时width: 100%只管内容区宽度，padding和border会额外加在它外面。比如父容器宽300px、子元素设了width: 100% + padding: 12px，实际总宽就是300px + 24px = 324px，必然溢出。

怎么让width: 100%真正“占满”父容器

加box-sizing: border-box，让width包含padding和border在内，内容区自动收缩。这是最直接、兼容性最好（IE8+）的解法。

• 单个修复：.input-field { width: 100%; padding: 12px; box-sizing: border-box; }
• 全局重置（推荐）：* { box-sizing: border-box; }不够，必须写成* , *::before, *::after { box-sizing: border-box; }，否则伪元素可能漏掉
• 老项目不敢动全局？优先加在高频出问题的地方：input、textarea、select、.card-content、.form-group > *

border-box生效了但还是溢出？检查这几个点

box-sizing: border-box对margin完全无效——它只管content/padding/border的尺寸归属。所以如果溢出是因为margin: 20px，加了border-box也没用。

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

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

下载

• margin导致的溢出：优先把padding移到父元素上，或改用flex的gap，或用calc(100% - 40px)手动扣减
• 绝对定位元素（position: absolute）的width: 100%是按父元素的padding box计算的，不是content box，这点容易误判尺寸
• table和td默认无视box-sizing，必须显式声明才生效
• 微信X5内核（v3.7以下）对*::before、*::after的重置支持不稳定，可兜底加一句html { box-sizing: border-box; }

改完不验证等于没改

别只信代码写了，要进浏览器开发者工具看「Computed」面板，确认目标元素的box-sizing值确实是border-box。常见失效原因：

• 其他样式规则优先级更高，覆盖了你的box-sizing
• CSS-in-JS库（如styled-components）SSR注入顺序错乱，首屏闪动，重置样式得提至最顶部
• 某些框架（如Bootstrap）自己重写了box-sizing，但没包含伪元素，导致部分组件仍溢出

尤其在混合了rem/vw和固定像素padding的响应式项目里，小屏下溢出往往更隐蔽。

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