有关盒模型的一点笔记

默认盒模型——content-box

默认盒模型下，width和height指的就是内容区块的长宽。

而盒子的总宽度 = width + 内边距 + 边框 + 外边距

默认的盒子模型的缺点是设置宽高不直观，由于设置的宽高是内容而不是整个盒子的宽度，因此常常会出现问题。

边框盒模型—— border-box

边框盒模型下，设置的width和heigth将会包含内边距和边框

此时盒子的总宽度 = width + 外边距

设置这种盒模型的优势就是更直观了，当咱们须要增长边框或者内边距时会包含在width之中！只要在外边距不变的状况下，能够对边框、内边距、内容宽度进行随意修改【设置的宽度须要小于width】。