Code Copied

CSS继承详解

继承

当元素的一些CSS属性没有给定值时,则从文档树中逐级地去寻找父元素是否设定了这些CSS属性值,直到文档的根元素为止。
如果文档的根元素也没有设定该CSS属性,则取浏览器的默认值(1)
如果通过逐级追溯,能够找到元素属性值,则取该层级元素的属性值(2)
在逐级追溯过程中,如果不同层级都设置了该属性值,取最接近该一层级的属性值或取所有层级的计算值(3)(4)

这样说会比较晦涩难懂,我们以最简单的font-size属性来说明以上的几种情况。

未设置任何CSS属性(1)

下面一则HTML片段没有任何CSS属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<div id="container">
			<p>
				This paragraph has no css properties.
			</p>
		</div>

	</body>
</html>

image

该HTML片段文档树的结构是这样的

image

该文档结构中的<html><body><div>元素都是<p>元素的祖先元素,但它们所处的祖先层级依次降低,逐渐接近<p>元素。
在web浏览器中,如果用户没有在个性化设置中指定字体大小,<html>元素的默认字体大小是16px,按照继承规则<body><div><p>元素的字体大小都是16px。

作者的笔记本是15.6寸的,分辨率为1920*1080,chrome版本是44.0,默认字体大小为16px,默认字体大小可以��chrome的设置中指定。当然各大浏览器的标准不一样,本文仅以chrome作为演示客户端。

image

仅有一个祖先元素设置了CSS属性(2)

对该HTML片段稍作更改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			html{
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<p>
				This paragraph has no css properties.
			</p>
		</div>
	</body>
</html>

在<p>元素的所有祖先节点中,仅有<html>元素设置了font-size属性,所以<p>元素的字体大小为24px。

image

多个祖先元素都设置了同一个CSS属性

当多个祖先元素都设置了同一个CSS属性时,需要区分两种情况:固定值和相对值。

如果最近的祖先元素使用了固定值设置,则使用该固定值;
如果最近的祖先元素使用了相对值设置,则使用计算值。

font-size常见的两种设置方式是px和em,px是固定像素大小的值,em是相对长度单位。

最近的祖先使用固定值(3)

再对HTML片段进行修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			html{
				font-size: 24px;
			}
			body{
				font-size: 16px;
			}
			div{
				font-size: 32px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<p>
				This paragraph has no css properties.
			</p>
		</div>
	</body>
</html>

<html><body><div>元素都设置了font-size属性,并且都是用了px固定值。
由于<div>元素离<p>元素最近,所以最终<p>元素的字体大小为32px。

image

最近的祖先使用相对值(4)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			html{
				font-size: 16px;
			}
			body{
				font-size: 1.5em;
			}
			div{
				font-size: 2em;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<p>
				This paragraph has no css properties.
			</p>
		</div>
	</body>
</html>

<html><body><div>元素都设置了font-size属性,<html>元素font-size属性为固定值,<body>、<div>元素font-size属性为相对值,所以<p>元素的font-size需要经过计算16px * 1.5 * 2 = 48px。