女屌絲又來為你分享前端技術雞湯啦！上一篇，簡單的分享了float的使用以及注意事項，這一次給你分享點什麼呢？？作為前端開發工程師，你覺得你還必須掌握的是什麼呢？是不是想到了-盒子模型。對，就是它，這可謂是布局中的核心。通過上一篇我們認識了float，它能幫我們改變元素性質，能幫助我們讓元素并排顯示并且還能左右布局，那這就可以了嗎？答案，是No！No！No！我們還需要掌握盒子模型的使用。你的布局穩不穩，它可是起到關鍵作用。那麼下面我們就一起來看看這個比較讓人垂涎欲滴的技術吧。
我們先來簡單認識一下，什麼是盒子模型？
說到盒子模型，那我們可以看到其中兩個關鍵字“盒子”。日常生活中，盒子的作用是什麼？是不是用來盛放東西，會根據要盛放東西的多少選擇适合尺寸的盒子。那我們會将每個盒子放到指定的位置，每個盒子之間整齊堆疊或排列在一起。那麼我們把這種情況放到前端頁面中去思考，是不是我們的頁面布局中也可以這樣。把網頁中零散元素内容，集中放在某個盒子中，然後将這些盒子整齊排列堆疊起來，這樣一個整齊的頁面是不是就可以實作了呢？比如看圖1，這是我學習過程中模仿小米官網做的商城首頁部分效果展示。
圖1：喜科堂頁面
從頁面圖檔可以看出，我們可以把這四部分劃分成四個子產品，而這四個子產品可以看成是四個大小不同的盒子，将性質相同的元素放在對應的盒子裡邊，就可以呈現出我們想要的布局，這樣看起來是不是會舒服點。
那麼通過盒子模型，就可以幫助我們實作這樣的布局，讓我們的頁面看起來整齊，布局更加的穩當。
那麼要想利用好盒子模型，我們就得清楚的認識什麼是盒子模型。
首先，看一下盒子模型的概念，在HTML中，所有的HTML元素都可以看作盒子，在CSS中，“box model”是用來設計和布局時使用。CSS盒子模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距、邊框、填充，和實際内容。盒模型允許我們其它元素和周圍元素邊框之間的空間放置元素，下面通過圖2，看一下标準盒子模型的圖示。
圖2：标準盒子模型
示例代碼：圖3
圖3：示例代碼
從圖2可以看出，一個标準盒子的組成，是由内容（content）、内邊距（padding）、border（邊框）、外邊距（margin）構成，在使用的過程中，可以根據實際的情況增加或減少其中某個組成，說到這兒，我們還得清楚知道一個标準盒子模型寬高的計算。
一個标準盒子模型寬高是如何計算呢？這個可是關系到内容布局。
從盒子模型的組成可以看出，一個盒子的寬度計算由以下公式組成：
boxWidth=contentWidth+padding*2+border*2+margin*2（PS：此處的*2代表的是左右大小，是以要乘以2）。
boxHeight=contentHeight+padding*2+border*2+margin*2。
根據以上這個計算公式，可以得出圖2盒子的寬度實際是270px，高度也是270px。
以上就是我們網頁中的一個标準的盒子模型，也是W3C标準盒子模型，是不是很好了解，下次再計算盒子寬高，不能再錯了哦。
内容不多，但是全是幹貨經驗分享。