同样是100%大小，换成canvas就会多出滚动条
大家看这个神奇的BUG啊
代码特别简单
就是一个宽高是百分之百的DIV
然后设了个背景颜色
现在呢就这样很正常对吧
但是注意
只要我把这个DIV换成canvas
大家再看
他下边就会出现个白条
然后呢左边已经出现滚动条了
这个很神奇
我再把它换成DIV
大家看
这样就没有滚动条
那这是为什么呢
首先我们在这里简单写个英文字母
看看这很正常对吧
然后呢我们再写一个图片
SRC我之前准备了一张图
在这
然后呢
我们呀
把这张图片
设置成
小一点的
宽高就是10像素
好我们再来看一下
大家看
现在这个图片和文字
看上去像是底部对齐的
对吧
但是注意
如果我在这写一个字母“g”
或者“y”
或者“j”这样的字母大家看
现在就是这样了
由此可见呢
这个图片默认和文字是什么对齐呢
这个我之前讲过是基线对齐
至于这几条线呢
大家可以看我这期视频
我这两天会把它置顶
那
我们可以验证一下我们把图片
改成
vertical align等于top
大家看：顶部……bottom
大家看 是不是底部
那
如果我们不写这个属性
他默认就是baseline 基线对齐
甚至呢我们如果这个图片比较高
大家看他会把整个文字的空间都撑大
然后再来实现这个baseline基线对齐
大家看高到什么程度呢
高到如果我这是100vh
大家看
图片已经是100vh了
但是他下面注意仍然留了一部
分空间给这种g呀
y呀j呀这种字母来用
那有同学会说如果我不要文字呢
大家看
不要文字
他下面也会留出这一部分空间
为什么呢
因为这个img只默认是display等于inline的
也就意味着他后面可能还会有元素
所以浏览器会
给他保留下面这一部分小的空间
那
如果我们给他改成display等于block呢
我们都知道block是他自己独占一行
也就没必要再留出空间了
大家看 就没有问题了
再或者呢
（我们把这个“g”写上）
大家看啊
我把外边这个容器的font-size改成
大家看这个字母也没了
也意味着我这个字体的大小都是0了
所以呢
他下边那部分空间也就没有了
所以我们再回到刚才那个问题
div没问题
我们换成canvas
为什么就有问题呢
因为canvas他默认跟图片一样
他也是默认基线对齐（baseline的）
所以我们可以手动在这把它改成
display等于block
大家看 就没问题了
或者
我们用vertical-align
只要不用baseline就行
我们用top
也没问题
再或者呢
我们把body这个
font-size改成
也是可以解决的
最后更新于