写静态页面如何量高度-阿里云开发者社区

开发者社区> 云计算> 正文

写静态页面如何量高度

简介: 行高的计算公式 line-height行高的计算方式是: 行高 = line-height - font-size; 半行高 = 行高/2 下面的图片中,我们应该如何量取高度呢 如果我们设置text2的margin-top为43,苹果按钮的margin-top为53那就大错特错了可以看得出...

行高的计算公式

  • line-height行高的计算方式是:
  • 行高 = line-height - font-size;
  • 半行高 = 行高/2
  • 下面的图片中,我们应该如何量取高度呢
    image

如果我们设置text2的margin-top为43,苹果按钮的margin-top为53那就大错特错了
可以看得出来文字的行高是大于1的,另外第一行文字的上方存在这半行高,我们需要减去
量取行高
image

结论

我们量得行高为7,半行高为3.5,由于文字大多位于内容区域的下方一点,所以一般采取在文字上方就向上取整,在文字下方就向下取整.所以最终结果应该是给text2设置margin-top为40(前提是text的line-height为1,不然需要再减去text1的半行高),给苹果按钮设置margin-top为49px.
当然实际开发中,我们是根据ui提供的图,能更准确的知道文字大小和行高,再根据这两样来计算即可.

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

其他文章