简单记述CSS盒子模式

   最近刚刚接触到一个新名词：CSS盒子模型。一听到盒子俩字，一个盒子的形象就在眼前出现了，貌似这个知识点和生活联系起来了，也就挺容易理解的。

那么，盒子模型到底是什么样的呢？咱们来看一张图。

标准盒子模型

    相信接触过盒子模型的人对这样的图应该是很熟悉的，而且从图上我们也可以看出它的标注非常详细，一目了然。而且看到这个图的模样，大家也就很清楚它为什么叫盒子模型了。

作用

    现在我们对盒子模型有了一个感性的认识。那么盒子模型都应用到什么地方呢？大家都知道，对于网页设计来说，有了CSS可以让我们的网页设计锦上添花，其实说白了CSS就是个修饰作用，假如没有它，网页也是没有什么问题的。但是CSS的主要作用是让网页内容和样式相分离，这样貌似也是个解耦的过程，不知道我这样理解是不是合适。

应用

 每一个标签都可以看作是一个盒子模型，例如<span></span>、<div></div>等都是一个盒子模型，我们可以对每一个标签或者说是盒子进行边框（border）、外边距（margin）、内边距（padding）、内容（content）进行设置，而每一项设置内容有分为四个方向（顺时针）：top、right、bottom、left。

    通过不同方面不同方向的设置，可以让网页显示不同的样式效果。

    由于刚刚接触这个概念，理解的还不是很透彻，而且这个知识点看似简单，但在实际应用的时候还是不太容易的，需要耐心和多多练习。