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度云笔记