写静态页面如何量高度
行高的计算公式
- 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提供的图,能更准确的知道文字大小和行高,再根据这两样来计算即可.