第一部分
第1课时
1、页面中所有的元素都是一个一个的矩形盒子，每一个矩形盒子都由内容、内填充、边框及
      外边距组成
2、他们属性如下：
      内填充属性为padding，为四个方向，padding-top、padding-right、padding-bottom、padding-left
      边框属性为border，也有四个方向，即：border-top、border-right、border-bottom、border-left
      外边距属性为margin，四个方向属性即：margin-top、margin-right、margin-bottom、margin-left
3、盒子元素可以设置宽高，实际开发中为每个元素设置的宽高，实际就是元素内容的宽高，并不是
      盒子的宽高；要计算盒子的宽高，还需加上padding和border的值

第2课时
1、在为页面元素设置背景色时，背景色是穿透padding的，并且也会对border产生影响的
2、目前，主流浏览器都是支持html5,并且在页面实际开发中，一定要保证文档头部信息中
      文档声明一定要时html5标准的
第3课时
1、边框的属性设置，由样式、宽度及颜色组成，其中样式的属性值有：solid、none、double、dotted、dashed
     设置某一边的属性基本语法为：border-top-style: solid; border-top-width: 12px;border-top-color: red;
     *这里注意，一定要设置style，才会显示color及width
2、边框某一遍属性的合写方式为：border-top: 12px solid red;
3、边框四个边的属性值书序依次为：上、右、下、左，即border-width:12px 13px 14px 15px
      边框所有边合写方式为：border: 12px solid red;
第4课时
盒子模型的应用案例：圣诞树


第二部分
第1课时
1、盒子模型的外边距属性为margin，其也有四个方向，分别为margin-top、margin-right、margin-bottom、margin-left
2、外边距属性的合写为margin: 12px 13px 14px 15px，四个属性值分别代表着margin的四个方向
3、emmet的语法，.box$*n，其代表着快速生成n个class为box的div，其中$代表盒子编号

第2课时
1、实际开发中所设置的width及height是指其内容的宽高，这里的值并不包括盒子的宽高
2、要计算盒子所占空间的宽高，还需要加上其padding及border的值，即：
      盒子的宽度=左border+左padding+内容的宽度+右padding+右border

第3课时
——两个盒子margin合并第一种情况：
1、当两个块级元素垂直相邻时，他们的外边距会合并！并且上面元素具有margin-bottom,下面元素具有margin-top，
两个块级元素的垂直距离是其中较大者；例如：上面元素的margin-bottom：30px;下面元素的margin-top: 20px;
两个块级元素的垂直距离是30px
2、这是块级元素合并的情况之一，实际开发中，页面布局此种情况非常常见，一定要注意

第4课时
——两个盒子margin合并第二种情况：
当块级元素嵌套时，如果父元素没有设置padding-top及border-top时，其子元素的margin-top会与其父元素的
Margin-top进行合并

---

楼主厉害啊厉害

很不错的东西，很值得分享