主题
  • 默认模式
  • 浅蓝色模式
  • 淡绿色模式
  • 深夜模式

定义和用法

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 pxptcm等单位指定块大小值。参阅 CSS 单位
percentage 以相对于父元素在对应轴上的大小的百分比指定块大小值。
initial 将此属性设置为其默认值。参阅 initial
inherit 从其父元素继承此属性。参阅 inherit

浏览器支持

表中的数字指定了完全支持block-size属性的第一个浏览器版本。

Chrome 浏览器 EDGE 浏览器 Firefox 浏览器 Safari 浏览器 Opera 浏览器
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
发表评论