浏览器CSS盒子模型理解

盒子模型Box model是分为两种

第一种是W3C的标准模型,另一种是IE的传统模型(ie6及以下)
传统型就是盒子的大小不变,padding及border的大小会压缩盒子里内容的空间。

如:div大小为200,如果padding=10,则盒内img大小为190;

标准型就是盒子里内容的空间大小不变,padding及border的大小会增加盒子的大小。

如:div大小为200,如果padding=10,则盒内img不变为200,盒子大小变为200+2*10。
IE7以上及其他现代浏览器默认为W3C的标准模型。

因此如果ie7以上使用默认的W3C的标准模型则不需要处理兼容问题。但是缺点时容易打乱布局。

例如:一开始设计子元素宽度加起来刚好与父元素的是相等,

那么我们现在来变动一下,如果根据设计需要,每个块中内容都离边缘有10px的距离。就会讲原来好的布局打乱。

因此就布局方面来讲,传统模型更适合,因为不会改变盒子大小。
现在需要引入CSS3的Box-sizing属性来改变盒模型。

box-sizing : content-box || border-box || inherit

取值说明

1、content-box:此值为其默认值,其让元素维持W3C的标准Box Model

2、border-box:此值让元素维持IE传统的Box Model(IE6以下版本)
box-sizing在这两方面的运用:

一、box-sizing拯救我们的布局

通过box-sizing:border-box改变了Box Model后解决上面提到的打乱布局的问题

二、Box-sizing统一form元素风格
注意:IE6和IE7不支持,如果为了达到一致的效果,需要写CSS Hack,改变宽度高度

欢迎分享本文,转载请保留出处:前端ABC » 浏览器CSS盒子模型理解

赞 (2)
分享到:更多 ()

发表评论 0