Box-sizing:小身材,大拳头!

国庆回来,很久没写博客了。一来是自己毫无时间,二是最近开发任务特别紧,三是节后综合症,脑子一片空白没有找到写作的原材料。今天,在加完班回来的22点,忙里偷闲,分享一下最近学到的一个小知识点如题。标题的灵感来自于暴雪的一款卡牌游戏:炉石传说中的一张卡牌的上场台词,觉得很契合本篇博客要表达的含义,身材小小,拳头大大呢!

盒子模型

Box-sizing属性一直比较陌生,在楼主平时的开发过程中一直都没机会见识,以前遇到应该用它解决的问题,很无耻的用了其他偷工减料,拿驴凑马的招来完成。后来才通过网上资料查到,原来它是设置box模型的计算方式的一种属性。说到box模型,了解w3c的同学一定不会陌生,它对盒子模型的定义如下:把每一个网页中的元素都看作是一个盒子,这个盒子有边框(border),有内容(content),有和在其他外面的盒子的间距(margin),有和在其内盒子的边距(padding)。它的高度和宽度,取决于它的内容和边框以及内边距的总和。在浏览器中,通过开发者工具,我们可以很容易地看到一个元素的盒子模型:

从上图可以看到,这个元素的宽和高分别是100px和100px。查看css代码,我们也可以看到它的width和height分别为100px和100px。到此为止,一切都很简单,没有问题。但是,如果我们接下来给它设置一个border呢?那么他的宽和高是多少呢?

通过查看元素,我们发现,这个元素虽然设置了100px的宽度和100px的高度,但实际上,在添加了内边距和边框后,它的宽度和高度变成了104px和104px;所以,元素实际的宽度和高度是在设置的width和height属性后加上padding和border的宽度和高度的。虽然只是一个小小的知识点,但常常会给我们造成一些麻烦。

小问题,大麻烦

来看一个经常遇到的切换导航。在手机端经常的设计中经常可以遇到此问题,顶部的tab切换标签。设计给的标注是左右对半分,并且拥有各自的边框,然后自由伸缩和切换。像下面那样。

一开始,你会感觉这很容易,因为无非是两个宽度为50%的div并排排列了。但是开始做的时候,你才会知道被设计师的边框坑了。因为如果你设置了width为50%,那么两个div是100%,除此之外还有两个div的左右边框的长度是没地方放置的!也就是说,当你把它们并排放置在一起的时候,实际上它们总宽度是100% + 4px!,多出了4个px,这导致了右边的box会掉下去(如果你用的float)。如果你用box布局,在使用了flex自由延伸后属性(请见我之前的博客)不会出现这个情况,但如果你还不会box布局,而又希望简单解决此问题(尤其是在考虑padding的固定填充距离后box布局也无法完美解决),那么是时候该学习box-sizing了(只需要1000ms)。

box-sizing:

box-sizing是css3中出现的属性,它允许你设置或检索对象的盒模型组成模式,通过修改属性的值对盒子模型的概念做设置。我们知道,标准的盒子模型的宽是content+borderwidth+padding。box-sizing属性的值中有一个就是解释标准模型的值,它是默认的content-box,一般情况下,我们不使用它。我们使用的是它的其他值,比如:border-box,含义是将盒子的border和padding计算到设置的width中,而不是实际宽度中。所以,如果你设置width为100px,而border为1px的时候,盒子的实际大小仍旧是100px而不是102px。用这个属性,我们就可以完美地解决上面遇到的难题了:只需要在给两个div的css上写下box-sizing:border-box就可以了,保证两个div等宽,拥有1px长度,至于它们的框度是不是50%,你可以喊设计师自己量。除了以上两个值外,box-sizing还有一个padding-box值,顾名思义,就是把内边距计算在设置的框度内,而border是不计算的。

兼容性

box-sizing 目前被大多数浏览器支持, 但IE家族只有IE8版本以上才支持,虽然现代浏览器支持box-sizing,但有些浏览器还是需要加上自己的前缀,Mozilla需要加上-moz-,Webkit内核需要加上-webkit-,Presto内核-o-,IE8-ms-,所以box-sizing兼容浏览器时需要加上各自的前缀。当然,对于需要在i8以下的浏览器中解决上面提到过的tab排列问题,你是不需要这个属性的,因为它们对盒子模型的解释默认值就是border-box。这也是IE这个逐渐失势的顽固的老古董和w3c对盒子模型解释的差异。就像下面那张图一样:

结束语

对于box-sizing的属性从无知到了解,最后到运用自如,得益于老大的提点,简单的属性在实际生产中解决了很多布局问题。从根本上说还是自己见识和基础知识太少了,写这篇博客放到此处提醒自己,多学一点知识就多解决一点难题。

1 1 收藏 评论

可能感兴趣的话题



直接登录
跳到底部
返回顶部