Html 子元素的相对字体大小？_Html_Css_Font Size

Html 子元素的相对字体大小？

html css

Html 子元素的相对字体大小？,html,css,font-size,Html,Css,Font Size,我正在学习CSS，并在StackOverflow上阅读有关相对字体大小与绝对字体大小的问题。我碰到两条线 1。在一个线程（）中，其中一个答案实际上是一个尚未回答的问题：[引用] 问题是，这里很多人说Pt只用于打印。但是，有一个简单的功能，可以让文本快速达到您想要的大小，而不需要记住哪个DIV有什么Em或%值，这难道不是很好吗。例如，当您有： <body> <div id="box1"> test text sample1 <div id="box2"

我正在学习CSS，并在StackOverflow上阅读有关相对字体大小与绝对字体大小的问题。我碰到两条线

1。在一个线程（）中，其中一个答案实际上是一个尚未回答的问题：[引用]

问题是，这里很多人说Pt只用于打印。但是，有一个简单的功能，可以让文本快速达到您想要的大小，而不需要记住哪个DIV有什么Em或%值，这难道不是很好吗。例如，当您有：

<body>
 <div id="box1">
   test text sample1
   <div id="box2">
     test text sample2
     <div id="box3">
       test text sample3
        <div id="box4">
          test text sample4
        </div>
     </div>
   </div>
</div>

我的表格单元格中有标题/段落，我知道我可以通过以下方式避免字体大小的复合：

td h2, td h3, td p { font-size: 1em }

这将导致我的表格单元格中的标题/段落的字体大小为1.3em（td的字体大小）

但我要寻找的是一种很好的、干净的方法，使每个子元素都具有其原始字体大小，而不是父元素的字体大小

我真的希望避免做以下事情（当然我也希望避免使用px）：

对于任何熟悉LESS的人，我正在使用它，并认为我应该能够使用它来为我进行计算，例如使用访问器：

td h2 { font-size: h2['font-size'] / td['font-size'] }

这至少会使用原始值进行计算，但感觉和上面一样笨拙，而且，它似乎不再支持访问器

这在概念上似乎很简单，我觉得答案就在我面前，但我已经用头撞了一会儿，到处都找不到答案

请帮忙！在这一点上，如果有人告诉我这是不可能的，可以继续使用像素值，我会很高兴地相信他们

现在很明显我的问题是。。。在子元素不受父元素影响的情况下，是否有更好的方法使用相对字体大小（或任何相对大小，如宽度、高度等）？

否，没有更好的方法使用自适应（相对）字体大小，而不是将其设置为相对于父元素的字体大小。原因是它们被设计成这样工作。如果这意味着在创作中要进行太多的计算，那么真正的原因可能是总体设计太复杂，或者您使用了太多的字体大小

例如，通常表不包含标题，除非您使用表进行布局。有些人可能会说表格布局对他们来说是个问题，但我更愿意说问题在于设置表格的字体大小。你不需要这样做；您可以为表中的不同元素设置字体大小，

简短的回答是-不，CSS不是这样工作的

较长的答案-CSS，如您所知，代表级联样式表。级联的一部分是子元素将继承其父元素的属性

我见过很多人使用的技术（包括Dan Cederholm在他的书《防弹CSS》，我推荐）是，而不是处理典型的默认基本字体大小16px。我不知道这对您的示例设计有多大帮助，但总体而言，它可能有助于使用基于em的字体

我还发现了百分比和基于em的字体大小之间的差异。它有点旧，但百分比和em之间的比较仍然有效

这就是说，现代浏览器可以缩放整个页面，因此除非您必须支持IE6，否则您可能可以不使用像素字体大小，特别是如果您的设计确实需要如此复杂（因为如果您嵌套了那么多元素，并且有那么多不同的字体大小，那么可能有更好的设计方法）

另外，正如@JukkaK.Korpela所说，表格通常不包含标题标签，这就是and元素的用途。

框2正好是1.2em，但不一定是1.2rem

rem

几乎与

em

相同，但它是css3的一部分，并且它是

等于根元素上“字体大小”的计算值

在根元素的“font-size”属性上指定时 “rem”单位指物业的初始价值

对于字体大小，我可以想象的一种方法是，将字体大小指定为尽可能接近要设置字体大小的元素，并且可能需要引入一些其他元素来绕过嵌套规则

例如，对于您正在讨论的代码，对于每一段文本，用一个跨距将其包装，然后在跨距上设置字体大小。由于这些跨距不是嵌套的，因此所有字体大小都是相对于box1的，结果如下：


测试文本样本1
测试文本样本2
测试文本样本3
测试文本样本4

所以，在某种程度上，CSS中过多的相对字体大小意味着页面加载缓慢（至少与使用绝对值相比），因为它们需要进行更多的处理？是吗？@Kr1s，我认为效率问题与此无关。我指的是创作中的计算，也就是说，如果存在具有自己字体大小设置的嵌套元素，作者需要进行一些计算以找到合适的因素。在CSS中使用过多的相对字体大小是否意味着页面加载速度慢（至少与使用绝对值相比）因为它们需要进行更多的处理？从技术上讲，它可能加载得更慢，但计算机计算速度太快，除非你按数千次的顺序进行计算，否则这不可能有什么关系。您最大的问题是a）可维护性（跟踪实际尺寸）和b）总体设计（大多数设计在尺寸或颜色等方面只有少量差异时最有效）。编写代码以使用HTML最佳实践可能会比使用ems和像素对加载速度产生更大的影响。

td h2 { font-size: 1.54em }  // 1.3 x 1.54 ~ 2
td h3 { font-size: 1.23em }  // 1.3 x 1.23 ~ 1.6
td p { font-size: 0.92em }  // 1.3 x 0.92 ~ 1.2

td h2 { font-size: h2['font-size'] / td['font-size'] }

<div id="box1">
<span id="span1">test text sample1</span>
<div id="box2">
    <span id="span2">test text sample2</span>
    <div id="box3">
        <span id="span3">test text sample3</span>
        <div id="box4">
            <span id="span4">test text sample4</span>
        </div>
    </div>
</div>