新手提问CSS box-sizing:border-box问题

新手才开始学css没多久，所以提的问题比较基础

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

无标题文档 div{font-size:24px; text-align:center; border:4px solid ; width:400px; } .one{ border-color:#F00; padding:30px; box-sizing:border-box;} .two{ border-color:#3FF;}

the first test

the second test

图片说明

加上box-sizing:border-box;后第一个div框还是变大，哪里出了问题呢？

楼主，你想让box1和box2显示一样的宽度（也就是400px），得在.one的css样式中加上width：332px; 因为一个div的真实宽度=width+2*border+padding-left+padding-right,所以，不想div框变大，就得用400px减去2倍的border再减去2倍的padding,也就是332px

标准 w3c 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
ie 盒子模型的范围包括 margin、border、padding、content,content 部分包含了 border 和 pading。