复习笔记—CSS之两种盒模型的区别

第一种盒模型是content-box，即width指定的是content的区域宽度，而不是实际宽度，公式为：

实际宽度 = width + padding + border

第二种盒模型是border-box，即width指定的是左右边框外侧的距离，公式为：

实际宽度 = width

相同点是都是用来指定宽度的。 不同点是border-box更好用，因为border-box让前端不需要去经常见计算实际宽度，毕竟width就等于实际宽度，大大增加了效率。