缘起
在商周，一个滚动栏里的小问题让组内的新同学去解决，结果她高高兴兴的接过去，晕晕乎乎的问过来：我明明设置了padding，怎么看起来没有效果呢？调试的时候也看到确实有padding鸭！ 
问得好，我当即打开L站，准备将盒模型的读书笔记发过去让她看一看，结果发现 —— 我没写 :tieba_087: 最后只能在纸上展现惊人的绘画技艺，粗略讲了一下，反正点头了，应该是懂了。 
就这个机会，也简单说说这个问题吧，怎么水不是水呢~ 

盒！
众所周知：盒模型在样式中是逃不开的话题，盒模型就像一个俄罗斯套娃，那是一套又一套的！从内到外依次是：内容区（content）、填充区也叫内边距（padding）、边框（border）、外边距（margin）。在我们的浏览器开发者工具中，都会看到这么一个东东，就很具体的展示了当前盒元素的各种数据 
 [image] 
而整个元素宽高的计算，也分为两种不同...