CSS3盒子模型(border-box)

css3可以通过box-sizing来指定盒模型,有2个值:即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。

可以分为两种情况:

  1. box-sizing: content-box 盒子大小为width+padding+border(默认)
  2. 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度云笔记

发表评论

您的电子邮箱地址不会被公开。

微信
通知:站点改版中,敬请期待