转载

Box-sizing：小身材，大拳头！

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

盒子模型

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

Box-sizing：小身材，大拳头！

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

Box-sizing：小身材，大拳头！

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

小问题，大麻烦

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

Box-sizing：小身材，大拳头！

一开始，你会感觉这很容易，因为无非是两个宽度为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：小身材，大拳头！