我们经常会遇到一个父级的div有1px的边框而且还需要100%的宽度,这个时候在火狐和chrome与一些新的ie浏览器会出现超出的现象!
我们也遇到一个ul里边4个li,每个li需要给个边框和padding,这时候我们最快的方法是每个li的width=‘25%’,但是实际出来的效果确实把ul撑开了
如上两个简单的实际情况我想大家都遇到过,我们都希望我们给的宽包含border和padding这两个属性,今天我们能够实现了,box-sizing这个属性能让我们心想事成,随心所欲!下面我和大家分享下box-sizing这个属性:
说到 IE 的 bug,在 IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器不同,将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反,是不包括border和padding的。
在我们开发的过程中会发现,有时候,如果对页面中的大区域进行设置时,将border、padding计算到width和height之内,反而更灵活。但W3C的 CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题,css3中引入了一个新的属性:box-sizing,它具有“content-box”和”border-box“两个值。
box-sizing:content-box
当我们设置 box-sizing: content-box; 时,浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准,当它定义width和height时,它的宽度不包括border和padding。
box-sizing:border-box
当我们设置box-sizing: border-box; 时,浏览器对盒模型的解释与 IE6之前的版本相同,当它定义width和height时,border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。
代码如下 | 复制代码 |
width:200px width:200px |
Firefox 请使用 -moz-box-sizing
Safari / WebKit 请使用 -webkit-box-sizing
Opera 直接用 box-sizing 即可