前言：由於公司Android專案上線和穩定，就會考慮到ios版本的問題，由於接近年底和開發週期長的問題。老闆說急需照顧到ios版本的使用者。因為不懂ios開發，而自己最近一直研究前端的知識，就主動提出擔任微信開發的任務。雖然微信小程式以前學過一點，但卻從沒正式做過企業級的專案。開發過程中，也遇到一些問題，我會盡量總結，幫助和我一樣遇到問題的童鞋。

先看一下問題：

其實要解決這個問題我們首先要從盒模型說起：

在前端中，盒模型包括：content、padding、border、margin

這是我從網上找的一個圖，很形象的解釋了盒模型。我在這裡也簡單解釋下盒模型的每個部分的概念。

Content：

content就像英文名一樣，意思為內容。我們經常設定的css樣式width和height就是設定content的寬度和高度。該區域也是放置我們實際內容的區域。

Padding：

相信學過Android的同學對這個並不陌生，Padding就像它的英文名一樣譯為填充，其實就是設定content和border之間的距離，就像我們給盒子和內容之間放填充物。再直白點，我們直接看圖：

當我們padding為0的時候，我們的content和border（紅色的線，設定了border：1px solid red）是緊挨著的。我們有時候為了美觀，希望他們之間有間隔。我們就可以設定padding。

這是我們設定padding 50px的效果，我們可以充分感覺padding的效果，就像給content和border之間填充了透明物將他們間隔。

border

border就是盒子的邊，就像我們收到的盒子，他會有個邊框會有寬度，我們可以給盒子設定邊框寬度，樣式和顏色。

margin

margin是指盒模型和頁面之間的距離。我們直接看圖。

盒模型分類：標準盒模型和IE盒模型

弄懂了以上的概念，我們離解決問題近了一步了。現在我們只要弄清楚一個概念，盒模型有2種常用的模式，一個是標準盒模型，這個也是預設；還有一個就是IE盒模型。

標準盒模型：當我們給元素設定width和height，預設情況下就是在標準盒模型下，設定的是content的width和height。記住一個公式。width=contentWIdth；height=ContentHeight。

IE盒模型：當我們設定了IE模型後，我們設定的width和height是指這個盒子的大小，此時的公式是：width=contentWidth+paddingLeft+paddingRight+borderWidth，height=contentHeight+paddingTop+paddingBottom+borderWidth

舉個例子，我們在設定了IE盒模型下，我們設定width為300px，這300px是指content+左右的padding值+盒模型的寬度

標準盒模型和IE盒模型轉換

我們可以通過設定：

box-sizing: content-box;來設定標準盒模型

box-sizing: border-box;來設定IE盒模型

解決方案：

弄懂了我們就知道文章剛開始出現的問題在哪了，我們給內容設定了width為100%，卻在預設情況下它是標準盒模型，所以width只是指content的值，此時我們在給他加padding或者設定border寬度的時候，其實盒子的寬度就大於100%了。所以會有留白。

所以我們解決的問題就一句話搞定，我們將標準盒模型設定成IE盒模型，就完美解決問題了。