HTML怎么做CSS block-size_html CSS block-size逻辑尺寸【从零开始】-html教程-PHP中文网

block-size是height的逻辑化升级，仅在vertical-rl/lr或多语言混排时才体现价值；默认horizontal-tb下与height完全等价；它只响应writing-mode，不响应direction；百分比基准随块轴变化，auto行为在flex/grid中不稳定；需配套使用padding-block、border-block等逻辑属性，并确保box-sizing适配。

html怎么做css block-size_html css block-size逻辑尺寸【从零开始】

block-size 不是 height 的替代品，而是它的逻辑化升级——只在需要适配 vertical-rl、vertical-lr 或多语言混排时才值得用；默认 horizontal-tb 下写 block-size: 200px 和 height: 200px 效果完全一样，纯属多打几个字。

什么时候 `block-size` 才真正改变行为

它只响应 writing-mode，不响应 direction。也就是说：

direction: rtl 单独存在时，block-size 仍等价于 height（块轴仍是垂直方向）
writing-mode: vertical-rl 一设，块轴立刻变成水平方向，此时 block-size: 200px 实际控制的是元素的“宽度”（物理方向），而 inline-size 控制高度
父元素设了 writing-mode，子元素没设，子元素的 block-size 仍按自身 writing-mode 计算（默认 horizontal-tb），不是继承父级

`block-size` 的百分比和 `auto` 行为容易踩坑

百分比基准不是固定父宽或父高，而是“父容器在块轴上的尺寸”：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

在 writing-mode: horizontal-tb 下，block-size: 50% 是父高 × 50%
在 writing-mode: vertical-rl 下，block-size: 50% 是父宽 × 50%（因为此时块轴是水平方向）
block-size: auto 在 Flex/Grid 容器中表现不稳定：比如 Flex column 布局里，block-size: auto 可能被拉满容器高度，而 height: auto 会按内容收缩
min-content/max-content 在 iOS 16.x Safari 中不支持（Safari 17.4+ 已修复，但旧版仍占一定份额）

配套属性必须一起改，否则边框/内边距错位

用了 block-size 就不能再混用 height + padding-top + border-bottom 这套物理写法：

正确搭配：block-size + padding-block + border-block
错误写法：block-size: 100px 同时写 padding-top: 8px —— 在 vertical-rl 下，这个 padding-top 会作用在元素右侧，视觉上完全错位
box-sizing 对 block-size 依然生效，但要注意：它影响的是 block-size 所指的那个轴（即块轴）的盒模型范围

真正要落地 block-size，不是全局搜索替换 height，而是先确认是否真有 vertical-rl 场景、是否已统一使用 writing-mode、是否连带改写了 padding-block 和 margin-block —— 漏掉任一环，逻辑尺寸就只是看起来高级，实际布局会出偏移、截断或响应异常。