扯一下似乎被遗忘的盒模型

前段时间为了组里在扩充人员，在面试的过程中有过几次扯到“盒模型”这个东西。对于“盒模型”以前是经常提到，现在被CSS3的风头给盖下去了，已经没多少人去讲“盒模型”，也导致了很多了现在根本不知道什么是盒模型。

本来呢，我想从头跟大家一起温习一下盒模型，结果自己做了一些demo以及翻阅总结了一些资料之后，放弃了这个想法。从最简单的方面来说，盒模型就是下面这个图的东西，大家在浏览器的开发者工具中都可以见到。

那我还说什么呢，好像真没什么说的，在w3c网站上也有介绍，上面这张图就是从w3c上拿的，地址是 http://www.w3.org/TR/CSS2/box.html。

在IE浏览器中，尤其是IE6，如果一个不小心你就有可能会触发一个叫quirks模式，导致盒子计算不对，然后又不能margin:0 auto;居中。怎么触发这个quirks模式呢，主要就是doctype文档声明不是在第一行（前面有其他字符），那就触发了。不过想想，现在XP都让微软给退下了，IE6还有多少呢。

接着就是要提到的一点，盒模型的计算方式，标准方式和quirks模式是不同的，不知道又想知道的同学请问谷哥或者度娘吧，记得几年前我那本破书上也又提到，还做了一些测试。

扯远了，盒模型大概的情况就是这样。然后现在CSS3的到来，引入了一个box-sizing，这个属性又三个属性值content-box、padding-box、border-box，对于这三个属性值，FF都是支持的，表现效果也稍有不同，大家可以看后面我给出的demo效果，也可以自己写代码测试，这里我只是提一下而已。

最后要提的是，微软真的很厉害，现在大家用的box-sizing: border-box;其实就是IE的quirks模式啊～

几个demo地址：

• http://www.linxz.de/demo/box%20model/box%20model.html
• http://www.linxz.de/demo/box%20model/box%20model%20[padding100].html
• http://www.linxz.de/demo/box%20model/box%20model%20[quirks].html
• http://www.linxz.de/demo/box%20model/box%20model%20[quirks][padding100].html
• http://www.linxz.de/demo/box%20model/box-sizing%20[border-box].html
• http://www.linxz.de/demo/box%20model/box-sizing%20[content-box].html
• http://www.linxz.de/demo/box%20model/box-sizing%20[padding-box].html

demo就这几个，具体的效果就不一一罗列，IE呢如果支持box-sizing的话效果应该是有的，如果不支持那就肯定无视了，采用标准模式，因为代码第一行是采用标准的doctype声明。

需要说明的是，box-sizing: padding-box;在PC端FF里测试过是OK的，其他效果又兴趣的同学请自测。

网络上一点点的参考资料

这些资料在谷哥上搜索box model会出来很多，我就随便取了排在前面的几个，又兴趣的可以看看，看不懂的请找度娘来协助翻译。

• http://www.w3.org/TR/CSS2/box.html
• https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
• http://css-tricks.com/the-css-box-model/
• http://css-tricks.com/box-sizing/
• http://quirksmode.org/css/user-interface/boxsizing.html

最后

盒模型虽然现在很少遇到quirks模式，不过在IE10之类浏览器中还是可以选择相对应的文档模式的，稍微了解一下也总是可以的。就算不去了解这个，那就知道一下box-sizing这个也可以。

很不负责的废话完毕，发觉现在真的没有以前那股冲劲了，看着博客上好久没更新跟技术有关的东西，又怕对不起这个易联主机和linxz.de域名，就稍微折腾一点吧。

五花肉妹子说，这个博客要更新啊，所以我就把前几天的东西搬到这里来了，不知道会不会被人喷~！好怕~！