默认盒模型——content-box

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

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

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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

边框盒模型—— border-box

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

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

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

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄