block-size 是 CSS 中的一个属性，它用于设置元素的块级尺寸（即元素的高度）。这个属性是 height 和 max-height 的逻辑组合，允许你同时设置元素的最小和最大高度。 这些属性旨在让布局不再依赖于传统的物理方向（如上下左右），而是基于逻辑方向（如开始、结束、之前、之后）。这有助于在水平和垂直方向都能更好地控制布局，特别是在多语言环境中，其中文本可能从右到左或从下到上流动。
block-size 属性的值可以是以下几种类型：
- length：设置一个以像素（px）、厘米（cm）、点（pt）等为单位的具体值。例如，
block-size: 300px;会将元素的块级尺寸设置为 300 像素。此外，允许使用负值，但具体效果可能因浏览器和上下文而异。 - percentage：根据包含块（即元素的父元素）的尺寸来设置百分比值。例如，
block-size: 75%;会将元素的块级尺寸设置为父元素尺寸的 75%。 - auto：当需要浏览器自动计算块级尺寸时使用。浏览器会根据元素的内容和其他 CSS 属性（如
min-block-size和max-block-size）来自动调整元素的大小。 - initial：将
block-size属性的值重置为其默认值。这意味着它会回退到浏览器或用户代理的默认设置。 - inherit：使元素继承其父元素的
block-size属性值。这有助于保持样式的一致性，特别是在复杂的布局中。 - unset：如果元素没有设置默认的
block-size值，则使用此值。这通常用于覆盖其他可能存在的样式设置。
此外，block-size 属性还可以与 box-sizing 属性一起使用，以控制元素的盒模型（包括内容、内边距和边框）如何计算其总大小。例如，block-size: 25em border-box; 会将元素的块级尺寸（包括内容、内边距和边框）设置为 25em。
需要注意的是，block-size 属性的具体行为可能因浏览器和 CSS 版本的不同而有所差异。因此，在使用此属性时，建议查阅最新的 CSS 规范并测试不同浏览器的兼容性。
下边是浏览器兼容性列表：
最后点击查看个属性的表现案例demo
