CSS/font-size和line-height属性继承的研究

最新推荐文章于 2022-09-05 14:21:06 发布

banmo1186

最新推荐文章于 2022-09-05 14:21:06 发布

阅读量250

点赞数

原文链接：http://www.cnblogs.com/Remix/articles/4546486.html

版权

一、line-height的继承研究：

首先通过一道CSS的题目来展开对标题的讨论。

已知HTML如下：

已有CSS如下：

.a{font-size:12px; line-height:200%;}

.b{font-size:16px;}

问最终p的line-height是多少？

w3c中对line-height的解释是：

　　line-height 属性设置行间的距离（行高）。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。可继承，值可为normal，%，number（缩放因子），length，inherit。

那么对于父元素设置的这几个值子元素如何继承呢？可以看已下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p {border: 1px solid #ccc;font-size: 18px;}
            .no p {font-size: 16px;}
            .a, .b, .c, .d {font-size: 14px;}    
            .b {line-height: 200%;}
            .c {line-height: 2;}
            .d {line-height: 28px;}    
            span {background: #FFFF99;};        
        </style>
    </head>
    <body>
        <div class="no"><p>这是用于测试normal的P(未设置父元素字体大小) <span>line-height为默认值</span></p></div>
        <div class="a"><p>这是用于测试normal的P <span>line-height为默认值</span></p></div>
        <div class="b"><p>这是用于测试%的P <span>line-height为200%</span></p></div>
        <div class="c"><p>这是用于测试缩放系数的P <span>line-height为2</span></p></div>
        <div class="d"><p>这是用于测试length的P <span>line-height为28px</span></p></div>
    </body>
</html>

在代码中我设置了第一个P的字体大小为浏览器默认大小，而其他几个P的字体大小为18px，它的父元素的字体大小为14px。

测试结果如下图：

从图中可以看出：

　第一个P继承的line-height为默认值：父子号大小*1.4（火狐下）;
　第二个P继承的line-height为：p字号大小*1.4（火狐下）;
　可以看出第三个p和第四个p的line-height是一样的：28px，也就是父字号大小*2；那么可以推断父元素line-height设置值为%是已其自身的字号大小为基准的;
　第四个P的line-height与三和五不同，即父元素的line-height值设置为缩放系数，其子元素行高继承值是以其子元素字号大小为基准的。在例子里也就是18*2=36px;

那样就比较好理解了：line-height值是与font-size相关的，如果父元素未设置line-height,子元素的line-height为normal；如果父元素设置了line-height,值为%，length，子元素的line-height与父元素的字体大小相关，如果值为缩放系数，子元素的line-height与其自身的字体大小相关。

二、font-size的继承研究：

现在来研究一下font-size的继承方式：

先来思考一下下面两种情况的p的字体大小：

<body>
　　<p>一段文字</p>
    <h1><p>一段文字</p></h1>
    <h2><p>一段文字</p></h2>
</body>

css：

　　1.body{font-size:85%}

　　2.body{font-size:85%}

　　 h1 {font-size:150%}

　　　h2 {font-size:85%}

这时候body、body>p、h1、h2、h1>p、h2>p计算后的大小分别为：

计算规则：浏览器字体默认大小约16px。

body：16*0.85=13.6；

body>p(字体大小继承body) : 16*0.85=13.6；

body>h1(字体大小先继承body在设置) ： 16*0.85*1.5=20.4；

……其他同理。

转载于:https://www.cnblogs.com/Remix/articles/4546486.html

banmo1186

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS/font-size和line-height属性继承的研究

一、line-height的继承研究：首先通过一道CSS的题目来展开对标题的讨论。已知HTML如下：<div class=“a”><p class=“b”>文字</p></div>已有CSS如下：.a{font-size:12px; line-height:200%;}.b{font-size:16px;} ...
复制链接

扫一扫