写静态页面如何量高度

行高的计算公式

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

image.png

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

3. 量取行高

   
   
   

   image.png
   
   

   我们量得行高为7,半行高为3.5,由于文字大多位于内容区域的下方一点,所以一般采取在文字上方就向上取整,在文字下方就向下取整.所以最终结果应该是给text2设置margin-top为40(前提是text的line-height为1,不然需要再减去text1的半行高),给苹果按钮设置margin-top为49px.

4. 当然实际开发中,我们是根据ui提供的图,能更准确的知道文字大小和行高,再根据这两样来计算即可.