一个关于css中font-size继承性的问题？

Posted 2023-03-28

我在body中定义了字体为font-szie:12px;可是为什么子元素们显示的字体大小都不是12px呢。我也知道font-size是继承的计算值。可是那不是指以em为单位的情况吗？

你应该知道font-size中还有这几个相对值吧（%，em，xx-small，x-small，small，medium，large，x-large，xx-large），这些相对值大小取决于父元素定义的font-size。

各个浏览器对每种标记（比如p，h1，h2等等）预定义的大小都有所不同，但可以肯定的是都是相对值。

也就是说对body指定一个font-size的绝对大小如12px，那么body的子元素p在未指定的情况下会使用浏览器预定义的font-size，举例说是medium或者1em，这时p的实际大小应该是12px；而h1（预定义可能是xx-large）实际就会是24px
对body指定不同的大小，子元素会具有相应比例的大小

要想统一所有的元素大小，可以通过这样指定：
body,p,h1,h2,h3,h4,h5,h6 font-size:14px; 追问

意思就是说，给body指定绝对大小12px，那它的子元素继承的实际大小就是=浏览器预定大小×12px吗？

追答

你大概理解到了，但不完全对。还是举具体的例子吧，比如chrome浏览器：
body的预定义没找到，看样子像16px
p没有预定义，那么用的是css定义font-size的默认值medium，实际大小是16px
h1预定义为2em，即两个字符大小，实际是16x2=32px

如果指定body font-size:12px;
p实际是12px，h1实际是24px

xx-small，x-small，small，medium，large，x-large，xx-large以及我忘记的smaller和larger都是标准的相对值大小，在过去的浏览器里很有用。但是现在每种浏览器对各个级别的放大倍数都不一样，所以很少用

参考技术A font-size是设置字体的一个css样式，其值可以为：px或者em;
继承方式是根据父元素来定的，如果父元素已经定义了字体大小，子元素没有设置字体大小，那么会默认使用父元素的font-size值，也可以单独给某一个元素设置其值 参考技术B 你在body中定义font-szie以后你在body中得所有未重新定义font-szie属性的div都将继承font-szie:12px;的属性！
至于继承的单位是看你当时定义的单位来计算的！你写的是12px;继承的时候就是px的单位！追问

问题是它们的字体大小不是12px。

追答

body
font-szie:12px;

你是这样写的吗？前面不能加.的

CSS设置字体大小

设置字体大小

在CSS中，通过 font-size 属性来设置元素中所包含文本的字体大小。
如果一个元素没有显式定义font-size属性，则会自动继承父元素的 font-size属性的计算结果。

定义 font-size 时，可以使用预定义关键字、绝对尺寸、相对尺寸：
（比较常用的单位有 px，%， rem；）

预定义关键字

有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按顺序依次增大，类似于衣服的尺寸。

绝对尺寸

有px（像素）、pt（点，1pt 相当于 1/72in）、in（英寸）、cm（厘米）、mm（毫米）等。

相对尺寸

有 em、%、rem，它们都是相对于某个参考基准的字体大小，来计算当前字体的大小，只是参考基准不同而已。