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

林小志

前段时间为了组里在扩充人员,在面试的过程中有过几次扯到“盒模型”这个东西。对于“盒模型”以前是经常提到,现在被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-boxpadding-boxborder-box,对于这三个属性值,FF都是支持的,表现效果也稍有不同,大家可以看后面我给出的demo效果,也可以自己写代码测试,这里我只是提一下而已。

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

几个demo地址:

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

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

网络上一点点的参考资料

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

最后

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

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

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

阅读 7.1k

“查宿舍”……How To Make Love……
现在博客变专栏了……感觉专栏好像要写很专业的连载的感觉……好怕怕……写的都是很随意的东西,那就选择“转载...
avatar
林小志
《CSS那些事儿》作者、前端开发工程师
3.8k 声望
1.6k 粉丝
0 条评论
avatar
林小志
《CSS那些事儿》作者、前端开发工程师
3.8k 声望
1.6k 粉丝
文章目录
宣传栏