竖排文字模式下 block-size 属性为何不生效？
竖排文字模式下 block-size 属性不生效通常是因为属性映射逻辑与书写方向不匹配，需要检查 writing-mode 设置。
检查书写模式是否正确设置
block-size 属性的生效依赖于 writing-mode 的设置。根据资料，当 writing-mode 为 horizontal-tb 时，block-size 对应高度；当 writing-mode 为 vertical-rl 或 vertical-lr 时，block-size 对应宽度。如果网页中竖排文字未正确设置 writing-mode: vertical-rl 或 vertical-lr，浏览器可能无法识别该属性对应的物理尺寸，导致样式不生效。在移动端开发中，竖排布局常用于标题或特殊排版，需确保 CSS 中明确指定了书写模式。
排查时，先检查元素是否应用了 writing-mode 属性。如果元素本身未设置，或者父级容器覆盖了该属性，会导致子元素无法继承正确的书写方向。例如，若父级容器设置了 writing-mode: horizontal-tb，子元素即使设置了 vertical-rl 也可能被重置。建议使用浏览器开发者工具检查元素的计算样式，确认 writing-mode 的最终值是否符合预期。
验证属性值是否与书写方向匹配
block-size 属性的值类型包括长度、百分比、关键字等，但其映射逻辑受 writing-mode 影响。资料指出，block-size 在竖排模式下对应宽度，在横排模式下对应高度。如果设置了 block-size: 150px 但 writing-mode 为 vertical-rl，浏览器会将该值应用于宽度而非高度，可能导致布局错位或样式不生效。例如，一个容器设置了 block-size: 200px 和 writing-mode: vertical-rl，其宽度会被限制为 200px，而高度由内容决定。
验证时，可以尝试切换 writing-mode 的值并观察布局变化。如果 writing-mode 改为 horizontal-tb 后，元素尺寸发生改变，说明 block-size 属性确实在起作用，只是映射方向不同。此外，检查百分比值是否基于包含块的 block-size 计算。资料提到百分比值的计算依赖于包含块的 block-size，若包含块尺寸未定义，百分比可能无效。
确认元素是否应用了正确的布局属性
block-size 属性适用于块级元素，其计算值与 width 和 height 相同。如果元素未设置为块级或 flex 布局，可能无法正确应用 block-size。资料中示例显示，一个 div 元素设置了 display: flex 和 flex-direction: column，并应用了 block-size: 150px，此时元素高度在横排模式下为 150px。在竖排模式下，该元素宽度会变为 150px，但高度由内容撑开。
排查时，检查元素的 display 属性和布局方式。如果元素是行内元素或行内块元素，block-size 可能不会生效。此外，确保元素没有其他属性覆盖了尺寸设置，如 max-width 或 min-height。在移动端，某些布局框架可能自动应用了默认样式，需手动覆盖以确保 block-size 生效。
使用浏览器工具检查计算样式
浏览器开发者工具可以显示元素的计算样式，帮助确认 block-size 属性是否正确应用。在移动端调试时，可以使用 Chrome DevTools 的移动模拟器或 Safari 的 Web Inspector。检查元素的计算样式，确认 block-size 的值是否与设置一致，以及 writing-mode 的值是否正确。资料提到，block-size 的动画类型为长度、百分比或 calc()，如果样式未生效，可能是值类型不兼容或浏览器不支持。
验证结果时，可以对比横排和竖排模式下的计算样式。如果横排模式下 block-size 生效，而竖排模式下未生效，说明问题出在映射逻辑上。此外，检查浏览器兼容性，资料指出该功能自 2020 年 1 月起在浏览器中广泛可用，但部分细节可能存在差异。确保使用的浏览器版本支持该属性，并测试不同设备上的表现。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。