its*_*_me 10 html css font-size
我正在学习CSS,并在StackOverflow上阅读有关相对vs绝对字体大小的问题.我遇到了两个主题.
1.在一个线程中(CSS字体大小:相对于绝对值.使用哪个？),其中一个答案实际上是一个尚未回答的问题:[QUOTE]
问题,很多人在这里说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>
我知道它是一种奇怪的结构,但是让我们说布局需要一个像图形目的和CSS图像分层的结构.所以我想让box1 font = 100%,box2 = 1.2em.box3 = .8em,box4 = 1.6em
现在,问题是来自方框1的Em也转移到它的所有孩子,如果我错了就纠正我,所以这意味着box2不是正确的1.2em,当我们得到第4个字体大小时,它真的很难说它是什么.然而,当我们使用Pt或Px时,它会保持我们希望它保留的方式.
但是,Px尺寸不灵活,我喜欢在远离屏幕时在浏览器的菜单中使字体更大.让我们面对现实吧.所以Px尺寸已经出来了.那么为什么不使用Pt呢？浏览器差异有多大？
2.另一个线程有相同的问题(复合相对字体大小:采用子元素的字体大小的简洁方式,而不是父元素)与数字,计算 - 更多解释,没有正确的答案:
例如,如果我有:
td { font-size: 1.3em }
h2 { font-size: 2em }
h3 { font-size: 1.6em }
p { font-size: 1.2 }
我的表格单元格中有标题/段落,我知道我可以通过以下方法避免混合字体大小:
td h2, td h3, td p { font-size: 1em }
这将导致我的表格单元格中的标题/段落的字体大小为1.3em(td的字体大小).
但我正在寻找的是一个漂亮,干净的方式,让每个子元素拥有它的原始字体大小,而不是父元素.
我真的想避免做以下事情(当然我想避免使用px):
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
对于熟悉LESS的人,我正在使用它,并认为我应该能够用它来为我做计算,例如.使用访问者:
td h2 { font-size: h2['font-size'] / td['font-size'] }
这至少会使用原始值来进行计算,但感觉就像上面一样笨拙,而且,似乎LESS不再支持访问者.
这在概念上看起来如此简单,我觉得答案正在盯着我的脸,但我一直在敲打着我的脑袋一段时间,无法在任何地方找到答案.
请帮忙!此时,如果有人告诉我无法完成并且可以继续使用像素值,我会很高兴地相信它们!
现在可能很明显我的问题是... 是否有更好的方法来使用相对字体大小(或任何相对大小 - 如宽度,高度等) - 如果没有父元素影响子元素元件？
简短的回答 - 不，CSS 不是这样工作的。
更长的答案 - CSS，您可能知道，代表级联样式表。该级联的一部分是子元素将继承其父元素的属性。
我见过很多人使用的技术（包括我推荐的 Dan Cederholm 在他的书Bulletproof CSS中），是使基本字体大小等于 10px，而不是处理典型的默认基本字体大小 16px 。我不知道它对您的示例设计有多大帮助，但它可能有助于总体上使用基于 em 的字体。
我还发现了这篇关于百分比和基于 em 的字体大小之间的差异的文章。它有点旧，但百分比和 em 之间的比较仍然有效。
也就是说，现代浏览器会缩放整个页面，因此除非您必须支持 IE6，否则您可能可以不用使用像素字体大小，特别是如果您的设计确实需要那么复杂（因为如果您嵌套很多元素并且有很多不同的字体大小，可能有更好的设计方法）。
另外，正如 @JukkaK.Korpela 所说，表格通常不包含标题标签，这就是 <th> 和 <thead> 元素的用途。