最直接的方法是打开DevTools→选中元素→切换到Computed面板搜索display值：block/flex/grid/table为块级行为，inline/inline-flex/inline-grid为行内渲染，inline-block为中间态；display值不等于HTML默认分类，如默认list-item但表现同块级，默认inline却可设宽高；display:block/inline可强制覆盖但有副作用，如破坏布局或失效宽高；纯inline元素（等）设width/height无效，需配合display:inline-block等生效；伪类本身不改变display，但伪元素::before默认inline，设宽高需显式声明display。
看浏览器开发者工具里的 computed 样式
最直接的办法是打开 DevTools → 选中元素 → 切到 Computed 面板，搜索 display 属性值。如果显示为 block、flex、grid、table 等，它当前就是块级行为；如果是 inline、inline-flex、inline-grid，就按行内方式渲染；inline-block 则属于中间态——同行排列但可设宽高。
注意：display 值不等于 HTML 默认分类。比如 <li> 默认是 list-item（不是 block），但它表现和块级一样（独占一行）；<img alt="编写CSS代码时怎么判断某个节点属于块还是元素？" > 默认是 inline，但能设宽高——这是历史兼容导致的例外，不能单靠标签名判断。
用 display: block / inline 能强行覆盖默认行为吗？
可以，而且非常常用。但要注意副作用：
-
display: block会让原本行内的<a></a>或<span></span>独占一行，可能打乱文字流布局 -
display: inline会让<div> 失去宽高控制能力，<code>height、padding-top/bottom、margin-top/bottom全部失效 -
display: inline-block是折中方案，但会保留元素间的空白符（空格、换行）产生的间隙，常需用font-size: 0或注释删空格来消除 - 在 DevTools 的 Elements 面板里右键该节点 → Break on > attribute modifications，然后手动加
style="width: 200px;"，看是否被忽略 - 临时加一句
display: inline-block，如果宽高立刻生效，就坐实了是 display 类型问题 - 别依赖标签名记忆：比如
<input>是inline但能设宽高，<button></button>默认也是inline，但浏览器给它加了 UA 样式模拟块行为
为什么有时候设了 width/height 没反应？
大概率是因为当前节点是纯 inline 元素（如 <span></span>、<a></a>、<em></em>），而这些属性对原生行内元素无效。验证方法很简单：
立即学习“前端免费学习笔记（深入）”；
伪类选择器会影响 display 吗？
不会。:hover、:focus、::before 这些伪类本身不改变元素的 display 类型，但你可以在它们的样式块里显式修改，比如：
button:hover {
display: block;
}
不过这种写法极少见，因为会触发重排（reflow），且破坏语义流。更稳妥的做法是只改 background、transform 或 opacity 这类不影响盒模型的属性。
真正容易被忽略的是：某些伪元素（如 ::before）默认是 display: inline，如果你给它设了 width 却没生效，得先加 display: inline-block 或 block ——这点连很多老手都会卡住几秒。
