font-size,line-height,text-indent大小的设置方法(px,em,百分数)及其继承性

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


  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 在CSS中,可以使用font-family属性来定义文本的字体系列。例如,可以使用以下代码将字体系列设置为"微软雅黑": p { font-family: "微软雅黑"; } 可以使用逗号分隔多个字体系列,以便在某些情况下无法加载指定字体时,可以使用备用字体。例如: div { font-family: Arial, "Microsoft Yahei", "微软雅黑"; } 关于line-height设置,可以使用具体的数值或者预定义的关键字来定义行高。例如,可以使用以下代码将行高设置为1.5倍字体大小: p { line-height: 1.5; } 也可以使用预定义的关键字,如"normal"表示正常行高,"inherit"表示继承父元素的行高等。 希望以上回答能够解决您的问题。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [CSS字体属性(font-family、font-size、font-weight、font-style)](https://blog.csdn.net/weixin_42579348/article/details/109185395)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [【文本】HTML5 Canvas设置字型属性(font-style、font-variant、font-weight、font-sizeline-height、font...](https://blog.csdn.net/HuoYiHengYuan/article/details/101677114)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值