任务七

今天完成的事情

1. 使用flex布局完成页面的基本布局。
2. 使用bootstrap的icon标签完成一些小图标的编写。
3. 完成任务7页面1，2的编写。
4. 整理垂直居中的常用方法与优缺点 
   使用绝对定位和负外边距对块级元素进行垂直居中 
   #box { 
width: 300px; 
height: 300px; 
background: #ddd; 
position: relative; 
} 
#child { 
width: 150px; 
height: 100px; 
background: orange; 
position: absolute; 
top: 50%; 
margin: -50px 0 0 0; 
line-height: 100px; 
} 缺点是需要知道被居中元素的高度。 
   使用绝对定位和transform 
   transform: translate(0, -50%) 
   原理和上面一样，不同的是用transform代替margin，可以不用知道高度。

使用flex布局 
#box { 
width: 300px; 
height: 300px; 
background: #ddd; 
display: flex; 
align-items: center; 
} 
缺点是兼容性和内部的元素无法使用box-siziing和float等属性。

使用 line-height 对单行文本进行垂直居中

line-height和 vertical-align 属性结合可以对图片进行居中。

使用 display 和 vertical-align 对容器里的文字进行垂直居中 
vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的等等，而像div，span这样的元素是不行的。inline-block水平的元素可以使用vertical-align属性，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。

浮动会破坏 vertical-align垂直居中的作用。

明天计划的事情

1. 完成任务七的页面三，并对样式进行微调。
2. 美化audio标签的样式编写。
3. 开始任务八。

遇到的问题

1. 关于底部切换按钮四个小圆点如何实现，最开始打算用图片，后来发现其实可以使用css的border-radius来实现。
2. 手机端没有hover这个状态，如何解决？其实可以使用active这一伪类来代替。

收获

1. 小课堂上师姐讲解了display:block,inline-block,innline三种属性的区别与联系。
2. 学会了 border-radius这一css属性，利用该属性可以为边框添加圆角属性。学会了box-shandow属性，该属性可以添加阴影效果。
3. 认识了auudio这一标签，并熟悉了该标签的一些常见熟悉