为什么提供的HTML代码中<style>标签设置的样式无法生效？

问题排查&修复方案 #

1. style标签位置不符合规范 #

按照HTML语法要求，所有<style>标签必须放在<head>标签内部，你当前将style写在了</head>闭合标签之外，部分浏览器会直接忽略这段外部样式，导致类样式不生效。

2. 父元素高度塌陷 #

你给类名为body的div设置了背景色，但div内部的两个p标签都使用了position:absolute绝对定位，绝对定位元素会脱离正常文档流，父元素无法被内部内容撑开，最终div高度为0，自然看不到设置的背景色。

修复后的完整代码 #

<!DOCTYPE html>
<!--© Copyright LightVoid Studio-->
<html style="font-family: Helvetica, Cursive; color:white; height: 100%;">
<head>
<meta charset="UTF-8">
<title>LightVoid Studio</title>
<style>
    /* 清除body默认边距 */
    body {
        margin: 0;
        height: 100%;
    }
    .body {
        background-color:#1A2B30;
        /* 给父元素设置高度撑满视口 */
        height: 100%;
    }
</style>
</head>

<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>

</html>

可选优化建议 #

如果没有特殊需求，不建议大量使用行内绝对定位布局，你可以直接给<body>标签设置背景色，不需要额外嵌套一层类名为body的div，减少冗余代码。

内容的提问来源于stack exchange，提问作者Sukces Tuber