inherit无效最常见原因是用于不可继承属性（如margin、display），浏览器直接忽略；或父元素该属性计算值为initial/unset，子元素继承“空值”。
为什么inherit写了却没效果
最常见的情况是：你在不可继承属性上用了inherit，比如margin: inherit或display: inherit。浏览器会直接忽略它——因为这些属性默认就不走继承链，inherit关键字只对可继承属性（如color、font-family、text-align）起作用。查MDN就能确认某个属性是否标有“Inherited: yes”。
另一个隐蔽坑点是：父元素该属性的计算值本身就是initial或unset，子元素inherit后拿到的就是这个“空值”，看起来像没生效。
- 用开发者工具的「Computed」面板确认父元素该属性的真实计算值，别只看Styles里写的源码
- 若父元素样式本身被覆盖或未生效（比如选择器写错），
inherit也无从继承 -
font-family: inherit在某些场景下看似失效，其实是字体名无效导致降级到浏览器默认字体，而非继承中断
width: inherit和width: 100%根本不是一回事
width: inherit是真继承——子元素宽度取父元素的计算后的width值（比如父元素width: 200px，子元素就拿200px）；而width: 100%是相对计算——子元素宽度等于父元素content box的宽度，受padding、border影响，且父元素若未设宽，则可能坍缩为0。
当父元素width由内容撑开（如width: fit-content）或依赖flex/grid布局时，inherit仍能拿到确定值，100%却容易失准。
- 想严格复刻父元素尺寸，优先用
inherit；想占满可用空间，用100%但得确保父容器有明确宽度上下文 -
height: inherit在父元素高度未显式定义时同样会失败，此时需配合min-height或flex上下文
用all: inherit要非常小心
all: inherit会让元素继承所有父元素的CSS属性，包括display、position、z-index这些关键布局属性。一个常见的翻车现场是：父元素display: flex，子元素加了all: inherit，结果自己也变成flex，破坏原有文档流。
它不区分“是否合理”，只机械复制，极易引发意料外的布局崩溃。
- 仅在极简、可控的嵌套结构中试探性使用，上线前必须检查Computed Styles全量变化
- 替代方案更安全：对关键可继承属性逐个写
inherit，如color: inherit; font-family: inherit; line-height: inherit; -
all: unset比all: inherit更危险——它会把display重置为inline，让块级元素瞬间变行内
父元素display: none时，inherit完全不触发
这不是继承失效，是渲染引擎压根没处理这个子树。DOM节点还在，但布局、绘制、样式计算全跳过，开发者工具的Styles面板里甚至看不到继承来的灰色样式，Computed面板也为空。
对比visibility: hidden：它保留渲染流程，子元素能正常继承、计算样式，只是不可见。
- 调试时先看Elements面板里该元素是否被标记为“display: none”（常伴随灰色禁用图标）
- 需要条件隐藏但保留样式逻辑？改用
opacity: 0; pointer-events: none;或transform: translateZ(-9999px) - 服务端渲染+客户端hydration场景下，JS未及时移除
display: none，会导致样式“延迟生效”，这时inherit只是还没等到执行时机
font-family继承后因字体缺失降级，或color被浏览器强制适配深色模式而改变。这些不会报错，也不留痕迹，只能靠Computed面板逐项核对。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
