为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕仙森 2019-02-26 16:58:34
<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啊
查看完整描述

2 回答

?
当年话下

TA贡献1890条经验 获得超9个赞

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

查看完整回答
反对 回复 2019-02-26
?
尚方宝剑之说

TA贡献1788条经验 获得超4个赞

 首先我们要明确的一点就是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。这个也是继承大小,而不是相对单位的值。

查看完整回答
反对 回复 2019-02-26
  • 2 回答
  • 0 关注
  • 716 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信