盒子模型不必多少，公认的盒子模型
总宽度=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什么的 别和我抬杠
