如何使用CSS盒状模型
每个CSS元素本质上都是一个盒子。每个元素都是一个通用的盒子。
盒子模型根据一些CSS属性来解释元素的大小。
从内到外，我们有。
- 内容区
- 填充
- 边框
- 边距
形象化盒子模型的最好方法是打开浏览器DevTools，检查它是如何显示的。
在这里，你可以看到Firefox是如何告诉我一个我强调的span 元素的属性的。我右键点击它，按检查元素，然后进入DevTools的布局面板。
看，浅蓝色的空间是内容区。围绕着它的是padding，然后是border，最后是margin。
默认情况下，如果你在元素上设置了一个宽度（或高度），这将被应用于内容区。所有的padding、border和margin的计算都是在数值之外进行的，所以你在进行计算时必须记住这一点。
你可以使用 "盒子大小 "来改变这种行为。
