css中设置元素大小的属性block-size

block-size 是 CSS 中的一个属性，它用于设置元素的块级尺寸（即元素的高度）。这个属性是 height 和 max-height 的逻辑组合，允许你同时设置元素的最小和最大高度。 这些属性旨在让布局不再依赖于传统的物理方向（如上下左右），而是基于逻辑方向（如开始、结束、之前、之后）。这有助于在水平和垂直方向都能更好地控制布局，特别是在多语言环境中，其中文本可能从右到左或从下到上流动。

block-size 属性的值可以是以下几种类型：

1. length：设置一个以像素（px）、厘米（cm）、点（pt）等为单位的具体值。例如，block-size: 300px; 会将元素的块级尺寸设置为 300 像素。此外，允许使用负值，但具体效果可能因浏览器和上下文而异。
2. percentage：根据包含块（即元素的父元素）的尺寸来设置百分比值。例如，block-size: 75%; 会将元素的块级尺寸设置为父元素尺寸的 75%。
3. auto：当需要浏览器自动计算块级尺寸时使用。浏览器会根据元素的内容和其他 CSS 属性（如 min-block-size 和 max-block-size）来自动调整元素的大小。
4. initial：将 block-size 属性的值重置为其默认值。这意味着它会回退到浏览器或用户代理的默认设置。
5. inherit：使元素继承其父元素的 block-size 属性值。这有助于保持样式的一致性，特别是在复杂的布局中。
6. unset：如果元素没有设置默认的 block-size 值，则使用此值。这通常用于覆盖其他可能存在的样式设置。

此外，block-size 属性还可以与 box-sizing 属性一起使用，以控制元素的盒模型（包括内容、内边距和边框）如何计算其总大小。例如，block-size: 25em border-box; 会将元素的块级尺寸（包括内容、内边距和边框）设置为 25em。

需要注意的是，block-size 属性的具体行为可能因浏览器和 CSS 版本的不同而有所差异。因此，在使用此属性时，建议查阅最新的 CSS 规范并测试不同浏览器的兼容性。
下边是浏览器兼容性列表：

最后点击查看个属性的表现案例demo