尽管位于 外部，仍然卡在 内部
我现在在折腾一个小型作品集网站，只是为了好玩。我有用HTML编码的经验，过去也做过一个博客站点原型，结构有点类似：头部在上方，主体包含一个flexbox，这样侧边栏和主体内容就可以并排放置。
然而，也许是因为不能有一个将所有内容放在body内作为flexbox的主容器，我的代码表现得有点怪，竟然把头部拉进了body，尽管原本显然不是那样写的。
header {
border-top: 2.5vh;
margin: 0 auto;
max-width: 70%;
}
body {
background-color: pink;
display: flex;
margin: 0 auto;
max-width: 70%;
}
aside {
width: 30%;
}
section {
align-items: center;
align-content: center;
text-align: center;
width: fit-content;
}
section .workText {
text-align: left;
}
.banner {
height: 10%;
}
#work {
width: 80%;
height: auto;
}
#pfp {
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<link href="./css/portfolioFormatting.css" rel="stylesheet" type="text/css" media="all">
<link rel="stylesheet" href="https://unpkg.com/98.css" />
<script src="./98.css-main/build.js"></script>
<script src="./98.css-main/server.js"></script>
</head>
<header class="window">
<nav class="title-bar">
<div class="title-bar-text">
Portfolio Art
</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</nav>
<section class="window-body">
<p>helloWorld</p>
</section>
</div>
</header>
<body>
<aside class="window">
<nav class="title-bar">
<div class="title-bar-text">
About Me
</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</nav>
<section class="window-body" id="aboutMe">
<img id="pfp" src="pfp.PNG">
<h3>Name</h3>
<p>My fanart and oc blog where I can post whatever</p>
<button>Home</button>
<button>Email</button>
<button>LinkedIn</button>
</section>
</aside>
<main>
<article class="window">
<nav class="title-bar">
<div class="title-bar-text">
Work
</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</nav>
<section class="window-body">
<img id="work" src="./artWork/Ink_Rat.webp">
<section class="workText">
<b>Name of Work</b>
<p>Info About Work</p>
</section>
</section>
</article>
</main>
</body>
</html>
解决方案
头部应该放在body标签内。
body标签是HTML页面中承载所有内容的主要容器。就这些。
备选方案
每个元素都应放在body内（除了放在head区段的那些）
如果你不把它们放在那里，浏览器会尝试修复你的错误，把它们自动放进body中，你对此无能为力。也许在过去十多年以前，你可以通过强制quirks模式等来实现你想要的渲染效果，但在现代浏览器上这并不管用。
所以把全部内容都放在body里面，你可以用额外的div来对元素进行结构化，从而得到你想要的布局。
站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。
相关文章
汇集全球数千款 AI 工具，每日持续更新，配套 AI 开发学习资源，轻松用 AI 提升工作效率。快捷键 Ctrl+D/⌘+D 一键收藏本站。