您的位置:首页技术文章
文章详情页

css3 - css line-height和font-size高度问题,谁能帮忙解释一下呢

【字号: 日期:2023-07-14 17:14:50浏览:23作者:猪猪

问题描述

<p style='font-size: 14px;line-height: 3'> <p style='font-size: 2em'>hello<span style='font-size: 3em;line-height: 3em'> world</span> </p></p>

hello和world所在元素的实际行高是多少呢,原因是什么呢?

问题解答

回答1:

<p style='font-size: 14px;line-height: 3>

这个是定义了一个基准的字体大小,行高设置3的意思是下面所有子元素,其行高是自己字体的3倍

<p style='font-size: 2em'>这个元素的字体大小是父元素的2倍,214=28px,行高是自己字体的3倍 283 = 84px

<span style='font-size: 3em;line-height: 3em'>这个元素的字体大小是父元素的3倍,283=84px;行高是自己字体的3倍 843 = 252px

PS: span上面的line-height设置与否,效果是一样的

回答2:

行高,楼上两位都计算的很清楚了,我来说说我理解的原因吧。

px是绝对单位,不支持IE的缩放,em是相对单位。

1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值。

不仅仅是字体,将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。em指字体高,任意浏览器的默认字体高都是16px。所以,未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。

为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说,只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

em有如下特点:1.em的值并不是固定的; 2.em会继承父级元素的字体大小。

重写步骤: 1.body选择器中声明Font-size=62.5%; 2.将你的原来的px数值除以10,然后换上em作为单位;

计算em单位的字体大小和行距数值,要避免字体大小的重复声明,也就是避免1.2 * 1.2= 1.44的现象。比如说在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

em巧用:中文文章中,一般段首空两格。如果用px作为单位,对12px字体来说需要空出24px,对14px字体来说需要空出28px……这样换算非常不通用。如果用上em单位,这个问题就很好解决了,1个字的大小就是1em,那两个字的大小就是2em。因此,只需这样定义就行了:

p { text-indent: 2em; }

回答3:

由于你父元素设置了font-size:14px,所以子元素font-size中1em=14px而line-height为3,所以hello的字体大小是214=28px,所以line-height=328=84px由于字体的em会继承,所以world的字体大小是2314=84px,所以line-height=3*84=252px

回答4:

楼上都是正解

标签: CSS