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的属性从无知到了解，最后到运用自如，得益于老大的提点，简单的属性在实际生产中解决了不少布局问题。从根本上说仍是本身见识和基础知识太少了，写这篇博客放到此处提醒本身，多学一点知识就多解决一点难题。