为什么 <style> 标记在此代码中不起作用？答案

【问题标题】：Why is <style> tag not working in this code?为什么 <style> 标记在此代码中不起作用？
【发布时间】：2021-11-03 13:07:48
【问题描述】：

所以标签似乎从来没有很喜欢我。它总是给我带来麻烦，但事实证明他们的解决方案是显而易见的，而我只是愚蠢。但是这一次，我花了 4TH HOUR 试图找出可能出了什么问题（这正是我什至将 body content div 命名为“body”的原因，IK 这是不必要的哈哈）。代码如下：

<!DOCTYPE html>
<!--© Copyright LightVoid Studio-->
<html style="font-family: Helvetica, Cursive; color:white;">
<head>
<meta charset="UTF-8">
<title>LightVoid Studio</title>
</head>

<style>
    .body {
    background-color:#1A2B30;
    }
    </style>
<!--break-->

<body>
<div class="body">
<strong>
<p style="position:absolute;top:100px;left:20px;font-size:40px;">Hello</p>
<p style="position:absolute;top:140px;left:20px;">This is the official LightVoid Studio
website. If You're here for the first time, let's tell Ya what We're exactly doing. LightVoid
Studio is a relatively fresh Indie game studio that develops various software, such as games for Your computer.</p>

</div>
</body>


<!--break-->

</html>`

【问题讨论】：

也将样式放在中，它可能会起作用，但是您的 p 标签是绝对位置实际上会将它们拉出 div.body 删除 p 元素的绝对位置，看看是否背景颜色正在处理 div。否则添加一个 position:relative 到 .body 类，这样孩子就相对于它。
如有疑问，请使用 HTML 验证器。浏览器旨在修复无效的 HTML，但它们不一定会按照您想要的方式进行。
<style> 标签可以放在代码中的任何位置。问题是您将.body 类的全部内容显示为绝对，因此它的高度将为0。如果您使用inspect 元素，您应该能够看到background-color 样式已被应用。
这能回答你的问题吗？ Make absolute positioned div expand parent div height

标签： html css

【解决方案1】：

这是因为<div class="body"> 的高度为0。它只包含绝对定位的元素，不占用任何空间，所以它基本上是空的。

一些建议：

学习使用浏览器的调试器（DOM Inspector）。它将向您显示有关元素的信息，例如它们的大小和应用的样式。
避免绝对定位。它基本上破坏了 CSS 的工作方式，这对初学者来说很困难。

编辑：还有一件事：你有一个打开的<strong> 标签，没有一个关闭的</strong>。请记住，您不能将块元素（例如 <p>）放在内联元素中，例如 <strong>。

【讨论】：

【解决方案2】：

我发现了你的错误。

导航到html标签，在那里你可以看到样式属性，颜色=白色。这使所有文本变白，与画布相同，因此它是不可见的。

现在，文本标签是绝对定位的，这意味着它们在流之外，因此 DIV 的高度和宽度为 0，因此您看不到任何颜色，因为 div 本质上是一个 0x0 的框。

我已经调整了更改，请检查：

<!DOCTYPE html>
<!--© Copyright LightVoid Studio-->
<html style="font-family: Helvetica, Cursive;">
<head>
<meta charset="UTF-8">
<title>LightVoid Studio</title>
</head>

<style>
    .body {
    background-color:#1A2B30;
    }
    </style>
<!--break-->

<body>
<div class="body">
<strong>
<p>Hello</p>
<p>This is the official LightVoid Studio
website. If You're here for the first time, let's tell Ya what We're exactly doing. LightVoid
Studio is a relatively fresh Indie game studio that develops various software, such as games for Your computer.</p>
</strong>
</div>
</body>


<!--break-->

</html>`

【讨论】：

【解决方案3】：

我认为这与 <style> 的位置无关。

但是你的孩子（元素）是postition: absolute; 所以.body 是0 高度。

试试：

<div class="body" style="height:100px">

所以你我会看到问题

（这只是测试，请看RoToRa的回答）

【讨论】：

不要教初学者硬编码高度之类的东西。
嗯，谢谢，这解决了我的问题。而且我不是初学者，实际上我在以前的网站上做过类似的事情，但现在看起来它的工作方式完全不同。无论如何，谢谢你们

【解决方案4】：

因为它不在关闭 </head> 和打开 <body> 之外

应该在<head>和</head>之间

【讨论】：

风格可以在任何地方
虽然这是真的，但这不是它不起作用的原因。