css3的box-sizing详解
发表日期:2018-09-10 02:27:26   文章编辑:admin    浏览次数:134
 

box-sizing属性包括content-box(default),border-box。

1、content-box,border和padding不计算入width之内

2、border-box,border和padding计算入width之内,(竟然是IE盒子模型标准)

注意:ie8+浏览器支持content-box和border-box;

在我们使用了box-sizing:border-box;这一属性之后,你页面所有元素的宽高就会随着你设置的width、height而固定,无论你再怎么折腾padding、border,整个元素的尺寸是不会有任何变化的,只是实际内容content的尺寸会随着被压缩拉伸。这样的整体布局就稳定了许多,而不会因为某一个元素的边框微调而发生崩塌,特别是在我用到这个box-sizing参数后,在调整图片的时候往往会回行。


虽然IE在大家的眼里是一个奇葩的存在,而ie盒模型标准也跟w3c盒模型标准有出入,但笔者个人认为在盒模型上,ie盒模型更加合理化。因为常规的布局思维是我定好整体的宽高之后,里面元素的整体尺寸会确定下来,后面才是考虑这个元素的内边距以及边框,如果我已经确定好了大体的布局,再去微调边框而导致了整体布局的崩塌,这显然是不科学的,所以这也是我极力推崇前端布局使用box-sizing:border;的原因。

然而一个残酷的显示就是IE8 以下的浏览器对css3是不支持的,所以box-sizing:border;属性在ie8以下的浏览器中是无效的,这可能是影响此css元素流行的重大原因,不知道什么时候业内才能同仇敌忾,一起抵制IE8以下浏览器,还我们前端人员一片净土。

如果你的项目不需要考虑ie6/ie7的用户,那么请大胆的使用box-sizing:border;相信它会让你的前端布局灵活很多,记得在css reset(样式重置)的时候就加上它,一劳永逸....

如没特殊注明,文章均为博路网络原创,转载请注明来自https://www.boroad.net/news/changjianwenti/2018/0910/173.html