调试CSS意外样式的工具：为何div设40px高度却显示20px？

不用手动挨个排查，浏览器自带的开发者工具就能精准定位问题根源，以下是具体操作步骤：

• 用计算样式面板追踪最终生效规则
  选中目标div，打开开发者工具的「Elements」面板，切换到「Computed」标签，找到height属性。点击属性名旁边的展开箭头，会列出所有影响该属性的CSS规则——划掉的样式是被优先级更高的规则覆盖的，未划掉的就是最终生效的那条，同时能看到该规则对应的选择器、CSS文件路径和行号，直接定位来源。

• 筛选已应用的样式
  在「Elements」的「Styles」面板里，勾选「Applied styles」选项，面板会只显示实际生效的样式，自动过滤掉被覆盖、无效的规则，能快速找到控制当前height的具体规则，不用在一堆样式里翻找。

• Flex/Grid场景专项排查
  如果怀疑是flex布局导致的，切换到「Layout」面板，找到「Flexbox」（或Grid）的可视化工具：

  • 查看容器的align-items属性，如果不是stretch，子元素高度可能被强制适配内容或容器设定值；
  • 检查子元素的flex-shrink（默认1），如果容器空间不足，子元素会被压缩；
  • 直接在面板里修改这些属性（比如把flex-shrink改成0，align-items改成stretch），实时观察高度变化，快速锁定问题点。

• 盒模型与继承属性检查
  在「Computed」面板里查看box-sizing：如果是content-box，设置的height是内容高度，padding和border会额外占用空间；如果是border-box，height包含padding和border，可能导致实际内容高度被挤压。另外，检查line-height属性，若父元素的line-height设为20px，div未重置该属性且是行内/行内块元素，可能继承line-height导致高度异常。

• 禁用规则快速验证
  在「Styles」面板里找到你设置的height:40px规则，点击前面的勾选框临时禁用，观察高度变化；反过来，禁用可疑的flex、继承规则，看高度是否恢复到40px，以此快速确认哪个规则在干扰。

• 元素高亮可视化
  鼠标悬停在「Elements」面板的目标div上，页面中的元素会被高亮，不同颜色分别代表content、padding、border区域，直观看到高度的组成部分，判断是内容本身高度不足，还是被其他属性限制了整体高度。

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