通过一个小例子来阐述盒模型的组成。

　　（如有描述不周还请担待。）

　　盒模型是页面布局的基础，规定了网页元素如何显示以及元素之间的相互关系。

　　盒模型是由：content（内容区）+ padding（填充区）+ border（边框）+margin（外边界）组成。这个是比较官方的对盒模型的解释，实话说，当我在逆战班第一次听到这个新内容的时候是比较蒙的，为什么我看到的一小块内容会有这么多部分组成呢，命名就是一个框里面放了一段话，但是可以包含这么多东西，通过后来的练习慢慢懂了盒模型的含义，其实是很简单的一个东西。

　　现在网购是一件习以为常的事情，网购然后等待收快递，我们所收到的快递就可以用来解释盒模型到底是一个怎么样的内容。

　　盒模型的四个组成部分换成快递来说我觉得就比较简单了：盒模型=快递

　　内容区，也就是我们第一眼在页面上所能看到的东西，我们可以想成是快递所购买的东西，以手机为例。

　　当然快递不能直接送一部裸机给你，他需要一个包装盒，不同品牌、型号，版本（6+64G、6+128G、8+128G、8+256G）的手机包装盒也大小不一，是可以由厂商决定的，这个包装盒呢其实就可以理解为我们盒模型里面的填充区，也属于内容区的一部分。

　　内容区+填充区 就是 手机+手机包装盒。

   　border（边框）呢，把内容区和填充区包在了里面，就像是保护他们两个，是不是就像是我们的泡沫纸，保护手机和包装盒，不要因为外力挤压而受到损坏。

　   最后的margin（外边界）就是将我们边框及内部的填充区和内容区与其他的盒模型分开，便于阅读或者观看，也就是我们快递总重要的部分，外部的打包盒，上面还有我们的部分信息，在取快递的时候可以

　　方便我们对我们的快递快速的找到，与其他快递（盒模型）分开。

　　盒模型=内容+填充+边框+外边界

　　快递=手机+手机包装盒+泡沫纸+外部打包盒

　　希望像我一样初学前端的码农可以通过我自己对于盒模型的认知可以理解这是一个怎样的知识点，也希望已经略懂的朋友不要被我的认知所打蒙。