这个问题是开山之作,让我解决了很多前端的问题。
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。
content-box,border和padding不计算入width和height之内,浏览器默认也是这样
padding-box,padding计算入width内
border-box,border和padding计算入width之内,其实就是怪异模式了~
ie8+浏览器支持content-box和border-box;
ff则支持全部三个值。
案例
#a1 { width:500px; padding: 10px; border:1px solid #ee240f; }
问题:对于样式#a1,我们想让元素显示为宽度为500px,box-sizing=?
答案:box-sizing:border-box;