&nbs p;
一、前言
今日中秋，祝大家中秋节快乐。但是，有些阿里的小伙伴这个中秋就不一定快乐了。想想我应该不会遇到这样的事情的，一来不喜欢吃月饼；二来没有什么人际交往，不存在要送人月饼的需求；三来自己最怕麻烦，什么秒杀之类的好烦的，我根本就当没看到，安心码代码；四来我压根不会知道会有秒杀月饼这件事，我对这类事情的知晓总是很迟钝的。
还是聊聊技术吧，这个纯粹。
本文内容偏理论，非实用技术，对于深入理解 CSS 的一些概念和设计很有帮助。本文有些概念如果你不 知道 说的 是什么 意思 ，比方说“盒 尺寸 ”，你大可忽略之，并 不影响 对本文核心观点的理解。这些概念是需要很多 积累 ，而且属于一个完整体系里面的，所谓体系，就是从前往后是连贯下来的，而盒尺寸这个概念处于体系的中间，直接讲盒尺寸就像看 电影 直接从中间部分看起，肯定会有些 困惑 ，但由于本来就是让大家看 电 影精华片段的，因此，无碍。
二、盒尺寸(Box dimensions)的4个 盒子
盒尺寸由4个盒子组成，分别是 content box , padding box , border box , m arg in box 。这个和 盒模型 中的几个盒子其实是对应的。
这是他们在规范中的称呼，当规范落地到CSS语言层的时候，每个盒子都起了一个对应的名字，如下：
content box 写做 content-box ；
padding box 写做 padding-box ；
border box 写做 border-box ；
mar gin box 写做 margin-box 。
因此，理论上， box -s izing 可以有这么些写法：
@H_ 126 _65@.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 在整个CSS世界中都被抛弃了，没错，至今为止，CSS中没有任何属性支持 margin-box ，比 padding-box 要惨的多，虽然 padding-box 在 box-sizing 属性中要被抛弃，但是人家依然受到 background-clip 属性的青睐。但是 margin-box 完全就无人问津。
于是，难免让人疑惑，同样都是盒子，为何就 margin-box 不支持呢？
三、为何box-sizing不支持margin-box？
网上有这样的说法，说margin在垂直 方向 有合并重叠特性，如果支持了 margin-box ，合并规则就要发生变更，会比较复杂。我对此观点不敢苟同，其实当下很多属性可以灭掉 margin 合并，多一个 box-sizing 又何妨，且浏览器产商实现不难的，跟之前的规范也不冲突。
其实，我个人认为，不支持 margin-box 最大的 原因 是本身就没有 价值 ！我们不妨好好想想，一个元素，如果我们使用 width 或h ei ght设定好了尺寸，请问，我们此时设置 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 属性那样。成为套餐不挺好的。
四、为何background-origin/background-clip不支持margin-box？
这个其实很好解释，“margin的背景 永远 是透明的”这几个大字可是在规范写得清清楚楚的！
The background style of the content, padding, and border areas of a box is s PE cified by the & # 8216;background’ PR operty of the generating element. Margin backgrounds are always transparent .
假如说，例如， background-clip 支持 margin-box ，是不是就意味着背景色背景图片之类的可以在 margin-box 这个盒子上显示，那岂不意味着“margin的背景不是透明的”！显然和规范冲突了，我们可以打自己的脸，但是要想让规范打自己的脸，可能吗？
五、结束语
虽然我不怎么喜欢吃月饼，但是我很喜欢吃糖！
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-聊聊CSS世界中的margin-box 全部内容，希望文章能够帮你解决 html5教程-聊聊CSS世界中的margin-box 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-聊聊CSS世界中的margin-box的详细内容...