padding、border会把div撑大的解决方法

所有HTML元素都可以看作是一个个“盒子”，这应该是前端入门时最基础也最绕不开的概念了。CSS盒模型本质上就是给这些盒子定了一套封装规则——边距、边框、填充，以及实际内容。正是这套规则决定了元素在页面上占据的真实空间，尤其是当你给一个div同时设置了padding和border之后，它最终撑出来的实际宽度可不是你写死的那个固定值，而是固定值加上边距和边框的总和。

盒子模型的组成

Margin（外边距） — 清除边框以外的区域，透明不可见。

Border（边框） — 围绕在内边距和内容之外的边界线。

Padding（内边距） — 清除内容周围的区域，也是透明的。

Content（内容） — 盒子的核心，显示文本或图像的地方。

CSS里的每一个元素都可以用这套模型来解析。开发时，一个元素的最终样式表现，正是由这四个部分的属性共同决定：width、height、padding、border、margin。不过麻烦的地方在于，不同浏览器对“宽度到底包不包括padding和border”的理解并不统一，于是就有了标准盒子模型与怪异盒子模型之分。

box-sizing 下的盒子模型

语法很简单：box-sizing: content-box | border-box | inherit;

这个属性直接影响浏览器如何计算元素的最终宽高：

（1）当 box-sizing 的值为 content-box 时，CSS 中设置的 width 只包含 content 区域的宽度。此时的表现和标准盒子模型完全一致——padding 和 border 都会额外撑大元素。

（2）当 box-sizing 的值为 border-box 时，width 包含的是 content + padding + border 的总宽度。此时的表现就和怪异盒子模型一致了——你写多少宽度，最终占位就是多少，padding 和 border 从内部“挤”掉 content 的空间。

说白了，box-sizing 就是给了开发者一个开关，让你能主动控制浏览器到底采用哪种模型来渲染。想省心？推荐直接上 border-box，几乎所有现代项目都在这么干。

.box {
  box-sizing: border-box;
  padding   : 0 20px;
  width     : 780px;
  height    : 355px;
  background: #f2f1ef;
}

calc() 的运用

知道总宽度是 100%，在这个基础上减去 border 的宽度（5px × 2 = 10px），再减去 padding 的宽度（10px × 2 = 20px），即 100% - (10px + 5px) × 2 = 30px，最终得到的值就是 div.box 的实际 width：

.box {
  background: #f60;
  height: 50px;
  padding: 10px;
  border: 5px solid green;
  width: 90%; /* 写给不支持 calc() 的浏览器做降级 */
  width: -moz-calc(100% - (10px + 5px) * 2);
  width: -webkit-calc(100% - (10px + 5px) * 2);
  width: calc(100% - (10px + 5px) * 2);
}

这里 calc() 的优势一目了然：你不需要手动算死一个固定像素值，直接用百分比和绝对值混合运算，浏览器会自动帮你算好。配合 border-box 使用更是如虎添翼——布局公式里的坑位，基本都被填平了。