content-box和border-box

内容盒（content-box）和边框盒（border-box）是CSS盒子模型中描述元素尺寸的不同方式。content-box表示宽度和高度包括内容、内边距（padding），但不包括边框（border）和外边距（margin）。而border-box则将元素的总大小视为宽度和高度加上内边距和边框的总和。

content-box看起来更直观，因为开发者通常会先关注内容区域，然后添加内边距。然而，在实际布局中，特别是处理元素之间的间距以及响应式设计时，border-box更方便管理。例如，当设置width: 100%时，content-box可能导致父元素的实际宽度大于预期，因为它还会包含子元素的margin，而border-box则可以保证元素的总宽度不会超过容器。

要将一个盒子模型从content-box转换为border-box，你需要改变该元素的选择器，并设置它的box-sizing属性为border-box。

CSS盒子模型（content-box）与低版本IE的盒子模型（border-box）的区别主要在于：宽和高不一样

标准的CSS的盒子模型（content-box）的宽高：内容区的宽高

低版本IE的盒子模型（border-box）的宽高：内容区+内边距+边框