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

一、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

CSS/font-size和line-height属性继承的研究相关推荐

html中高与行高的区别,深入了解css的行高Line Height属性
什么是行间距? 古时候我们是用印刷机来处理文字,印出来的每个字都位于独立的一个块里. 行间距,即传说中控制两行文字之间垂直距离的东东. 在CSS,line-height被用来控制行与行之间的垂直距离. ...
css font size 单位,css中font-size的单位总结：px、em、pt
px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的. em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是 ...
真正的能理解CSS中的line-height，height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
CSS中的line-height，height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
微软2016校园招聘4月在线笔试 hihocoder 1288 Font Size (模拟)
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The book he reads now ...
js获取html font size,JavaScript fontsize方法入门实例（按照指定的尺寸来显示字符串）...
JavaScript fontsize 方法 fontsize 方法返回使用 HTML font 标签中 size 属性定义字体大小的字符串.其语法如下: str_object.fontsize( s ...
html字号的范围,font size大小
font size="+1"里面的数值是什么意思 font size="+1" font size="+2" font size=" ...
Css Font 详细研究
2019独角兽企业重金招聘Python工程师标准>>> 在设计自己博客主页的时候想修改下字体,结果发现自己对字体(css font)的了解只是一知半解,属于翻书医生的水平,呵呵.就细 ...
成功解决OSError: cannot open resource self.font = core.getfont(font, size, index, encoding, layout_engin
成功解决OSError: cannot open resource self.font = core.getfont(font, size, index, encoding, layout_engin ...
[css] 如何解决html设置height：100%无效的问题？
[css] 如何解决html设置height:100%无效的问题? 在外层包一个给定高度的 div 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...

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

CSS/font-size和line-height属性继承的研究相关推荐

最新文章

热门文章