还是聊聊技术吧，这个纯粹。

1、前言

今日中秋，祝大伙中秋节快乐。但，有的阿里的小伙伴这个中秋就不肯定快乐了。想想我应该不会遇见这种事情的，一来不喜欢吃月饼；二来没什么人际交往，没有要送人月饼的需要；三来自己最怕麻烦，什么秒杀之类的好烦的，我根本就当没看到，安心码代码；四来我压根不会了解会有秒杀月饼这件事，我对这种事情的知道一直非常迟钝的。

本文内容偏理论，非实用技术，对于深入理解CSS的一些定义和设计非常有帮。本文有的定义假如你不了解说的的意思是，比如“盒尺寸”，你大可忽视之，并不影响对本文核心看法的理解。这类定义是需要不少积累，而且是一个完整体系里面的，所谓体系，就是以前往后是连贯下来的，而盒尺寸这个定义处于体系的中间，直接讲盒尺寸就像看电影直接从中间部分看起，一定会有的困惑，但因为本来就是让大伙看电影精华片段的，因此，无碍。

2、盒尺寸(Box dimensions)的4个盒子

盒尺寸由4个盒子组成，分别是content box,padding box,border box,margin box。这个和盒模型中的几个盒子其实是对应的。

content box写做content-box；
padding box写做padding-box；
border box写做border-box；
margin box写做margin-box。

这是他们在规范中的称呼，当规范落地到CSS语言层的时候，每一个盒子都起了一个对应的名字，如下：

然而，这不是最惨的，更惨的是margin-box在整个CSS世界中都被抛弃了，没错，到今天为止，CSS中没任何属性支持margin-box，比padding-box要惨的多，虽然padding-box在box-sizing属性中要被抛弃，但人家依旧遭到background-clip属性的喜爱。但margin-box完全就门可罗雀。

因此，理论上，box-sizing可以有这么些写法：

.box1 { box-sizing: content-box; }.box2 { box-sizing: padding-box; }.box3 { box-sizing: border-box; }.box4 { box-sizing: margin-box; }

理论美好，现实残酷，事实上，支持状况如下：

.box1 { box-sizing: content-box; } /* 默认值 */.box2 { box-sizing: padding-box; } /* FireFox过去支持 */.box3 { box-sizing: border-box; }  /* 全线支持 */.box4 { box-sizing: margin-box; }  /* 从未支持过 */

margin-box被无情的抛弃了，好惨！

于是，难免被人疑惑，同样都是盒子，为什么就margin-box不支持呢？

3、为什么box-sizing不支持margin-box？

网上有如此的说法，说margin在垂直方向有合并重叠特质，假如支持了margin-box，合并规则就要发生变更，会比较复杂。我对此看法不敢苟同，其实当下不少属性可以灭掉margin合并，多一个box-sizing又何妨，且浏览器产商达成不难的，跟之前的规范也不冲突。

其实，我觉得，不支持margin-box最大是什么原因本身就没价值！大家可以好好想想，一个元素，假如大家用width或height设定好了尺寸，请问，大家此时设置margin值，其offset尺寸会有变化吗？不会啊，亲们，100像素宽的元素，你再如何设置margin，它还是100像素宽。但，border和padding就不同了，100像素宽的元素，设置个20像素大小的padding值，offsetWidth就是140像素了，尺寸会变化。

你说，一个本身并不会改变元素尺寸的盒子，它有让box-sizing支持的道理吗？box-sizing就是改变尺寸用途规则的！

这就好比一个已经绝经的大妈，有必要给她吃避孕药吗？

margin只有在width为auto的时候可以改变元素的尺寸，但，此时元素已经处于流动性状况，根本就无需box-sizing。

所以，说来讲去就是margin-box本身就没价值。

还有一个可能是什么原因就是用场景需要。box-sizing的margin-box成效，若是IE10+浏览器，可以试一试flex布局，假如要兼容IE8+可以用“宽度离别”，或者特定场景下用“格式化宽度”来达成，也就是并非强需要。比如box-sizing:padding-box，就是由于用场景有限，就FireFox浏览器支持，并且是过去支持，从版本50开始也不支持了。

其实，我感觉不必舍弃，浏览器都要支持，就像background属性那样。成为套餐不挺好的。

4、为什么background-origin/background-clip不支持margin-box？

这个其实非常不错讲解，“margin的背景永远是透明的”这几个大字可是在规范写得清了解楚的！

The background style of the content, padding, and border areas of a box is specified by the ‘background’ property of the generating element.

Margin backgrounds are always transparent

.

倘若说，比如，background-clip支持margin-box，是否就意味着背景色背景图片之类的可以在margin-box这个盒子上显示，那岂不意味着“margin的背景不是透明的”！显然和规范冲突了，大家可以打我们的脸，但要想让规范打我们的脸，可能吗？

希望以上内容可以解决您的问题！
如有其他问题欢迎大家一起交流学习！