专业实训第八天 CSS 盒子模型+定位+简单css3动画

今天一天学的东西并不是很多，比前一天简单了一些，但是今天的知识比昨天的更加灵活，技巧性，经验性比较强，但是都有共同的特点。需要大量的练习方能掌握。

1. 盒子模型：

   1. 在标准的浏览器下：
      所有的标签在页面中实际的宽度=width+border+padding+margin
      （此时的padding，margin，border都是计算左右方向的）
   2. padding：是标签的内容到标签边缘之间的距离简称：内边距；
      padding有四个方向：上，右，下，左；
      padding的设置会在设置的width基础增加标签的占地面积；
      padding的主要作用是用来设置内边距，效果是：内容自身不变；但是标签实际会被撑大；
      块标签可以在四个方向上都设置padding，都可以起到占位作用；
      行标签，只有水平方向起作用，垂直方向不起作用；
   3. margin:标签和标签之间的距离；
      简称：外边距；
      margin在设置上有四个方向：上，右，下，左；
      margin：15px 16px 17px 18px；
      margin：15px 20px；上下外边距15px，左右边距20px；
      margin：0 auto；能够让设置了固定宽度的块标签水平居中；
      什么情况下使用margin：0 auto
      
      1. 在一行只有一个块标签；
      2. 该块标签宽度不是100%；
   4. margin-top的使用原则：
      如果一个大盒子里面有一个小盒子；
      那么我们给小盒子设置margin-top的时候，两个盒子会一块下来；这种现象叫做边距合并；
      解决方案：我们可以先将父级高度设置成为子级高度，然后给父级设置一个padding-top，
      此时是将子级当做父级的内容看待，从而能实现子级和父级上边距拉开，
   5. margin：两个盒子在垂直方向，如果他们都有上下的margin值。
      那么两个盒子之间的距离是多大？两个盒子在