box-sizing 不支持 margin-box，只有当元素没
有水平 margin 时候，box-sizing 才能真正无计算，而“宽度分离”等策略则可以彻底解决
所有的宽度计算的问题
唯一离不开 box-sizing:border-box 的
就是原生普通文本框<input>和文本域<textarea>的 100%自适应父容器宽度。
拿文本域<textarea>举例，<textarea>为替换元素，替换元素的特性之一就是尺寸由
内部元素决定，且无论其 display 属性值是 inline 还是 block。这个特性很有意思，对于
非替换元素，如果其 display 属性值为 block，则会具有流动性，宽度由外部尺寸决定，但
是替换元素的宽度却不受 display 水平影响，因此，我们通过 CSS 修改<textarea>的
display 水平是无法让尺寸 100%自适应父容器的：
textarea {
display: block; /* 还是原来的尺寸 */
}
所以，我们只能通过 width 设定让<textarea>尺寸 100%自适应父容器。那么，问题就来了，
<textarea>是有 border 的，而且需要有一定的 padding 大小，否则输入的时候光标会顶
着边框，体验很不好。于是，width/border 和 padding 注定要共存，同时还要整体宽度 100%
自适应容器。如果不借助其他标签，肯定是无解的。
在浏览器还没支持 box-sizing 的年代，我们的做法有点儿类似于“宽度分离”，外面嵌
套<div>标签，模拟 border 和 padding，<textarea>作为子元素，border 和 padding
全部为 0，然后宽度 100%自适应父级<div>。
然而，这种模拟也有局限性，比如无法使用:focus 高亮父级的边框，
只能使用更复杂的嵌套加其他 CSS 技巧来模拟。
因此，说来说去，也就 box-sizing:border-box 才是根本解决之道！
有水平 margin 时候，box-sizing 才能真正无计算，而“宽度分离”等策略则可以彻底解决
所有的宽度计算的问题
唯一离不开 box-sizing:border-box 的
就是原生普通文本框<input>和文本域<textarea>的 100%自适应父容器宽度。
拿文本域<textarea>举例，<textarea>为替换元素，替换元素的特性之一就是尺寸由
内部元素决定，且无论其 display 属性值是 inline 还是 block。这个特性很有意思，对于
非替换元素，如果其 display 属性值为 block，则会具有流动性，宽度由外部尺寸决定，但
是替换元素的宽度却不受 display 水平影响，因此，我们通过 CSS 修改<textarea>的
display 水平是无法让尺寸 100%自适应父容器的：
textarea {
display: block; /* 还是原来的尺寸 */
}
所以，我们只能通过 width 设定让<textarea>尺寸 100%自适应父容器。那么，问题就来了，
<textarea>是有 border 的，而且需要有一定的 padding 大小，否则输入的时候光标会顶
着边框，体验很不好。于是，width/border 和 padding 注定要共存，同时还要整体宽度 100%
自适应容器。如果不借助其他标签，肯定是无解的。
在浏览器还没支持 box-sizing 的年代，我们的做法有点儿类似于“宽度分离”，外面嵌
套<div>标签，模拟 border 和 padding，<textarea>作为子元素，border 和 padding
全部为 0，然后宽度 100%自适应父级<div>。
然而，这种模拟也有局限性，比如无法使用:focus 高亮父级的边框，
只能使用更复杂的嵌套加其他 CSS 技巧来模拟。
因此，说来说去，也就 box-sizing:border-box 才是根本解决之道！
box-sizing 被发明出来最大的初衷应该是解决替换元素宽度自适应问题
以上载自：《css世界》一书