<style type="text/css">
#box{ width:100pxheight:100pxbackground-color:red}
</style>
<div id="box"></div>
<button onclick="_slideUp()">向上收缩</button>
<button onclick="_slideDown()">向下展开</button>
<script type="text/javascript">
function _slideUp(){
$('#box').slideUp(3000)
}
function _slideDown(){
$('#box').slideDown(3000)
}
</script>
是因为一个css设置：box-sizing默认是content-box，实际width=设置width+边框+间距，而在border-box下，宽度设置好，边框和间距会自动调整宽度，满足设置的值。
语法
box-sizing：content-box | border-box
默认值：content-box
取值
content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding以及margin之和，即 ( Element width = width + border + padding+margin )
此属性表现为标准模式下的盒模型。
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
参考百度百科：http://baike.baidu.com/link?url=gAYu8r1bOOTURx9cwRl_ltLeEisHwww-TWvOxngNc5gWS_bCl0pE869koc1s2xGVISwuOObHYNWa3Gy0FQYBuq
