今天完成了什么：

今天在写小课堂的内容，因为太多不懂花的时间比较长，上个星期在疯狂赶任务。

今天遇到了什么问题：

暂无；

收获了什么：

line-height的定义，指的是基线与基线之间的垂直距离，但并不我们中文汉字的最下端，而是英文X的下端，你现在看下X是不是比中文上一点，这个x的底部是基线。

当font-size大于line-height时，则会出现行距为负值，则两行重叠 

行高与字体同等大小 则行距为0，行距= font-size - line-height = 0 

css的line-height:1.5,line-height:150%,line-height:1.5em,line-height:15px的区别：

1.首先是px的，设置行高是15px的话，那么我们得到的行高自然也是15px；没什么区别的；

2.如果是em的话，首先要看看默认的网页的字体像素，通常都是16px，所以说1em=16px。而对于本文中设置了24px，所以说1.5em就是1.5*24=36px;就是说行高设置了36px；

3.下一种百分比，我们同样要换算成px的，百分比也是基于当前字体尺寸的，100%=1em；在本题中是150%就是说为1.5em，就是1.5*24=36px；

4.最后一种是数值的，没有任何的单位，也被称为因子方式，使用因子方式定义line-height是非常安全的方式，将可以避免文字重叠的现象。因子方法的数值是县继承后计算的，而其他的三个是先计算在继承的，所以如果说是按照理他最近的那个子元素的font-size乘上1.5；

总结就是一行文字的行高和父元素高度一致的时候垂直居中显示；

单位除了px外，行高都是与文字大小的乘积。当不带单位时候，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘，行高以像素为单位，就是定义行高的值。

---------------------------------------------------------------------------

vertical-align使行内元素的基线相对于该元素所在行的基线的垂直对齐。

vertical-align默认对齐是baseline, 也就是基线对齐。

verticla-align属性有非常多

图像元素在块级元素底部为什么留有空白？、

因为图片对齐的基线是英文中X的下端沿线，又因为文字的大小是有行高的，所以就产生了空隙，这时候我们就可以对症下药

vertical-align对块状元素无感，因此我们可以给图片dispalay-为block就可以消除了。

另外也可以使用vertical-align的其他值来改变，例如bottom/middle/top等属性值

还可以修改line-height的值，产生的缝隙本质上是由字体的行高值和下端边缘计算的高度，所以我们可以直接改变行高的大小，直接使他变小，那么字体变小行高也跟着变小，图片也会往下面靠近到没有白边。例如设置行高为5像素；

同时也还可以改变字体的大小，例如直接设置为0，也就是什么乱七八糟的中心线都为一条线上，实际上也是改变行高来实现的。

明天计划：

了解栅栏框架， 努力学习。