老师,每一屏的标题与副标题设置行高和不设置行高在浏览器中显示的高度不一样,怎么理解?

老师,每一屏的标题与副标题设置行高和不设置行高在浏览器中显示的高度不一样,怎么理解?

好像是下面的内容对上面的内容有影响

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕码 2019-06-07 10:45:14

同学你好!
这边是测试过的。这里有上边距影响不太直观,我们可以去掉上边距来看:

如果不设置行高,设置它的字体大小是46px,那么h3整个的行距是61px

http://img1.sycdn.imooc.com//climg/5cf9ce91000180f708550103.jpg

之后设置行高为46px,反而把它自身的行距压缩了(行高设置小于字体大小),变成了46px

http://img1.sycdn.imooc.com//climg/5cf9ceb700010e8a08170116.jpg

61-46=15这就是相差的那15px.

而且标签是自带一些行距的:虽然给它设置了字体大小40px,但是高度显示53.33

http://img1.sycdn.imooc.com//climg/5cf9cf68000113a803510179.jpg

http://img1.sycdn.imooc.com//climg/5cf9cf620001804c03850123.jpg

同学可以这样这么来理解。

如果帮助到了你 欢迎采纳 祝学习愉快~


好帮手慕码 2019-06-07 09:37:47

同学你好!

可以反过来理解。如果行高小于文字大小,就是会出现对文字的压缩现象:

http://img1.sycdn.imooc.com//climg/5cf9bf9100013ca204040225.jpg

http://img1.sycdn.imooc.com//climg/5cf9bf9b0001db7202330112.jpg

如果设置了行高(小于字体的行高):

http://img1.sycdn.imooc.com//climg/5cf9bfc600015e5902390103.jpg

如果帮助到了你 欢迎采纳 祝学习愉快~



  • 提问者 全粘攻城狮 #1
    麻烦老师自己亲测一下课程源码,我实测,第一屏字体大小46PX,上填充152PX,我设置行高为46PX,浏览器显示为198px,不设置行高为213px;相差15PX,
    2019-06-07 10:24:16
好帮手慕码 2019-06-06 17:20:35

同学你好!

添加行高之后,会有一个行距存在。举个例子看下:不添加行高:

http://img1.sycdn.imooc.com//climg/5cf8da6a0001d33803760263.jpg

http://img1.sycdn.imooc.com//climg/5cf8da8a00019d1903240103.jpg

添加行高之后:

http://img1.sycdn.imooc.com//climg/5cf8da9f00019cd102260105.jpg

如果是文字太紧凑了,就可以使用行高来拉开一些距离。

如果帮助到了你 欢迎采纳 祝学习愉快~

  • 提问者 全粘攻城狮 #1
    我没表达清楚,不设行高比设行高在浏览器显示的要高一些,第一屏标题字体大小48px;上填充156px,设置行高比不设置行高小了16个px;不设置行高是220px;你给出的回答是相反的。
    2019-06-06 23:48:49
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师