浅谈CSS3中box-sizing属性在前端布局中的应用

王小优
王小优
王小优
231
文章
0
评论
2015年10月22日 评论 2,073 1668字阅读5分33秒

目前浏览器广泛支持HTML5CSS3,有很多新的CSS3属性在前端布局中有很大的使用价值,今天王小优深入浅出,跟大家聊聊box-sizing这一属性在前端布局中的应用及价值。

在我们说box-sizing之前,我们先了解下前端经典的“盒子模型”,聪明的程序猿们巧妙的用盒子模型这一形象将枯燥的css代码表示出来:想象一个盒子,它有:外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性;这些加起来就是一个完整的元素。

浅谈CSS3中box-sizing属性在前端布局中的应用

但盒子模型又分为标准W3C盒模型和IE盒模型。那这有什么区别呢?见下图所示:

浅谈CSS3中box-sizing属性在前端布局中的应用

从上图可以看到标准W3C盒子模型的范围包括margin、border、padding、content,其中内容content的宽度不包括padding、margin、border等部分,也就是说这个盒模型实际占用页面的宽高是内容宽高加上其他部分的宽高,即:总宽度=margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

而在IE盒子模型中,内容content的宽度包含了border和pading,这个盒模型实际占用页面的宽高是内容宽高加上外边距的宽高,即总宽度=margin-left + width + margin-right

可能说到这里,你还一头雾水,不知我说这个有啥用,不要着急。

在目前流行前端布局中,前端工程师默认的页面布局是采用标准的W3C盒子模型(需要在页面HTML声明处加上doctype声明),告知浏览器按照标准盒模型的方式进行渲染页面。

这个时候会出现一个问题,就是元素的宽高包含了实际内容的宽高加上内外边距以及边框的宽高,如果我们想调一下内边距padding或者边框border的尺寸,那么整个元素的实际尺寸就会发生变化,随着而来的就是布局乱掉,可谓是牵一发而动全身。

CSS3改变了这一现状,在CSS3中引入了box-sizing属性, 它可以允许改变默认的CSS盒模型对元素宽高的计算方式。

box-sizing简介

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;这一属性之后,你页面所有元素的宽高就会随着你设置的width、height而固定,无论你再怎么折腾padding、border,整个元素的尺寸是不会有任何变化的,只是实际内容content的尺寸会随着被压缩拉伸。这样的整体布局就稳定了许多,不再会因为某一个元素的边框微调而发生崩塌。

浅谈CSS3中box-sizing属性在前端布局中的应用

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

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

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

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
利用animation动画实现呼吸灯效果 CSS3

利用animation动画实现呼吸灯效果

阿里云看到其Banner上的一个呼吸灯效果,利用animation来实现的动画效果。 在阿里云看到其Banner上的一个呼吸灯效果,感觉非常具有科技感,看了下源码,原来只是一个CSS3效果,利用ani...
用CSS3给按钮添加类似雷达扫光效果 CSS3

用CSS3给按钮添加类似雷达扫光效果

如今的Web前端技术层出不穷,大家所看的网页也从原来的简单刻板的风格逐步演变为绚丽多特效的“现代化”效果了,今天就用CSS3给一个按钮添加类似雷达扫光的效果。 如今的Web前端技术层出不穷,大家所看的...
纯CSS制作像素风史蒂芬·乔布斯 CSS

纯CSS制作像素风史蒂芬·乔布斯

都知道CSS3很强大,但你见过用几个标签加上纯CSS做的画么?下面就让我们看下用纯CSS画出来的乔布斯,太牛了! 先让我们看一下效果,虽然是像素风小人,但我们似乎还是能从人物的轮廓中隐约看出来这是苹果...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: