在CSS中,盒模型是用来描述HTML元素在页面上所占用的空间的。但是在CSS中又存在着怪异盒模型,它是如何产生的呢?.box { width: 100px; height: 100px; paddin
在CSS中,盒模型是用来描述HTML元素在页面上所占用的空间的。但是在CSS中又存在着怪异盒模型,它是如何产生的呢?
.box { width: 100px; height: 100px; padding: 20px; border: 10px solid black; }
在上面这段CSS代码中,我们为一个元素添加了宽高为100px,padding为20px和边框为10px的样式。这个元素所占用的空间是多少呢?
根据标准盒模型,这个元素所占用的空间应该是宽度为100+20*2+10*2=160px,高度也是同样的计算公式。也就是说,padding和border都是算在元素的宽高中的。
但是在IE6及其以下的版本中,存在着怪异盒模型,它计算元素所占用的空间的方式与标准盒模型不同。在怪异盒模型中,元素的宽高不包括padding和border,所以这个元素所占用的空间只有100px。
产生怪异盒模型的原因是因为IE一开始的设计并没有考虑到padding和border的计算方式,后来为了向后兼容,就在IE6及其以下的版本中保留了这种计算方式。虽然现在IE已经基本上不再使用怪异盒模型,但是为了兼容旧版本的浏览器,我们还是需要了解它。
粉丝
0
关注
0
收藏
0