什么是box-model?

意思是在 CSS 里面，html 的每个元素都可被视作为一个盒子，然后可以针对这个盒子去做调整

Margin -负责调整 元素与元素 之间的边界间距，属于元素外部的边界调整。Padding-负责调整 元素内所有内容与元素自身 的边界间距，属于元素内部的边界调整。Border-元素最外层的边界，常见的元素外框设定就是此设定。

懒人包:margin推外边界，padding、border推内边界

如图原本设定的width:200px,实际宽度为width+左右padding+左右border=240px。

box-sizing: border-box;

觉得计算盒模型很麻烦吗？就用这个吧！
box-sizing: content-box; 这个是预设属性。
box-sizing: border-box; 用这个属性的话，就会把 padding 等地考虑进来，而自动做内缩调整。

懒人包:运用box-sizing: border-box，宽度就不会随着padding和border影响，但要小心内容会随着内缩影响。

如图原本宽度因为设定padding及border=240px,运用box-sizing: border-box，宽度变回原本设定200px