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。这个也是继承大小,而不是相对单位的值。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值