css3对盒子有了新定义，以前的 盒子实际宽(高) = padding + width(height) + ( border * 2); 使用了box-sizing之后盒子实际宽(高) 就等于 width(height)。

听起来非常符合逻辑了。其实想说本来就应该这样，每次布局要考虑 padding和border 真蛋疼。

看下效果

        *{padding:0px;margin:0px;}

        .box{

            box-sizing:border-box;

            width:100px;

            height:100px;

            border:2px solid #000;

            padding:5px 10px;

        }

这是js获取div实际的宽高。

box-sizing 一般用到两个值。

border-box：padding 和 border 不影响盒子实际尺寸。

content-box：盒子实际宽(高) = padding + width(height) + ( border * 2);

可以理解为 以盒子为主尺寸（border-box），以内容为主尺寸（content-box）。