CSS3中box-sizing来指定盒模型,有2个值:content-box、border-box,这样我们计算盒子大小的方式就发生了变化
可以分成两种情况:
- box-sizing: content-box; 盒子大小为width + padding + border的大小(以前默认的)
- box-sizing: border-box; 盒子大小为width
如果盒子模型我们改为了box-sizing: border-box; ,那padding和border就不会撑大盒子了(前提是padding和border不会超过width宽度)
.box {
box-sizing: border-box;
}