如何将登录区域置于自定义CSS盒子内？

核心问题是你定义了#box的CSS样式，但没有任何HTML元素绑定这个id，所以样式没作用到登录区域上。要实现登录区域被盒子包裹，只需把登录内容的外层容器和这个样式关联起来，以下是两种可行方案：

方案一：给登录外层div添加id="box" #

直接修改登录区域的外层<div class="Log-in">，加上id="box"，这样#box的样式就会直接作用在这个容器上，包裹所有登录内容：

<div class="Log-in" id="box">
  <!-- 原有的登录内容保持不变 -->
</div>

方案二：修改CSS选择器匹配登录区域的class #

如果不想改动HTML结构，把CSS里的#box选择器改成.Log-in（因为登录区域的外层容器class是Log-in）：

.Log-in {
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

额外优化建议 #

• 不要重复使用同一个id：你页面里多个元素用了id="Center"，但id在HTML中必须唯一，建议改成class="center"，然后统一写CSS样式控制居中，更规范。
• 移除内联样式：把元素里的style属性内容移到<style>标签里，便于统一维护和修改。
• 添加内边距：给盒子加padding，避免内容紧贴边框，提升视觉效果。

优化后的完整代码示例 #

<body>
  <style>
    #box {
      width: 500px;
      height: 500px;
      border: 1px solid black;
      padding: 20px;
      box-sizing: border-box; /* 确保内边距不增加盒子总宽高 */
    }
    .center {
      text-align: center;
    }
    .input-box {
      margin: 20px 0;
    }
    .input-box input {
      background-color: #fff;
      border-radius: 0;
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      box-sizing: border-box;
    }
    .input-box i {
      float: right;
      position: relative;
      right: 15px;
      top: -35px;
    }
    .submit-btn {
      width: 170px;
      padding: 8px;
      cursor: pointer;
    }
    .remember-me {
      display: block;
      margin-top: 10px;
    }
  </style>

  <div class="Log-in" id="box">
    <div>
      <h1 class="center">Log in</h1>
      <div class="input-box">
        <input type="text" id="name" placeholder="Enter your name">
        <i class='bx bx-user'></i>
        <input type="password" id="password" placeholder="Enter your password">
        <i class='bx bx-lock-alt'></i>
      </div>
      <input type="submit" class="center submit-btn" onclick="myFunction()" value="Submit">
      <label class="center remember-me"><input type="checkbox">Remember me</label>
    </div>
  </div>
</body>

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