
定义和用法
block-size
是 CSS 逻辑属性之一,用于定义元素在块方向(block dimension)上的尺寸。
block-size
与物理属性(如width
/height
)不同,逻辑属性根据文档的书写模式(writing mode)自动适应。
默认值: | auto |
继承性: | 否 |
可动画性: | 支持。请参阅:可动画属性。 |
版本: | CSS3 |
JavaScript 语法: | object.style.blockSize="100px" |
常用的实例
接下来通过多个实例演示block-size
属性的用法,来深化您对block-size
属性的理解。
1. 水平书写模式(默认)
在水平书写模式(如英语、中文)中,block-size
相当于height
。
.example {
block-size: 200px;
}
2. 垂直书写模式
在垂直书写模式(如日语纵排)中,block-size
相当于width
。
.example {
block-size: 250px;
writing-mode: vertical-rl;
}
CSS 语法
block-size: auto|value|initial|inherit;
属性值
值 | 描述 |
auto |
默认值,元素的默认块大小值。 |
length |
以px 、pt 、cm 等单位指定块大小值。参阅 CSS 单位。 |
percentage |
以相对于父元素在对应轴上的大小的百分比指定块大小值。 |
initial |
将此属性设置为其默认值。参阅 initial。 |
inherit |
从其父元素继承此属性。参阅 inherit。 |
浏览器支持
表中的数字指定了完全支持block-size
属性的第一个浏览器版本。
![]() |
![]() |
![]() |
![]() |
![]() |
Chrome | IE / Edge | Firefox | Safari | Opera |
57.0 | 79.0 | 41.0 | 12.1 | 44.0 |
相关页面
CSS 教程:CSS 宽度和高度
CSS 教程:CSS 框模型
CSS 参考手册:CSS width 属性
CSS 参考手册:CSS height 属性
CSS 参考手册:CSS writing-mode 属性
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
45
章节
29
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈