写静态页面如何量高度

行高的计算公式

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

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

结论

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

上一篇:服务器监控及虚拟机管理之七常见问题分析


下一篇:多个koa中间件执行顺序