想在 HTML 里控制页面外观，就得先把样式代码用对。样式代码通常有三种写法：写在开始标签的 style 属性里，称为内联样式；写在 <head> 区域内的 <style> 标签里，称为内部样式表；写在后缀为 .css 的外部文件里，再用 <link> 标签引入。三种方式都能生效，但优先级不同：继承和层叠机制会决定最终哪个属性值被浏览器采用。很多布局乱的问题，并不是样式没写，而是同一元素被多个规则同时命中，最终采用了不符合预期的规则。
一个典型的引入顺序错误就可能导致部分属性被覆盖。例如外部样式表定义了 .box 的宽度，内部样式表又对同一个类设置了不同宽度，如果不理解层叠规则，调试时就会感觉样式失灵。下面这个示例把内联、内部和外部三种方式放在一起，用来观察最终宽度。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>样式用法示例</title>
<link rel="stylesheet" href="style.css">
<style>
.box {
width: 200px;
height: 100px;
background-color: #eee;
}
</style>
</head>
<body>
<div class="box" style="width: 300px;">内联样式演示</div>
</body>
</html>
在这个例子里，<div> 标签的内联样式会把宽度设置为 300px，而不是内部样式表里的 200px。这是因为内联样式在普通规则里的优先级最高。但如果某条外部规则加了 !important，情况又会反转，所以不能只记内联最大，还要结合具体规则判断。
一、样式代码冲突到底是怎么产生的
样式冲突最直接的表现是同一个 CSS 属性被多次赋值。比如页面里同时存在 .box { width: 200px; } 和 div.box { width: 300px; }，浏览器就必须决定最后采用哪个宽度。CSS 的层叠规则核心由选择器的特异性决定。特异性可以粗略理解为四组数字：内联样式最高，其次是 ID 选择器，然后是类选择器、属性选择器和伪类，最后是元素选择器和伪元素。当两个规则的特异性相同时，后加载的规则会覆盖先加载的规则。
除了特异性，继承和全局样式污染也是常见诱因。比如把边框或盒模型规则直接写在 <div> 选择器上，会让页面里所有 <div> 受到影响。某些布局组件本来宽度是精心计算好的，多出来的边框就会让总宽度变大，从而把右侧元素挤下去。这种情况在引入第三方 UI 库后尤为明显，因为库里的全局样式和自己的样式会同时作用于同一批元素。
下面这段代码就是故意制造冲突，帮助理解覆盖关系。
/* 全局样式 */
.box {
width: 200px;
height: 100px;
float: left;
}
/* 组件样式 */
div.box {
width: 320px;
}
/* 工具类 */
.w-400 {
width: 400px !important;
}
如果某个 <div> 同时带有 box 和 w-400 两个类，最终宽度会变成 400px，因为 !important 的权重更高。去掉 !important 后，div.box 会以 320px 覆盖 .box 的 200px。理解这个顺序，就能解释大部分明明改了却没反应的问题。
二、用开发者工具快速定位布局乱的根源
浏览器自带的开发者工具是排查样式冲突最快的方式。以 Chrome 为例，按 F12 打开 DevTools，点击左上角的检查箭头选中布局错乱的元素，右侧 Styles 面板会列出所有命中该元素的规则，并按优先级从高到低排序。被覆盖的属性上会出现删除线，把鼠标悬停上去还能看到来源文件和行号。这比在代码里盲目搜索要快得多。
找问题时可以先看 Styles 面板里哪条规则正在生效，再看上方被划掉的规则是哪条。接着切到 Computed 面板，查看元素最终计算出来的宽高、盒模型和显示类型。很多布局问题都能从这个面板里发现线索。例如一个原本应该 300px 宽的元素，计算值却是 342px，那基本可以断定是 box-sizing 没有设置成 border-box，而 padding 或边框额外增加了总宽度。
下面模拟一个常见的错误场景：给全局 <div> 加边框后，卡片宽度意外增加，导致同一行的两个卡片被挤到下一行。
<!-- 错误写法：全局div边框破坏布局 -->
<style>
div {
border: 1px solid #ccc;
box-sizing: content-box;
}
.card {
width: 300px;
padding: 20px;
}
</style>
<div class="card">内容区域实际宽度变成342px</div>
在这个例子里，.card 的 width: 300px 只表示内容区宽度，padding: 20px 左右各加 20px，再加上左右各 1px 的边框，总占用宽度达到 342px。如果父容器只能容纳两个 330px 的卡片，第二个自然会被挤下去。调整方法可以是给 box-sizing 设置为 border-box，让宽度包含内边距和边框；也可以把边框规则从全局 <div> 移到一个专门的类里，避免无差别影响。
三、防止样式冲突的实用调整方案
排查出问题后，更好的做法是提前避免冲突，而不是每次都靠开发者工具临时补救。命名隔离是最基础的手段。给不同模块的类名加上前缀，比如 .card-title 代替笼统的 .title，能显著降低和其他模块撞名的概率。如果团队规模较大，可以引入 BEM 命名规范，把块、元素和修饰符分开表达。
控制加载顺序也很关键。把基础样式、第三方库样式和业务覆盖样式分开管理，并确保业务覆盖样式最后加载，可以避免被后续规则意外覆盖。对于局部组件，可以使用 CSS Modules、Vue 的 scoped 属性或 Shadow DOM 来做样式隔离。利用 CSS 变量统一管理主题色、间距等公共值，也能减少因为硬编码导致的重复覆盖。
下面是一个更稳妥的组件样式写法，把边框、盒模型和内部元素都限制在 .card 作用域内。
/* 只作用于卡片，不影响全局 */
.card {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 1px solid #e0e0e0;
}
.card .card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
这种方式把 box-sizing 直接写在组件类上，既修复了盒模型计算问题，又没有影响其他 <div>。如果必须覆盖第三方库的样式，优先使用更具体的选择器，而不是直接加 !important。例如用 .page .el-button 覆盖 .el-button，既能精准命中，又保留层叠逻辑的灵活性。只有在前面的方法都无效时，才考虑使用 !important 作为最后手段。
