深入盒子模型

点击查看【codepen】

box-sizing

content-box

默认值
document.getElementId('box').offsetWidth 获得box元素的宽度为 222px

content 200 + paddingLeft 10 + paddingRight 10 + borderLeft 1 + borderRight 1

border-box

document.getElementId('box').offsetWidth 获得 box 元素的宽度为 200px
当 box-sizing 为 border-box 时，其box元素就是width 就是 content + padding + border 的宽度之和。而 content 的宽度会变动。