我正在学习CSS,并在StackOverflow上阅读有关Relative vs Absolute font-sized的问题.我遇到两个线程. 在一个线程(CSS font size: rel
... . . 我正在学习CSS,并在StackOverflow上阅读有关Relative vs Absolute font-sized的问题.我遇到两个线程.
在一个线程(CSS font size: relative vs. absolute values. Which to use?)中,其中一个答案实际上是一个尚未回答的问题：[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？浏览器的差异有多大？
另一个线程与数字,计算相同的问题(Compounded relative font-sizes: a clean way to adopt the font-size of the child,not the parent element) – 更具说明性,没有正确答案：
例如,如果我有：
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 ~ 2td h3 { font-size: 1.23em } // 1.3 x 1.23 ~ 1.6td 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中,我推荐)是make the base font size equivalent to 10px,而不是处理16px的典型默认基本字体大小.我不知道这将有助于您的示例设计,但它可能有助于整体使用基于em的字体.
我也发现了this article在百分比和基于em的字体大小之间的差异.这有点老,但百分比和em之间的比较仍然有效.
也就是说,现代浏览器放大整个页面,所以除非你必须支持IE6,否则你可以使用像素字体大小,特别是如果你的设计真的需要这么复杂(因为如果你正在嵌套许多元素,并有许多不同的字体大小,可能有一个更好的方式来设计它).
另外,正如@ JukkaK.Korpela所说,表格通常不包含标题标签,这就是< th>和< aad>元素是为.
. . .. ...