标准盒子和IE盒子之间的转换

W3C标准盒子模型：height、width ----- 仅指content(默认)，不包括padding和border

 

IE盒模型：height、weight ----包含了 content+padding+border

CSS中： box-sizing属性默认值为：content-box(W3C)

 

 

可以看到content高30px，但是总体加上padding+border就超出了30px，达到了50px

 

若我们想让content+padding+border加起来30px，只需要设置:box-sizing:border-box

此时:

 

content被挤压成了10px