一个页面中为什么有的div的border计算在width内，而有的border不被计算在width内？

Question

<div class="main">

<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>

</div>
计算的效果就是：
左：158+2 = 160
中：738+2+20（margin）= 760
右：278+2 = 280
加起来一共1200px，但是除了右边是278px+2px，左边和中间的border都计算在width之内了，左边测量只有158px，中间只有738px。火狐和IE都有这个差距，请问这是为什么？

样式：
.main{

width:1200px;
margin:20px auto;
/*position:relative;*/
overflow:hidden;
padding:0;

}
/main左边布局/
.mainleft{

margin:0;
padding:0;
float:left;
width:158px;
height:348px;
background:#FFFFFF;
border:1px solid #B8D9E9;

}
/main中间布局/
.maincenter{

margin:0 10px;
padding:0;
float:left;
width:738px;
height:348px;
left:158px;
overflow: hidden;
border:1px solid #B8D9E9;

}
/mian右边/
.mainright{

margin:0;
padding:0;
float:left;
width:278px;
height:348px;
border:1px solid #B8D9E9;

}

Answer 1

Answer 2

box-sizing属性:http://www.w3school.com.cn/cs...你的left,center,right都是默认的box-sizing:border-box;

Answer 3

首先 我试了一下你的代码
在火狐、ie还有谷歌
都没有出现你所说的问题
截图放不上去 不知道为什么

后来 在我加了*{box-sizing：border-box}之后
发现 border不会被算在 width里边了