有关盒模型的一点笔记

默认盒模型——content-box

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

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

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

边框盒模型—— border-box

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

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

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