CSS的border能否向内延展，保持div总尺寸固定实现堆叠对齐？

完全可以实现，核心是修改CSS盒模型的计算规则即可。

问题原因 #

浏览器默认的元素盒模型为box-sizing: content-box，此时你设置的width/height仅指代内容区域的尺寸，边框、内边距都会在内容区域外额外叠加，所以你示例中添加了30px边框的盒子总宽度会变成100px + 30px*2 = 160px，自然和普通边框的盒子无法对齐。

实现方案 #

给盒子设置box-sizing: border-box属性，该规则会将边框、内边距都纳入你设定的宽高尺寸范围内计算，边框会向内延展挤压内容区，元素总尺寸始终和你设置的width/height保持一致。

修改后的示例代码如下：

.box {
  box-sizing: border-box; /* 新增这一行 */
  border-style: solid;
  border-color: green;
  width: 100px;
  height: 100px;
}

.thick {
  border-width: 30px;
}

<div class="box"></div>
<div class="box thick"></div>

修改后两个盒子的总宽高均为100px，堆叠排布时可以完全对齐。

通用开发最佳实践 #

你可以在全局样式中统一重置所有元素的盒模型，避免后续开发中反复调整对齐问题，常用重置代码如下：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

内容的提问来源于stack exchange，提问作者WoJ