全回顾扫盲css之盒模型

最开始入门的时候,就知道什么是盒模型,因为整个网站都是一个一个的盒子摞起来的。这里涉及到的flow的模式(Normal Flow 和 Out of Flow)以及bfc的问题,稍后得一一写一下,这里先直说盒模型。

打开网页,随便找个dom元素,都能查看它的盒模型,可以看到它包含了margin、border、padding、content,以为这就是一切了么,细查查发现不是。

盒模型分两种,一个是w3c的盒模型,又称标准盒模型,另一个是ie盒模型。

区别就在于对width和height的理解不同。标准盒模型认为,height和(border与padding)是分开的,height只表示content的高度。而ie盒模型认为,高度应该包含content、padding和border。简单概括一下,

标准盒模型认为,height是content的,padding和border要向外扩展。而ie盒模型认为,height是content+padding+border的,所以设置height之后,添加padding和border都会向内扩展压缩content的height。

然后就涉及到了另外两个问题:

第一就是什么情况下会出现那种盒模型,第二就是怎么让浏览器在标准盒模型和ie盒模型下面切换。

对于第一个问题,我查阅之后发现,ie盒模型是在ie5及之前更早版本出现的,其他都是标准盒模型。对于现在大部分底线都在ie8的现状来看,貌似是看不见ie盒模型了,基本上不用考虑了。

那这个盒模型方式就直接放弃就得了白,还研究它作甚。我觉得如果不是css3新推出的box-sizing,这个ie盒模型可能真的永无天日,就这么被悄悄的忘了。

来看一下这个box-sizing。box-sizing: content-box|border-box|inherit;

content-box-->切换到标准盒模型,现代浏览器默认的就是标准盒模型

border-box-->切换到ie盒模型,当然,现在可能不应该这么称呼了,反正就是切换到了跟ie盒模型布局方式一样的模式

表达一下自己的看法。其实我是挺喜欢ie盒模型的方式的,宽度写好了,大家就都不要改了嘛,这样多好控制。w3c就是喜欢跟微软对着干。容我肤浅的觉得,新推出的box-sizing属性,就是觉得当时的ie盒模型其实是挺好的一个设计,并且大喊上一句shit。。。虽然跟我也没啥关系。。。

随机浏览