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的屬性從無知到了解，最後到運用自如，得益於老大的提點，簡單的屬性在實際生產中解決了不少佈局問題。從根本上說仍是本身見識和基礎知識太少了，寫這篇博客放到此處提醒本身，多學一點知識就多解決一點難題。