CSS全局样式引发布局混乱？这样避免元素错位

解决方案：精确控制样式

要解决这个问题，需要更精确地控制样式，避免全局样式对不应影响的元素产生影响。以下是一些建议：

1. 移除或修改全局背景色设置: 移除 * { background: #30302F; }，或者将其修改为更具体的选择器，只应用于需要该背景色的元素。

2. 覆盖特定元素的背景色: 如果希望段落

   拥有不同的背景色，可以使用更具体的 CSS 规则来覆盖全局样式。例如：

   .P1,
   .P1 > p {
     background-color: transparent; /* 或者其他你想要的颜色 */
   }

   这段代码将 .P1 类及其子元素

   的背景色设置为 transparent，从而使其背景色不再受全局样式的影响。

3. 避免过度使用全局选择器: 尽量避免使用 * 选择器设置样式，除非确实需要对所有元素应用相同的样式。优先使用类选择器、ID 选择器或更具体的元素选择器。

代码示例：修改后的 CSS

以下是修改后的 CSS 代码片段，解决了段落

渲染在导航栏内部的问题：

html,
body {
  font-family: 'Cinzel Decorative', cursive;
  text-align: center;
  background: #543DAF;
}

body {
  padding-bottom: 56px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* background: #30302F;  移除或修改此行 */
}

li,
a,
button {
  font-family: "Cinzel Decorative";
  font-weight: 500;
  font-size: 16px;
  color: #F4DA65;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10%;
  background: #30302F; /* 将背景色应用到 header */
}

/* ... 其他样式 ... */

.P1,
.P1 > p {
  background-color: transparent; /* 设置段落背景色为透明 */
}

HTML结构优化

此外，提供的HTML结构中，导航链接直接嵌套在