1.盒子组成
可以在脑子里想象一个场景，空中漂浮着一个潘多拉魔盒，盒子里面漂浮着一块宝石，
在H5中，宝石就可以看做盒子的内容区域，这个区域有自身的宽度和高度
宝石漂浮在盒子中，距离盒子的四周有一定的距离，这个距离就是内边距(padding)，
潘多拉魔盒有自身的框架，这个框架的厚度就是H5中边框(border)的厚度，
潘多拉魔盒自身距离周围空间也有一定的距离，可以看成H5中的外边距(margin)
所以，总结如下，盒子从内到外是如下组成的，
盒子模型 = 内容区域(height,width)+内边距(padding)+边框(border)+外边距(margin)
2.盒子的一些属性
div{
height:100px;
width:100px;/* 内容区域的宽高 */
background:deeppink;/*背景色(边框中也带有背景色)，不给出则默认是透明色*/
padding:20px;/* 内边距 */
border:20px solid blue;/* 边框 */
margin:20px;/* 外边距 */
}
1).padding：是内边距。
padding:10px;
当padding只给一个值的时候默认上下左右的内边距全部等于同一个值。
也可以单独给出每个方向的内边距。
padding-left:10px;
padding-right:20px;
padding-top:20px;
padding-bottom:25px;
这样写的话代码就占用了很多的空间。于是就有了这种写法(复合属性)：
padding:5px 10px 12px 15px;/* 内边距 */
同时给出四个方向的内边距值，用空格分隔，按顺时针分别对应的是上内边距，右内边距，下内边距，左内边距。
类似的，还有只给出两个值和三个值的情况
padding:5px 10px;/* 内边距 */
padding:5px 10px 12px;/* 内边距 */
两个值的情况，按顺时针方向，第一个值默认上下内边距，第二个值默认左右内边距。
三个值的情况，第一个值默认上内边距，按顺时针方向，第二个值默认左右内边距，第三个值默认下内边距。
2).margin：是外边距。
首先，类似于内边距，上述的用法对外边距也同样适用。
这里介绍一种margin特有的用法。
就是当浏览器的大小改变时，盒子有可能被挡住，那么为了方便观察，我们希望当浏览器大小改变时盒子都是居中的，
margin:auto;/*左右自动居中*/
此时无论浏览器左右的长度如何改变，都不影响对盒子的观察。
如果要对盒子上下方向也进行居中，那么可以通过给定它上下方向的外边距值来达到居中的效果，但是上下方向不会自动适应浏览器。
margin:100px auto;/* 上下100px，左右都自动居中 */
3).border：代表边框
通常是用复合属性的形式 border:border-width border-style border-color;
也可以分别列出，
border-width:20px;
border-style:dashed;
border-color:blue;
border-style代表边框样式，有多个值，最常用的有两个，solid实线和dashed虚线，其他的还有none(无边框)，dotted(点状)，double(双线)， groove(3D凹槽边框)，ridge(3D垄状边框)，inset(3Dinset边框)，outset(3Doutset边框)。
border也有四个方向的复合属性：border-left , border-right,border-top,border-bottom。可以单独给出每个方向的边框及其相应属性，
border-left: 20px solid green;
border-right: 20px solid blue;
border-top: 20px solid gold;
border-bottom:20px solid purple;
也可以单独给出某个方向的某个属性：
border-left-style:dashed;
border-left-width:20px;
border-left-color:black;
4).画一个三角形
画一个盒子，背景颜色设为透明色，内边距都设为0，外边距自动居中，上下方向外边距设为100px，边框设为宽度相等，样式相同，颜色设置成一个方向的颜色为红色，其他方向的颜色都设成透明色。
