標籤：
盒子模型不必多少，公認的盒子模型
總寬度=width + padding(padding-left,padding-right) + border(border-left,border-right)
而怪異盒子模型
總寬度=width
哎 語文老師是數學教的 沒辦法只能表述成這樣了，沒關係看圖，
先看下傳統盒子模型 ，結構和代碼如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .big-box{ 8 width: 100px; 9 height: 100px;10 margin: 50px auto;11 background: #cacaca;12 padding: 10px;13 border: 5px solid #cf2d28;14 }15 </style>16 </head>17 <body>18 <div class="big-box"></div>19 </body>20 </html>
是的 很easy的一段代碼，頁面如下
這很好理解，好的 在瀏覽器裡看下具體的盒子模型，很直觀可用性區域域100px兩邊padding10px, border5px;
如果按照上面說的傳統盒子計算公式就可以計算出總寬度：100+10*2+5*2 = 130 ，在瀏覽器指向看總寬度
顯示130 X 130 perfect 完全想等。。
再看下怪異盒子模型啥樣的，同樣的上面結構和樣式，現在在樣式裡面加個box-sizing:border-box;
頁面展示就不看了和上面差不多，看下瀏覽器中具體的盒子模型
what‘s up，！！ 裡面可用性區域域變成70px，而且也不是像剛才有幾種顏色現在裡面全是白色，但padding還是10px，border還是5px;
瀏覽器指向看顯示總寬度100px; 和剛才定義的 總寬度=width 符合，
明白了，傳統盒子padding和border的寬都是在width外面的，此時width多少就是可用性區域域多大，
怪異盒子就是padding和border的寬都是在width裡面，width減去他倆的寬才是可用性區域域的寬，搜嘎
看張圖
這個如果在網頁中做是很好做，但是是在移動端用的，如果用傳統布局和單位隨著不同和越小的尺寸會把布局打亂掉，好的先布下局
1 <div class="user-list"> 2 <ul> 3 <li> 4 <img src="images/user-icon (1).png"> 5 <span>個人資訊</span> 6 </li> 7 <li> 8 <img src="images/user-icon (2).png"> 9 <span>銀行資訊</span>10 </li>11 <li>12 <img src="images/user-icon (3).png">13 <span>投資記錄</span>14 </li>15 <li class="im-width"></li>16 <li>17 <img src="images/user-icon (4).png">18 <span>取款</span>19 </li>20 <li>21 <img src="images/user-icon (5).png">22 <span>注資</span>23 </li>24 <li class="im-width"></li>25 </ul>26 </div>
樣式如下
1 .user-list{ 2 width: 100%; 3 padding:0 5%; 4 } 5 .user-list ul{ 6 width: 100%; 7 list-style: none; 8 } 9 .user-list ul li{ 10 float: left; 11 width: 33.3%;12 height: 7.5em;13 background: #ececec;14 text-align: center;15 box-sizing:border-box;16 margin-bottom: 5px;17 border-right: 5px solid #f2f2f2;18 position: relative;19 }20 .user-list ul li.im-width{ 21 width: 16.7%; 22 background: #f2f2f2;23 }24 .user-list ul li img{25 width: 55%;26 }27 .user-list ul li span{28 position: absolute;29 bottom: 0;30 left: 0;31 width: 100%;32 text-align: center;33 color: #464646;34 font-size: 1em;35 }
此時無論怎麼改變螢幕尺寸這個布局是不會改變的，
下面box-sizing的相容，差不多現在瀏覽器都支援了 對於說IE6什麼的 別和我抬杠
box-sizing怪異盒子模型在移動端應用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
