盒子模型不必多少，公认的盒子模型
总宽度=width + padding(padding-left,padding-right) + border(border-left,border-right)
而怪异盒子模型
总宽度=width
哎 语文老师是数学教的 没办法只能表述成这样了，没关系看图，
先看下传统盒子模型 ，结构和代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.big-box{
width: 100px;
height: 100px;
margin: 50px auto;
background: #cacaca;
padding: 10px;
border: 5px solid #cf2d28;
}
</style>
</head>
<body>
<div class="big-box"></div>
</body>
</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减去他俩的宽才是可用区域的宽，搜嘎
看张图
这个如果在网页中做是很好做，但是是在移动端用的，如果用传统布局和单位随着不同和越小的尺寸会把布局打乱掉，好的先布下局
<div class="user-list">
<ul>
<li>
<img src="data:images/user-icon (1).png">
<span>个人信息</span>
</li>
<li>
<img src="data:images/user-icon (2).png">
<span>银行信息</span>
</li>
<li>
<img src="data:images/user-icon (3).png">
<span>投资记录</span>
</li>
<li class="im-width"></li>
<li>
<img src="data:images/user-icon (4).png">
<span>取款</span>
</li>
<li>
<img src="data:images/user-icon (5).png">
<span>注资</span>
</li>
<li class="im-width"></li>
</ul>
</div>
样式如下
.user-list{
width: 100%;
padding:0 5%;
}
.user-list ul{
width: 100%;
list-style: none;
}
.user-list ul li{
float: left;
width: 33.3%;
height: 7.5em;
background: #ececec;
text-align: center;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 5px;
border-right: 5px solid #f2f2f2;
position: relative;
}
.user-list ul li.im-width{
width: 16.7%;
background: #f2f2f2;
}
.user-list ul li img{
width: 55%;
}
.user-list ul li span{
position: absolute;
bottom:;
left:;
width: 100%;
text-align: center;
color: #464646;
font-size: 1em;
}
此时无论怎么改变屏幕尺寸这个布局是不会改变的，
下面box-sizing的兼容,虽然现代浏览器支持box-sizing，但有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-,IE8-ms-，所以box-sizing兼容浏览器时需要加上各自的前缀：
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
