a 伪类的使用css设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。高度同理。
真正盒子的宽度，需要加上一些其他的属性。
盒子的宽度=padding+border+width
盒子的高度=padding+border+width
b css3中可以通过box-sizing来指定盒子模型，即可指定为conent-box，boder-box，、
这样我们计算盒子大小的方式就发生了变化。
content-box：对象的实际宽度等于设置的width值，border，padding之和。
****你设置的width属性值，仅仅是内容的宽度，盒子的最终宽高值在width的基础上再加上padding和magin的宽度。会影响页面结构。
border-box：对象的实际宽度等于设置的width值，即使定义有border和padidng也不会改变对象的实际宽度。
****你设置的width属性值就是盒子的最终的宽度，包含了border和padding和内容。真正放内容的区域会减小。但是会稳固页面结构。
eg: box-sizing:content-box;
给item添加 鼠标移动上去的时候，显示一个10px像素边框。由于使用border-box属性，不会挤占别的空间。其自身空间自动减小。
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.item:hover {
border: 10px solid #008000;
}
.item {
width: 300px;
height: 170px;
display: inline-block;
margin: 0 10px;
overflow: hidden;
background: chocolate;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="item">流口水的解放路</div>
<div class="item">流口水33的解放路</div>
