对box-sizing的理解

360 阅读1分钟

这个属性是干嘛的?

这个属性指明浏览器如何计算指定元素的宽高,可以设置两种属性:

  1. content-box(标准盒模型),默认值。元素设置为标准盒模型时,设置的宽高只包含元素内容区的宽高,实际盒子的宽高需要加入内边距(padding)和边框(border)
  2. border-box(IE盒模型),默写地方也称怪异盒模型。元素设置为IE盒模型时,设置的宽高包含内边距(padding)和边框(border),实际盒子的宽高就是设置的宽高。实际内容区的大小为设置的宽高-内边距(padding)-边框(border)

如何避坑

设置DOCTYPE,所有浏览器就会默认使用标准盒模型