博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
写静态页面如何量高度
阅读量:7257 次
发布时间:2019-06-29

本文共 395 字,大约阅读时间需要 1 分钟。

行高的计算公式

  • 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提供的图,能更准确的知道文字大小和行高,再根据这两样来计算即可.

转载地址:http://wsvdm.baihongyu.com/

你可能感兴趣的文章
RAC1——Clusterware概念简介1
查看>>
一位10年Java工作经验的架构师聊Java和工作经验
查看>>
试除法求最小N个素数之二
查看>>
HDU2017 字符串统计
查看>>
terminator终端工具
查看>>
【转】那些相见恨晚的 JavaScript 技巧
查看>>
Lind.DDD.Authorization用户授权介绍
查看>>
谈谈设计模式~原型模式(Prototype)
查看>>
商城商品倒计时原生插件
查看>>
激光打印机的Color/paper, Xerography介绍
查看>>
敏捷开发
查看>>
react-native项目构建配置及window调试devtools
查看>>
Gym 100341C AVL Trees NTT
查看>>
第 1 章 虚拟化 - 004 - 启动第一个 KVM 虚机
查看>>
2.1.2_BeanFactory.getBean内部处理逻辑
查看>>
储存过程-原理、语法、函数详细说明
查看>>
第十六周项目6-黑豆传说
查看>>
【servlet3.0新特性】Annotation注解配置
查看>>
js操作cookie
查看>>
spring注解方式 idea报could not autowire,eclipse却没有问题
查看>>