em不是父元素的字体大小吗?

发布于 2022-09-11 17:19:13 字数 524 浏览 12 评论 0

<style>

            p {
                text-indent: 2em; /*它计算后不应该是2*66px吗*/
                font-size: 16px;
            }

            .div {
                font-size: 66px;
            }
</style>

<div class="div">
    <p>
    大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大段文本大
    </p>
</div>

为什么缩进是16px2,而不是66px2呢?

em指的应该是父元素的字号也就是66px啊

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

安穩 2022-09-18 17:19:13

em是以当前元素的字体大小为基准。
em相对于父元素字体大小的前提是你当前元素没有设置字体大小,会继承父元素的字体大小。

花开柳相依 2022-09-18 17:19:13

行距=line-height减font-size,其高度就是1em

引用《张鑫旭css世界》

图片描述

慢慢从新开始 2022-09-18 17:19:13

em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size,text-indent也不例外

沩ん囻菔务 2022-09-18 17:19:13

  首先我们要明确的一点就是font-size,line-height,text-indent都是可继承的css属性,接下来我们就来讨论这三个属性的使用方法还有它们的继承方法,他们看起来是很简单,可实际上却很容易在用法上混淆。
一、font-size(字体大小) 
1.px 
       直接使用像素指定要使用的特定字号,如p{font-size:18px;}。 
2.em或百分数 
       em是用来设置相对父元素的字体大小,em的值=要指定的字体大小/父元素的字体大小。例如,我们要将p元素的字体大小设为18px,其父元素的字体大小是16px,因为18/16=1.125,因此设置p{font-size:1.125}即可。 使用em在我看来是最好的来设置字体大小的方法,因为相对单位有更大的灵活性,有利于响应式Web设计开发。百分数的用法和em差不多,只不过em使用更加普遍。 
      最后来说这三种方法的继承性,px就不多说了,就是继承px的大小。至于使用em和百分数p%这两种相对单位,它们的子元素继承的不是相对单位的值,而是计算后的值。 
二、line-height(行高) 
1.px(不多说)
2.没有单位的数字n(最经常使用) 
        line-height的大小为元素的字体大小和n相乘之后的数值。如p{font-size:16px; line-height:1.5;}, 那么p元素的行高就是24px。使用这种方法,子元素继承的是父元素的因子n,而不是计算后的大小。 
3.em或百分数 
       line-height的相对单位em、百分数的使用方法与font-size是不同的,line-height的相对单位是相对于当前元素的字体大小来说的,而不是相对于其父元素。如,p元素字体大小为20px,line-height为1em,其父元素的字体大小为16px,那么p元素的line-height等于20px而不是16px。不过继承性和font-size是一样的,都是继承大小,即产生的行高,而不是相对单位的值。 
三、text-indent(文本缩进) 
1.px(不多说) 
2.em 
       与line-height一样,根据当前元素的字体大小计算,继承生成的大小。 一般段落的首行缩进都是2em。
3.百分数p% 
       text-indent的百分数的使用方法比较独特,它既不是现对于父元素的字体大小来计算,也不是相对于当前元素的字体大小来计算,它是相对于父元素的宽度进行计算。如,父元素的宽度是300px,那么它的子元素的10%的text-indent就是30px。这个也是继承大小,而不是相对单位的值。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文