盒模型

146 阅读1分钟

标准盒模型(box-sizing:content-box)

盒子的实际宽度:content+padding2+border2

计算内容的宽度:content

怪异盒模型(box-sizing:border-box)

盒子的实际宽度:content

计算内容的宽度:content+paddin2+border2

盒子模型的总尺寸为内容+内边距+边框+外边距

盒子模型(box-sizing)的属性有:content-box/border-box/inherit

注解:在实测过程中盒子的实际宽度和计算内容的宽度容易搞混,需要特别注意。