其实这不是你的问题，是CSS默认的“盒模型规则”在搞鬼：默认情况下，div的宽高只算内容区，padding和border会额外叠加，相当于给盒子“套了层外套”，自然越撑越大。但解决这个问题，真的不用翻厚厚的手册——只需要1个关键属性、2个实用技巧，就能彻底搞定！
这篇文章就帮你把“div撑大”的坑填得明明白白：从「box-sizing: border-box」的正确用法（一键让宽高包含padding和border），到百分比布局时的“内减小技巧”，再到避免踩坑的细节（比如inline-block元素的默认间隙）……不管你是刚入门的前端新手，还是总在布局上栽跟头的“老司机”，跟着做就能立刻告别“盒子膨胀”的烦恼——5分钟学会，下次调布局再也不用怕div“偷偷变形”！
你有没有过这种崩溃时刻？好不容易把产品卡片的div宽高设成300px×200px，加了10px的内边距（padding）和2px的边框（border）后，卡片直接超出容器，和旁边的元素挤成一团——前半小时调的布局全乱了，盯着屏幕半天，心里骂骂咧咧：“这div怎么跟气球似的，一吹就胖？”
其实不是你手艺差，是CSS默认的“盒模型规则”在偷偷搞鬼——今天我就把这个坑的来龙去脉讲清楚，再给你3个亲测好用的解决方法，以后遇到div“膨胀”，直接照做，5分钟搞定。
为什么padding和border会让div“膨胀”？先搞懂默认的盒模型
要解决问题，得先搞明白“敌人”是谁——你以为div的宽高是“整个盒子的大小”，但CSS默认的content-box盒模型根本不是这么算的！
举个最直观的例子：你给div写了这样的代码：
.div-box {
width: 300px;
height: 200px;
padding: 10px; / 上下左右各10px内边距 /
border: 2px solid #000; / 2px的黑色边框 /
}
你以为这个div的实际宽度是300px？错！默认情况下，div的宽高只算“内容区”的大小——padding是“内容区和边框之间的空隙”，border是“边框本身的宽度”，这俩都会额外叠加在内容区的宽高上。
所以这个div的实际宽度是：内容区宽度（300px） + 左右padding（10×2=20px） + 左右border（2×2=4px）= 324px；实际高度是200+20+4=224px。就像你买了个标着“300px宽”的盒子，结果盒子外面还要包层泡沫（padding）和铁壳（border），整个盒子能不“胖”吗？
去年我帮朋友的美食博客调菜单卡片时，就踩过这个坑——他给卡片加了20px的padding，结果卡片直接把侧边栏挤没了。我一看代码，没改盒模型，当场笑出声：“这不就是典型的‘默认盒模型坑新人’吗？”
其实CSS里还有另一种盒模型，叫border-box——它把padding和border都算在你设置的宽高里！比如同样的代码，只要加一句box-sizing: border-box;，div的实际宽度就会老老实实保持300px——因为border-box会把“内容区+padding+border”的总宽度限制在你设置的width里。
用大白话讲：content-box是“先算内容区，再套padding和border”；border-box是“先定总大小，再把padding和border塞进去”。后者是不是更符合咱们的直觉？
3个超好用的解决方法，从此告别div“膨胀”
搞懂了原理，解决方法就简单了——以下3个方法，覆盖99%的布局场景，我自己做项目时天天用，亲测有效！
这是我最推荐的方法，没有之一——把所有元素的盒模型改成border-box，一次性解决所有padding和border的“膨胀”问题。
具体怎么做？在CSS文件的最开头加一句：
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
这里的代表“所有元素”，意思是让页面上的每一个元素都用border-box盒模型。后面加margin:0和padding:0，是为了清除浏览器的默认样式，避免额外的间隙干扰布局。
为什么说这是“一键搞定”？比如你之前的产品卡片，加了这句话后，不管你给div加多少padding和border，div的宽高都会严格按照你设置的数值来——比如div设width:300px，加10px padding和2px border，实际宽度还是300px，完美贴合容器！
我现在做任何项目，第一行代码都是这个——去年帮客户做电商网站时，他们的商品列表卡片总出问题，我加了这句话后，所有卡片瞬间整齐划一，客户当场说：“你这代码跟魔法似的！”
你可能会问：“那我要是想给某个元素用回content-box怎么办？”简单——给那个元素单独设置box-sizing: content-box;就行，比如：
.special-box {
box-sizing: content-box; / 这个元素用默认盒模型 /
}
有时候你会遇到旧项目——比如公司的老官网，之前用的是content-box，你要是全局改成border-box，怕之前的布局全乱了，这时候就需要“手动计算宽高”。
怎么算？记住这个公式：
内容区宽度 = 想要的实际宽度
内容区高度 = 想要的实际高度
举个例子：你想要div的实际宽度是300px，需要加10px padding（左右各10px）和2px border（左右各2px），那内容区宽度就是300
width:276px，这样加上padding和border后，实际宽度刚好是300px。 上个月我改公司旧官网时，就用了这个方法——官网的轮播图按钮总“膨胀”，我不想动全局盒模型，就手动算了按钮的宽高：按钮想要实际宽度80px，加15px padding（左右各15px）和1px border（左右各1px），内容区宽度就是80
width设为48px，结果完美解决问题！ 这个方法的缺点是“麻烦”——每次改padding或border都要重新计算，但胜在“安全”，不会影响旧布局。
就算你用了border-box，也有几个细节要注意，不然还是会踩坑——我 了3个最容易忽略的点，帮你绕开“二次踩坑”：
（1）inline-block元素的“隐形间隙”
你有没有发现，两个display: inline-block的div，加了padding后会挤在一起？其实不只是盒模型的问题——inline-block元素之间默认有4px左右的间隙（这是浏览器对inline元素的默认处理，比如两个span之间的空格）。
解决方法：给父元素加font-size: 0;，或者让元素浮动（float: left;），但要记得给父元素清除浮动（比如overflow: hidden;）。比如：
.parent-box {
font-size: 0; / 清除inline-block的间隙 /
}
.child-box {
display: inline-block;
width: 50%;
padding: 10px;
box-sizing: border-box;
font-size: 16px; / 恢复子元素的字体大小 /
}
（2）百分比布局的“溢出问题”
做响应式布局时，你可能会给div设width: 50%;（比如两列布局），加了padding后，实际宽度会超过50%，导致两列挤成一列。这时候用border-box就对了——它会把padding算在50%里面，保证div的实际宽度不超过50%。
比如我之前做的响应式博客，两列的div各设width: 50%;，加了10px padding，结果两列挤成一列，改成border-box后，瞬间恢复正常——这就是百分比布局下border-box的威力！
（3）表单元素的“特殊处理”
有些表单元素（比如input、textarea）的默认盒模型是border-box，但有些浏览器（比如IE）不是。所以最好给表单元素也单独设置border-box，避免兼容性问题：
input, textarea {
box-sizing: border-box;
}
最后再跟你唠句掏心窝子的话：前端布局的坑，80%都和盒模型有关——搞懂border-box，你就能避开90%的“div膨胀”问题。要是你现在正在踩坑，赶紧打开代码，加一句box-sizing: border-box;，绝对会让你发出“哇塞，原来这么简单”的感叹！
如果你按这些方法试了，欢迎在评论区告诉我效果——比如你之前踩过什么盒模型的坑？或者有什么更妙的解决方法？咱们互相唠唠，毕竟前端踩坑之路，有人陪才不孤单～
默认情况下div的宽高是怎么算的？
默认用的是content-box盒模型，div的宽高只算内容区的大小，padding是内容区和边框之间的空隙，border是边框本身的宽度，这俩都会额外叠加在内容区宽高上。比如你设div宽300px，加10px padding和2px border，实际宽度就是300+10×2+2×2=324px，自然就“膨胀”了。
box-sizing: border-box要怎么设置才能生效？
最简单的办法是在CSS最开头加一句通配符代码，让所有元素都用border-box盒模型。具体就是写 { box-sizing: border-box; margin: 0; padding: 0; }，这里的代表所有元素，后面的margin和padding是清除浏览器默认样式，避免额外间隙干扰。
这样设置后，不管你给div加多少padding和border，div的宽高都会严格按你设置的数值来，比如设width:300px，加10px padding和2px border，实际宽度还是300px，完美贴合容器。
inline-block的div加padding后挤在一起怎么办？
这其实是inline-block元素的“隐形间隙”搞的鬼，浏览器对inline元素默认会有4px左右的间隙。解决方法可以给父元素加font-size:0，这样间隙就没了，不过要记得给子元素恢复font-size，比如子元素设font-size:16px。
或者让元素浮动，比如给div加float:left，不过要记得给父元素清除浮动，比如加overflow:hidden，避免父元素高度坍塌。
百分比布局的div加padding会溢出容器吗？
用默认的content-box盒模型肯定会溢出，因为百分比宽度只算内容区，加padding后实际宽度会超过百分比。但如果用了border-box就不会，它会把padding算在百分比宽度里面，保证div的实际宽度不超过你设置的百分比。
比如两列布局各设width:50%，加10px padding，用border-box的话，div实际宽度还是50%，不会挤成一列，响应式布局里超好用。
表单元素比如input加padding会撑大吗？
有些浏览器比如IE，表单元素的默认盒模型不是border-box，所以加padding会撑大。为了避免兼容性问题，最好给表单元素单独设置box-sizing: border-box，比如写input, textarea { box-sizing: border-box; }，这样不管什么浏览器，表单元素的padding都不会撑大宽度。
