html属性与css样式分属不同职责层：属性是html早期内建呈现机制，css是后来更强大的样式系统；现代浏览器中多数html呈现属性已降级为初始值提供者，实际渲染由css最终决定。
HTML 元素属性和 CSS 样式不是“谁覆盖谁”的简单关系，而是分属不同职责层：属性（如 width、align、bgcolor）是 HTML 早期内建的呈现控制机制，而 CSS 是后来引入的、更强大且可组合的样式系统。现代浏览器中，**绝大多数 HTML 呈现属性已被废弃或降级为“初始值提供者”，实际渲染由 CSS 层接管并最终决定**。
哪些 HTML 属性仍会影响 CSS 渲染结果
部分 HTML 属性会直接映射为 CSS 初始值，或触发特定渲染行为，不能被完全忽略：
-
style属性是内联样式的载体，其声明优先级高于外部/内部样式表中的同名规则（除非加!important） -
width和height在<img>、<iframe></iframe>、<canvas></canvas>等替换元素上，会设置 CSS 的width/height初始值（注意：不是min-width或max-width），且在未显式重写时持续生效 -
align（如<p align="center"></p>）在旧版 HTML 中有效，但现代浏览器已将其转换为等效 CSS（如text-align: center或margin: auto），具体行为依赖元素类型和 display 值，不可预测 -
hidden属性等价于display: none，但它是布尔属性，没有值；它比 CSS 的visibility: hidden更彻底（不占布局空间）
CSS 如何覆盖或忽略 HTML 属性
CSS 并非总是“覆盖”属性——它有时会绕过、压制，甚至因属性存在而改变计算逻辑：
- 设置了
display: flex的容器中，子元素的align属性完全失效，必须用justify-content或align-self <table> 的 <code>border属性（如border="1"）会被border-collapse: collapse和borderCSS 规则共同影响，但若未设border-collapse，表格边框可能呈现双线（属性 + CSS 同时作用）-
font标签及其color、size属性在 HTML5 中已废止，CSS 中若未重置font-family或color，浏览器可能沿用 UA 样式，而非<font></font>的值 - 使用
box-sizing: border-box后，<input>的size属性表现会异常——因为size控制的是字符宽度（基于 font-metrics），而border-box把 padding/border 算进宽高，导致视觉宽度与预期不符 - 给
<div> 加了 <code>align="right"，又写了div { text-align: left }，但文字仍右对齐 → 因为align在块级元素上已被浏览器解释为margin-left: auto，而text-align只影响内联内容，两者不冲突也不覆盖 -
<img src="x.jpg" style="max-width:90%">在响应式容器中不缩放 → 不是因为 CSS 没写max-width: 100%，而是width属性让图片获得固定宽度，需额外加width: auto才能交还控制权给 CSS - 用
background-color设置了 div 背景，但页面显示为白色 → 检查是否误用了已废弃的bgcolor属性（如），它会压制 CSS 的background-color，尤其在某些旧内核或 iframe 场景下
调试时容易误判的典型现象
开发者常把“样式没生效”归咎于选择器写错，其实很多情况是 HTML 属性在暗中干扰：
真正关键的不是记住哪些属性还“管用”，而是理解浏览器如何将 HTML 属性转化为 CSS 初始值，并在 devtools 的 Computed 面板里看最终生效的 width、text-align 等值从哪来——属性、用户代理样式、内联 style 还是外部规则。这个链条一旦理清，所谓“样式失效”就很少再是黑盒问题。
