你对盒子模型理解多少？

什么是盒子模型

盒子模型就是元素在网页中实际占据的大小

盒子模型的计算方式

盒子模型 = width/height+padding+border 注意：没有margin

box-sizing

当box-sizing的值为 border-box 时，会改变盒子模型的计算方式

盒子模型 = width/height = 内容宽高+border+padding

offsetWidth

JavaScript中获取盒子模型的方式是 obj.offsetWidth / offsetHeight

演示代码

@说人话的前端 - bilibili * { margin: 0; padding: 0; } /* 盒子模型=200+20+10 */ div { width: 500px; height: 200px; padding: 10px; border: 5px solid red; background-color: #ccc; box-sizing: content-box; }