盒子模型（BOX MODEL）

概念
所有的HTML元素看作盒子，在CSS中，是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
外边距（margin）、边框（border）、内边距（padding）、和实际内容（content）

1、content：盒子内容，显示文本和图片
2、padding：清楚周围的区域（撑大盒子大小，让元素有空隙，更美观,第一个值代表上下，第二个值代表左右）拓展：padding-left、padding-right、padding-top、padding-bottom。

 div{
            background-color: blueviolet;
            width: 100px;
            height: 100px;/*内容content*/
            padding: 50px;
        }

<div>我是内容</div> 

3、border（在内容和内边距外加一个边框，第一个值是大小，第二个值是什么类型的线,第三个值是线的颜色）

div{
            background-color: blueviolet;
            width: 100px;
            height: 100px;/*内容content*/
            padding: 50px;
            border: 50px solid blue;
        }

<div>我是内容</div>

4、margin（是透明的，主要用于隔开之间的元素，第一个值为上下，第二个值为左右）拓展：margin-left、margin-right、margin-top、margin-bottom。

 div{
            background-color: blueviolet;
            width: 100px;
            height: 100px;/*内容content*/
            padding: 50px;
            border: 50px solid blue;
            margin:50px;
        }

<div>我是内容</div>        
<p>我是P标签</p>

如果把盒子模型看作一个生活中的快递，内容相当于买的实物，内边距相当于实物和盒子壳子中间的泡沫，边框相当于盒子，外边距相当于两个盒子间的间隙。

margin-top为负值，不管是否设置高度，都不会增加高度，而是会产生向上的位移。
margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度.