为什么border-sizing: border-box不生效？div宽度动画无法小于内边距值

1. 先检查属性拼写：你提问中提到的border-sizing: border-box是拼写错误，正确属性名为box-sizing: border-box，如果实际代码写的是前者，属性本身就不会生效。
2. 就算正确设置了box-sizing: border-box，也没办法让元素宽度小于padding总和：border-box的作用是将padding、border计算在你声明的width值内，但是元素的内容区宽度最小只能为0，当你声明的width值小于「左右padding+左右border宽度之和」时，元素实际渲染宽度会强制等于「左右padding+左右border宽度之和」。你当前设置了左右padding各10px，总和20px，所以就算width设为2px，实际渲染宽度最少也是20px，自然没办法实现从0开始的动画。

• 方案1：同步动画padding值
  初始状态将padding设为0，动画过程中同步将padding和width过渡到目标值，即可实现从0开始的展开效果。
• 方案2：使用transform缩放实现
  放弃动画width属性，改为动画transform: scaleX()，初始设置transform: scaleX(0); transform-origin: left;，动画结束时设为transform: scaleX(1)，这种方式性能更高，不会触发页面重排，且不需要调整padding属性。
• 方案3：嵌套父容器做裁剪
  给当前div新增一个父容器，父容器设置overflow: hidden，初始宽度为0，只需要动画父容器的width到目标值即可，子元素的padding、width等原有属性不需要做任何修改。

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