css3可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分为两种情况：
- box-sizing: content-box 盒子大小为width+padding+border（默认）
- box-sizing: border-box 盒子大小为width
也就是说加了border-box，无论是设置边框像素还是内外边距都不会撑大盒子，还是保持width像素不变。
如果盒子模型我们改为了box-sizing: border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）
建议，当我们设置初始化样式的时候，采用css3盒子模型。添加：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}就不用担心因为设置内外边距导致盒子被撑大了！
版权声明：本文为本站原创文章，由37.2℃发表，转载请注明出处，保留一切权利！
转载请注明：转载于37.2度云笔记
微信扫一扫 