box-sizing属性的常用值和作用是什么？

2 min read

box-sizing常用的属性有两个：

  1. content-box: 默认值。元素的宽度和高度属性值只包含内容区域的大小，不包括内边距(padding), 边框(border), 外边距(margin)。

  2. border-box: 元素的宽度和高度属性值包含了内容区域的大小，同时也包括内边距(padding), 边框(border)的大小，但不包括外边距(margin)。

其中，content-box和border-box的区别就是计算元素大小的范围不同，后者计算包括了内边距和边框大小。一般在布局中，为了方便计算元素大小，我们会将box-sizing设置为border-box。