答：style 标签可以放在 <body> 标签的底部。
可以看到，这两种位置都是可以的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>is is</div>
<script>
</script>
<style>
div {
color: red;
font-size: 20px;
font-weight: bold;
}
</style>
</body>
<!-- 或者放在这里 -->
<!-- <style>
div {
color: red;
font-size: 20px;
font-weight: bold;
}
</style> -->
</html>
为什么可以？
和浏览器解析顺序有关: 浏览器从上到下解析 HTML 文档。
- 当浏览器遇到
<head>部分的<style>标签时，它会立即加载并解析其中的 CSS 规则，并将其应用到页面上。 - 如果
<style>标签放在<body>底部，浏览器会先解析完所有的 HTML 内容，构建好 DOM 树（文档对象模型），然后才遇到<style>标签。 - 在解析
<style>标签后，浏览器会再次遍历 DOM 树，将 CSS 规则应用到对应的 HTML 元素上。
从渲染过程的角度进行对比:
- 放在
<head>中: CSS 会在 DOM 树完全构建之前就被解析和应用。这意味着当页面开始渲染时，样式就已经准备好了，用户看到的页面会更快地应用正确的样式。这是最常见和推荐的做法。 - 放在
<body>底部: HTML 内容会先被渲染出来，可能带有默认样式（浏览器自带的），然后 CSS 规则被加载和应用。这可能会导致一个短暂的“无样式内容”（FOUC - Flash of Unstyled Content）的现象，即用户可能会先看到没有样式的页面，然后样式才突然应用上。这可能会导致页面内容的初始渲染没有样式，然后在样式加载完成后发生重绘或重排。
