今天完成的事情：完成了任务八的第一个页面

明天计划的事情：继续任务八

收获：

如何理解vertical-align与line-height？ 

一.line-height

①定义

line-height行高是指文本行基线之间的距离。行高line-height只影响行内元素和其他行内内容，而不会直接影响块级元素。为一个块级元素设置line-height，可以块级元素的内联内容，也定义了元素文本基线之间的最小距离，即最小行高。

②属性值

默认值为normal，通常为font-size值的1.2倍

<length>设置一个固定的行间距

<number>设置数字，该数字和当前font-size相乘就是行间距

<percentage>设置百分比，当前font-size的百分比为行间距

inherit从父元素继承

二.vertical-align

①定义

vertical-align用来设置元素的垂直对齐方式

②属性值

默认值为baseline，元素的基线和父元素的基线对齐

text-top 元素的顶端和父元素内容区域顶端对齐

text-bottom 元素的底端和父元素内容区域底端对齐

top 元素的顶端和line box顶端对齐

bottom 元素的底端和line box底端对齐

sub 元素的底端和父元素的下标基线对齐

super 元素的底端和父元素的上标基线对齐

middle 将元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐

<length>升高（正值）或降低（负值）元素，0px等同于baseline

<percentage>升高（正值）或降低（负值）元素，百分比相对于line-height，0%等同于baseline

inherit从父元素继承

三.常见问题

①图像在块级元素中时，下面会有一段空白

在图像后写上一段字，并给他背景色，可以得到这样的图

因为vertical-align的默认对齐方式为baseline，所以图片下面的空白是预留给文字的基线下的内容，相当于图像后有一个看不见的文字

而zxx的高度是由行高来决定的，所以解决这个问题只要解决vertical-align和line-height

1.让vertical-align失效

图片默认是inline水平的，而vertical-align对块状水平的元素无感。因此，我们只要让图片display水平为block就可以了，我们可以直接设置display或者浮动、绝对定位等。

例如：display:block

2.使用其他vertical-align值

因为这个空隙是基线对齐搞出来的，所以可以用其他的值，比如top bottom middle

3. 修改line-height

下面的空隙高度，实际上是行高值和字母x下边缘的距离。因此，只要line-height≤font-size，实际文字占据的高度的底部就会在x的上面，下面没有了高度区域支撑，自然，图片就会有容器底边贴合在一起了。

4. line-height为相对单位，font-size间接控制

如果line-height是相对单位，例如line-height:1.6或者line-height:160%之类，也可以使用font-size间接控制，比方说font-size设0, 本质上还是改变line-height值

②给图片设置行高和垂直居中后发现只是近似居中

middle中线位置(字符x的中心)并不是字符内容的绝对居中位置。两个位置的偏差就是图片近似居中的偏差。

可以设置font-size:0, 此时content area高度是0，各种线都在高度为0的这条线上，绝对中心线和中线重合，自然垂直居中