成都IT培训学校

浏览器CSS盒子模型理解

2017-04-20 10:03 作者:admin 来源:前端网 浏览: 我要评论(条) 字号:

摘要:盒子模型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,改变宽度高度
顶一下
(0)
0%
踩一下
(0)
0%
标签:web前端学习资料CSS浏览器盒子模型
版权所有: 非特殊声明均为本站原创文章,转载请注明出处: 成都学前端开发网-web.ixueyun.com
订阅更新: 您可以通过RSS订阅我们的内容更新

当前栏目分类