专业实训：第八天 CSS盒子模型、定位及简单CSS3动画

今日所学内容相较于昨日略有减少，但难度有所降低。然而，今日的知识点更具灵活性和技巧性，且更依赖实践经验，尽管它们都具备一些共通之处。唯有通过大量练习才能真正掌握。

1. 盒子模型：

1. 在标准浏览器环境下：  

标签在页面中实际所占据的宽度等于width加上border、padding以及margin的总和。
（此时计算的是左右方向上的padding、margin与border）

2. padding：指的是标签内部内容与标签边缘之间的距离，简称内边距；   

padding具有四个方向：上、右、下、左；
设置padding会在原有width的基础上增加标签的实际占用空间；
其主要功能是设定内边距，效果为：内容本身保持不变，但标签整体尺寸会因此扩大；
对于块级标签而言，在四个方向均可设置padding，并能有效占据空间；而对于行内标签，则仅在水平方向上起作用，在垂直方向则无影响；

3. margin：指标签之间彼此的距离，简称外边距；   

margin同样有四个方向：上、右、下、左；
例如margin：15px 16px 17px 18px表示分别设置上下左右的外边距值；
若设置为margin：15px 20px，则上下外边距为15px，左右外边距为20px；
而使用margin：0 auto可以实现固定宽度块级标