有关盒模型的一点笔记

默认盒模型——content-box

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

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

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

边框盒模型—— border-box

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

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

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

原文地址:https://www.cnblogs.com/wljqds/p/10691605.html