我将<textarea>放在一个盒子里 盒子宽度700px <textarea>宽度100% 为什么会超出盒子一点点 搞不懂

<!--
这样就好了。。。

至于为什么会超出。
因为盒子的margin。padding。border。都会增加盒子的长度。
你把盒子设置成100%。那会根据父级的长度来显示。
这里的父级元素为700px。
所以textarea的内容宽度为700px。
加上textarea默认边距和默认边框的长度。所以他就会超出了。

-->
<style type="text/css">
body
{
margin:0;padding:0;
}
#demo
{
width:700px;
height:320px;
background:green;
margin:0 auto;
}
#demo>textarea
{
margin:0;
padding:0;
/*
去掉默认边距。
*/
width:100%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
/*
默认边框左右占2px。
*/
}
</style>
<div id="demo">
<textarea cols="5" rows="10">
demo
</textarea>
</div>

mark一下。

因为有边框