CSS框模型(Box Model)初学理解

HTML中所有的元素都可以是一个框，css的框模型我觉得和table标签单元格挺像的，还是要拿这个图说明一下。

一个HTML页面中可以有很多元素，有很多div。

我这里的框暂时理解为一个装电视机啊或者显示器啊之类贵重物品，并且怕摔的箱子。只不过我们现在中的那个箱子是三维立体的，而css这里这个是二维平面的。

Margin：有多个这样的箱子，存放的时候可以挨着放，也可以隔开一段放一个。就是框和框之间的区域，距离产生美。

Border：箱子的厚度。也就是框的边，拥有属于自己的style，可以粗可以细，还可以调色，还有不同长相的边（实线的，虚线的，点线的，3D的）。

Padding：咱们买的贵重物品，一般都会拿一些泡沫塑料之类的东西将它包裹起来然后再放进箱子里，以免在运输过程中贵重物品与箱子的内壁直接接触，进一步保护物品。这些泡沫塑料填充的区域就是Padding，内容与边之间的区域，可以设置填充的厚度。

Content：贵重物品。可以是元素，可以是文本，可以是任何要装进来的东西，可以是一个，也可以有多个。可以根据它们的种类设置属于它们自己的style。

初学者的一点浅薄理解。仅作为学习笔记。