CSS3之box-sizing

属性用法

box-sizing: content-box;
box-sizing: padding-box;
box-sizing: border-box;
box-sizing: inherit;

详解

• content-box：标准宽度content
• border-box：border以内的宽度width = border + padding + content
• padding-box：padding以内的宽度width = padding + content
• inherit：继承父元素的属性值

比如

• 有三个div，宽度共占100%，如果其中一个div增加一个border / padding为4px，则总宽度就会变成100%+4px，就会将最后一个div挤下去，不管这个div是用%还是px设置的宽度，而border-box会使其宽度自适应，也就是border / padding都不会增加它的宽度
• padding-box只有火狐浏览器支持，使用时应加上内核前缀

demo地址