CSS字体大小冲突_Css_Fonts_Size

CSS字体大小冲突

css fonts

CSS字体大小冲突,css,fonts,size,Css,Fonts,Size,我有一个关于CSS字体大小的问题。我有一个CSS代码，其中一行“上面没有多少”的字体大小为200%。但同时，我已指定文本正文的字体大小为12pt。当我将正文的字体大小更改为8pt时，“上面没有多少”一行变小了！当然，更改正文字体大小不应覆盖此特定行的字体大小（我特别要求为200%）。当我将正文字体大小更改为8pt时，是否有人可以告诉我此行的新字体大小？它是200%*8/12=133%。这就是它的工作原理吗？我是个十足的初学者 <!DOCTYPE html> <h

我有一个关于CSS字体大小的问题。我有一个CSS代码，其中一行“上面没有多少”的字体大小为200%。但同时，我已指定文本正文的字体大小为12pt。当我将正文的字体大小更改为8pt时，“上面没有多少”一行变小了！当然，更改正文字体大小不应覆盖此特定行的字体大小（我特别要求为200%）。当我将正文字体大小更改为8pt时，是否有人可以告诉我此行的新字体大小？它是200%*8/12=133%。这就是它的工作原理吗？我是个十足的初学者

    <!DOCTYPE html>
    <head>
    <link rel="stylesheet" href="mystyle.css">
    <style>
    p.bigger{font-size:200%}
    p.smaller{font-size:10pt}
    #intro{color:red}
    body{font-size:12pt}
    p{color:blue; font:Arial, sans-serif}
    h1{color:green}
    </style>
    </head>
    <body>
    <h1>Introduction</h1>
    <p id="intro">Welcome to my page</p>
    <p class="bigger">There is not much on it</p>
    <p class="smaller">Except this</p>
    <ul>
    <li>Short list</li>
    </ul>
    <h1 style="font-style:italic">Contact</h1>
    Here is my address
    </body>
    <html>


p、 更大{字体大小：200%}
p、 较小的{字体大小：10pt}
#简介{颜色：红色}
正文{字体大小：12pt}
p{颜色：蓝色；字体：Arial，无衬线}
h1{颜色：绿色}
介绍
欢迎来到我的页面
上面没有太多内容
除此之外

短名单

接触
这是我的地址

当您在元素的

字体大小中使用百分比时，它将引用父元素的字体大小值
因此，您的.biger
段落的父元素是正文
，因此最终的字体大小
将是8pt*2=16pt
，这正是它的工作原理，尽管另一种书写方式是使用：
2em

这与200%
设置字体大小时，应该使用em
而不是百分比
这是因为em
值将继承parent
值（在本例中为body）
因此，与您的8px
或12px
相比，诸如font-size:2em
之类的东西相当于200%


body{font size:8px；}

thisFontSize{font-size:2em；}

thisFontSize
将等于16px

或
body{font size:12px；}

thisFontSize{font-size:2em；}

thisFontSize
将等于24px


如果您需要它比body
以外的东西大2em
，您可以这样定义它。摆弄这把小提琴，因为它可能更有意义
JSFiddle:百分比是相对值，而pt/px是绝对值。所以，在你的例子中，你得到了12分（24分）的200%或8分（16分）的200%。因此，您应该为p.biger
指定一个绝对值，例如p.biger{font size:16pt}
，因此在更改正文字体大小时，它只会影响具有百分比的元素或未指定字体大小的元素（在您的示例中为h1
）。请记住，body
包含所有元素，它在样式表中是在h1
之后还是在p
之后并不重要，但它确实应该在开头
也可以考虑使用标题标签来代替标题和字幕，而不是仅仅依赖于文本大小的不同类。检查示例
另外，请参阅有关可用测量单位的文章。
解释得很好。谢谢，Nicholas。添加了一个解决方案，使其不使用主体作为比较。如果您认为这是一个可接受的答案，请使用投票箭头旁边的绿色复选框标记它。JSFIDLE站点肯定比w3schools站点更友好。我给你打了个勾，谢谢。真糟糕。。。如果你已经知道，但需要一个参考，但对学习来说不是很好，那就好了。感谢您的投票。从最初的问题来看，我认为用户不希望在更改正文字体大小时更改thisFontSize的大小。使用em
如何解决问题？在这个特定场景中，它与%
有何不同？我很困惑。