在css中让padding和border不撑大固定宽高的容器，核心做法是将盒模型切换为`border-box`。只需在元素或全局样式中设置`box-sizing: border-box`，此时设置的`width`和`height`将包含内容、padding和border，从而保持容器尺寸不变。
box-sizing属性如何改变盒模型计算方式
默认情况下，CSS使用`content-box`模型，元素的总宽度等于`width`加上左右`padding`和左右`border`。当设置了`box-sizing: border-box`后，浏览器会将`width`属性解释为内容的可用空间，即总宽度减去padding和border后的剩余部分。这意味着无论padding和border增加多少，只要`width`设定值不变，容器的外框尺寸就固定不变。
/* 全局重置推荐写法 */
*, *::before, *::after {
box-sizing: border-box;
}
/* 针对特定容器的写法 */
.fixed-container {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid black;
/* 此时容器外框依然是 300x200 */
}
上述代码中，`.fixed-container`的可视区域被严格限制在300x200像素内。内部的`padding`会向内挤压内容区域，`border`也会占据内部空间，但不会导致父级布局或页面流发生位移。这是现代Web开发中最标准的解决方案。
不使用box-sizing时的替代布局策略
如果因兼容性问题无法修改`box-sizing`，可以通过负边距（Negative Margin）来抵消padding或border带来的尺寸扩张。这种方法通过手动调整布局偏移量，使元素在视觉上保持原有尺寸，但需要精确计算数值。
.legacy-container {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid black;
/* 原始总宽度: 300 + 40 + 10 = 350px */
/* 使用负margin抵消padding和border的扩张 */
margin-left: -25px; /* -(20px padding + 5px border) */
margin-top: -25px;
/* 同时需要调整内部内容定位以补偿padding */
position: relative;
left: 20px;
top: 20px;
}
这种方案较为繁琐且容易出错，特别是在响应式布局中。它要求开发者手动计算每个方向的padding和border总和，并反向应用负margin。虽然能实现视觉上的尺寸固定，但破坏了CSS盒模型的直观性，通常仅作为遗留系统的临时补丁。推荐使用第一种`box-sizing`方案，因为它语义清晰且维护成本低。
固定宽高容器在内容溢出时的行为表现
当启用`box-sizing: border-box`后，如果容器内的文本或子元素内容超过了计算出的剩余空间，默认行为是内容溢出容器边界。此时，容器的外框尺寸依然固定，但超出部分可能遮挡相邻元素或被裁剪，具体取决于`overflow`属性的设置。
.overflow-test {
width: 200px;
height: 100px;
box-sizing: border-box;
padding: 10px;
border: 2px solid red;
overflow: hidden; /* 可选：隐藏溢出内容 */
/* 或者 overflow: auto; 添加滚动条 */
}
在上述示例中，内容区域的实际可用高度仅为86px（100px总高 - 2px上边框 - 2px下边框 - 10px上padding - 10px下padding）。如果内容超过此高度，且未设置`overflow`，内容将溢出显示；若设置为`hidden`，则超出部分不可见；若设置为`auto`，则会出现滚动条。这一行为与盒模型类型无关，而是由`overflow`属性控制，但在`border-box`模式下，开发者能更准确地预测内容区域的实际大小。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
