css3——新盒子定义box-sizing

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）。