DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!
block-size
是一个 CSS 逻辑属性,它定义了当 writing-mode
为水平时元素的高度,或当 writing-mode
为垂直时元素的宽度。
.element {
block-size: 700px;
writing-mode: vertical-lr;
}
block-size
在 CSS 逻辑属性和值级别 1 规范中定义,该规范目前处于编辑草案阶段。
语法
block-size: <'width'>;
- 初始值:
auto
- 应用于:与
height
和width
相同 - 继承:否
- 百分比:与相应的物理属性相同
- 计算值:与
height
和width
相同 - 动画类型:根据计算值的类型,例如长度、
calc()
等。
值
/* Length values */
block-size: 110px;
block-size: 2rem;
/* Percentage values */
block-size: 75%;
/* Keyword values */
block-size: auto;
block-size: fit-content(15em);
block-size: max-content;
block-size: min-content;
/* Global values */
block-size: inherit;
block-size: initial;
block-size: unset;
block-size: revert;
在大多数情况下,您可能会发现自己使用数字(例如 50px)作为 block-size
值,但有一些值得注意的关键字值。
auto
: 元素的块大小与其父元素的大小相同。fit-content()
: 一个允许容器增长到所需大小,然后使文本换行,有效地限制内容的函数。 它可用于网格容器以及盒子大小,虽然 caniuse 显示对其与该属性一起使用有强力支持,但我们的测试结果并不那么确定。 可能是因为 盒子大小模块级别 3 规范 当时处于编辑草案阶段。max-content
: 内在的首选宽度,表示元素将文本尽可能地拉伸,并使包含框恰好与文本一样长。min-content
: 内在的最小宽度,表示元素的框缩减到其内容的最小大小。 换句话说,包含框与它包含的最大文本字符串一样宽。
让我们谈谈块与内联
block-size
与 inline-size
相关,它定义了相反的方向。 如果我们假设从左到右 (LTR) 的书写方向,那么您可以将 block-size
视为 height
的逻辑等效项,而将 inline-size
视为 width
的逻辑等效项。
另一种思考方式:块元素与内联元素之间的区别。 当我们谈论块级元素(例如 <div>
、<main>
、<header>
、<article>
等)时,指的是占用其容器整个水平空间的元素。 当我们谈论内联级元素(<span>
、<a>
<strong>
、<em>
等)时,指的是仅与它们包含的内容一样宽的元素。 块元素只能垂直增长,因为它们已经占用所有可用的宽度,所以设置 block-size
就像告诉元素它可以长到多高。
相反,inline-size
定义元素的内联或水平宽度。
现在让我们谈谈书写模式
我们无法讨论任何逻辑属性(包括 block-size
)而不用深入了解 CSS 中书写模式的基本概念。
从最基本(绝对最基本)的角度来说,书写模式是指文本在元素或整个文档中的流动方向。 writing-mode
属性用于更改方向,可以是垂直或水平,并设置为从左到右或从右到左。
让我们看一个简单的示例来说明这一点。 当设置水平 writing-mode
时,block-size
会增加元素的高度
类似地,当文本的 writing-mode
为垂直时,block-size
会增加容器的宽度。
但是如果我们使用 height
而不是 block-size
,段落会保持其 300px 高度,但在水平方向上,就像我们声明了 width
一样。
看到区别了吗? block-size
很智能!它会根据 writing-mode
值从高度变为宽度。
Jen Simmons 有一篇 文章 和一个 演示文稿,更深入地讲解了 CSS 书写模式。
width
或height
将覆盖block-size
显式声明等等!你可能会想知道,像block-size
这样的逻辑属性是否与width
和height
这样的物理属性一起工作。它们确实可以… 但要注意,因为
在元素上显式声明width
或height
值会覆盖block-size
属性值。
回到我们上一个示例,如果一个段落元素使用width
设置为 300px 宽,并且书写模式设置为vertical-lr
,内容会旋转,从而改变布局。但该段落仍然是 300px 宽而不是 300px 高。
举个例子
.element {
block-size: 300px
width: 800px;
writing-mode: vertical-lr;
}
很自然地认为此示例中的元素是 300px 宽,因为它在水平书写模式下是 300px。但实际上它变为 800px 宽,因为我们在元素上显式声明了width: 800px
… 并且这会覆盖垂直书写模式下 300px 的block-size
值。
这可能正是你想要它做的事情!但如果不是,在使用block-size
(或inline-size
)时,最好避免声明width
或height
。
演示
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 79+ | 41+ | 57 | 12.1+ | 44+ |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
全部 | 全部 | 92+ | 12.2+ | 64+ |
请注意,使用以下函数的支持可能与block-size
属性的支持不同