CSS边框覆盖整页而非仅div元素，求解决方案

• 先检查CSS选择器是否正确，别误写为body或html选择器（那会给整个页面加边框）。建议用精准的选择器定位目标div：

  /* 给所有div添加边框 */
  div {
    border: 2px solid #000;
  }
  /* 更推荐用类选择器，仅给指定div加边框 */
  .target-div {
    border: 2px solid #000;
  }
  

• 限制div的宽度。div默认是块级元素，会占满父容器宽度，所以看起来边框覆盖页面。可以设置宽度让它适配内容：

  .target-div {
    border: 2px solid #000;
    width: fit-content; /* 宽度随内容自动调整 */
    /* 也可设置固定宽度，比如width: 350px; */
  }
  

• 排查全局样式冲突。如果用了*通配符选择器给所有元素加边框，或者父元素（如body）有边框样式，都会导致问题。修改为仅针对目标div：

  /* 错误示例：不要给所有元素加边框 */
  * {
    border: 1px solid red;
  }
  /* 修正后：只给目标div加边框 */
  .target-div {
    border: 2px solid #000;
  }
  

• 内联样式要写对位置。如果用内联样式，直接写在目标div标签内，不要加到其他元素上：

  <div style="border: 2px solid black; width: fit-content;">这是带边框的div内容</div>
  

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