对CSS盒模型的一些理解

        盒模型是CSS中一个比较重要的概念，它是网页开发布局的基石，它不仅可以存放文字文本，还可以存放图片、音频、视频等内容。

        盒模型主要由4部分组成：外边距（margin）、边框（border）、内边距（padding）、内容（content），可以理解为我们日常生活中的一个快递盒子，外边距相当于快递盒与快递盒之间的距离，边框相当于快递盒，内边距相当于快递盒里装的东西与快递盒内部之间的距离（类似于防震填充物，即填充层），而内容则相当于快递盒里面装的东西。由此可知，快递盒与快递盒之间不仅有距离，而且还可以紧挨在一起，所以盒模型可以控制盒子与盒子之间的距离，紧挨或者浮动。

       另外如果对盒子的3D模型能够有一定的理解的话，那么在网页开发时可以更有利于对开发布局的理解，而且也便于对内容进行更好的操作和工作。盒子的3D模型与Photoshop里面的图层编辑类似，共5层，从上到下分别为：第一层为边框层，第二层到第五层分别为：内容+内边距、背景图像、背景颜色、外边距。（这个有什么用呢？例：当图片和背景图像在在同一个块里面时，图片可能会把背景图像给遮住，这时可以利用这一特性，另外再结合盒模型的padding属性就能解决这个问题了，即根据实际的情况，分别设置padding的上下左右四个方向的值）

4000

要注意的地方：

  1.盒模型元素有上下左右4个方向的属性值，而且是顺时针方向，即上右下左，所以当设置方向的属性值为3个的时候，则为第一个属性值~第三个属性值分别为：上、左右、下；当设置的属性值为2个的时候，第一个属性值为上下，第二个属性值为左右；当设置的属性值为一个的时候，即4个方向的属性值都一样，这样是为了方便简写。

 2.border：必须要同时设置大小、样式、颜色这3个属性值才能显示效果，而且属性值之间是空格（英文输入法状态下）

 3.有时候浏览器会默认地为标签添加一些填充，所以有时候就会出现有边距和边框的情况，所以为了避免这些情况，应该在一开始的时候对代码进行初始化一下：*{margin:0;padding:0;}