块大小

Avatar of Joel Olawanle
Joel Olawanle

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

block-size 是一个 CSS 逻辑属性,它定义了当 writing-mode 为水平时元素的高度,或当 writing-mode 为垂直时元素的宽度

.element {
  block-size: 700px;
  writing-mode: vertical-lr;
}

block-sizeCSS 逻辑属性和值级别 1 规范中定义,该规范目前处于编辑草案阶段。

语法

block-size: <'width'>;
  • 初始值:auto
  • 应用于:heightwidth 相同
  • 继承:
  • 百分比:与相应的物理属性相同
  • 计算值:heightwidth 相同
  • 动画类型:根据计算值的类型,例如长度、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-sizeinline-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 书写模式。

显式声明widthheight将覆盖block-size

等等!你可能会想知道,像block-size这样的逻辑属性是否与widthheight这样的物理属性一起工作。它们确实可以… 但要注意,因为

在元素上显式声明widthheight值会覆盖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)时,最好避免声明widthheight

演示

浏览器支持

IEEdgeFirefoxChromeSafariOpera
79+41+5712.1+44+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
全部全部92+12.2+64+
来源: caniuse

请注意,使用以下函数的支持可能与block-size属性的支持不同

更多信息