初学者求助：单HTML文件中正确放置CSS样式避免布局破坏

单文件中CSS的常规放置位置 #

同一个HTML文件里，CSS代码优先放在<head>标签内的<style>标签中，这样样式会在页面元素渲染前加载，既能避免页面闪屏，也方便统一管理样式。当然也可以直接把样式写在元素的style属性里（内联样式），但这种方式不利于后期维护，不推荐大面积使用。

布局破坏的核心原因及解决办法 #

你添加的.advertise img { margin: 75px 0 371px; }会作用于所有带.advertise类的容器下的图片，大概率是这个样式覆盖了原有图片的margin设置，或者过大的margin值挤压/拉伸了其他布局元素。要避免影响原有布局，关键不是放代码的位置，而是限制这个样式的作用范围：

• 给需要调整margin的目标图片单独加一个类，比如special-margin，然后把样式改成：

  .advertise img.special-margin { margin: 75px 0 371px; }
  

  这样只会给带这个类的图片设置margin，不会影响其他同容器下的图片。
• 如果必须保留原选择器，检查原有样式中是否有针对.advertise img的margin设置，调整新样式的margin值，或者通过更具体的选择器（比如结合父元素的其他类）来精准定位目标元素，避免意外覆盖原有布局。

正确的代码示例 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
  <style>
    /* 原有CSS样式 */
    .advertise img {
      margin: 10px 0; /* 原有margin设置 */
    }
    /* 新添加的样式，仅作用于特定图片 */
    .advertise img.special-margin {
      margin: 75px 0 371px;
    }
  </style>
</head>
<body>
  <div class="advertise">
    <img src="normal-ad.jpg" alt="普通广告图">
    <!-- 只有这张图会应用新的margin样式 -->
    <img class="special-margin" src="target-ad.jpg" alt="需要调整margin的广告图">
  </div>
</body>
</html>

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