我們都知道padding是為塊級元素設置內邊距
但是在使用過程中，我們卻會遇到一些問題。padding的標准盒模型和怪異盒模型
padding盒子模型
我們通過demo來講這個問題，用文字干講第一沒意思，第二講不明白
標准盒模型：
我們先擺出HTML和CSS代碼：
1 <div class="shoebox"> <!--此div模仿鞋子的鞋盒--> 2 <div class="shoes"> <!--此div模仿鞋子--> 3 </div> 4 </div>
1 .shoebox{ 2 width: 100px; 3 height: 100px; 4 background-color: #389cff; 5 padding-left: 10px; padding-right: 10px; 6 } 7 8 .shoes{ 9 width: 80px; 10 height: 80px; 11 background-color: #98bf21; 12 }
一個小demo的代碼已經放了出來，很簡單的一個demo，先講講他的用意，我的一雙大小是80*80的鞋子，為此我給了這個鞋子做了一個100*100的盒子，我想要讓這個鞋子有10px的內邊距，所以我設了一個padding-left：10px和padding-right：10px
我們想象中的場景效果可能是這樣的：
有木有，有木有，好正啊，但是現實真的好殘酷。。他卻是這樣的：
這時候我們會很奇怪，明明我們設置的shoebox的高和寬是100*100怎么變成了110*110了呢，這多出來的10px是怎么回事。
這是padding元素膨脹造成的結果。在標准盒模型中，設置padding會自動擠壓空間，而不會利用給出來的空間，不會占用寬內位置，不通過width影響，會自己擠出空間來，就好像，我的鞋子是80*80的，我不需要100*100的盒子，你給我一個80*80的盒子就好了，我靠我自己來把他擠成100*100，這時很顯然的解決的辦法就出來了，我們的盒子的寬度只要設置成80*80然后設置padding：10px；來讓鞋子把周圍額空間擠成100*100。
這就是padding的標准盒模型，先做好鞋子，再去做盒子
怪異盒模型
怪異盒模型與標准盒模型的區別就是，怪異盒模型是先做好盒子，再來做鞋子，我把盒子的大小固定住，你鞋子怎么擠也沒有用。
這時我們只要在我們的代碼中加一條box-sizing：boeder-box，就可以把我的盒子給固定住，這時你鞋子想要用padding來撐大盒子的空間已經沒用了，因為鞋子已經被固定死了，這時我們就可以用代碼：
1 <div class="shoebox"> <!--此div模仿鞋子的鞋盒--> 2 <div class="shoes"> <!--此div模仿鞋子--> 3 </div> 4 </div>
1 .shoebox{ 2 width: 100px; 3 height: 100px; 4 background-color: #389cff; 5 box-sizing: border-box; 6 padding-left: 10px; 7 padding-top: 10px; 8 } 9 10 .shoes{ 11 width: 80px; 12 height: 80px; 13 background-color: #98bf21; 14 }
來實現我們要的效果：
最后在總結一點padding的知識：
1. 當我們給width設置一個固定的值或者給width設置100%時，設置padding都會把盒子給擠開，擠大了
2. 若想要不使用怪異盒模型又不會把盒子擠大，請把width設置為auto，width默認的值是auto。自動占滿整個屏幕
3. 標准盒模型在pc端比較常用，因為pc端的屏幕大，有優勢可以撐
4. 怪異盒模型在手機端比較常用。手機屏幕是有限大小的，有時我們往往需要使用怪異盒模型把他固定住。
5. 怪異盒模型的盒子大小還要加上border的大小。
本文為原創作品，未經允許不可私自轉載，謝謝！