首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

最小块大小 | min-block-size

这是一种实验技术

由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。还要注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

min-block-size一个元素的块的最小水平或垂直尺寸,这取决于它的写入模式。其对应于任一min-widthmin-height属性,这取决于的值writing-mode

代码语言:javascript
复制
/* <length> values */
min-block-size: 100px;
min-block-size: 5em;

/* <percentage> values */
min-block-size: 10%;

/* Keyword values */
min-block-size: max-content;
min-block-size: min-content;
min-block-size: fit-content;
min-block-size: fill-available;

/* Global values */
min-block-size: inherit;
min-block-size: initial;
min-block-size: unset;

如果写作模式是垂直定向的,则min-block-size与元素的最小宽度有关;否则,它涉及元素的最小高度。相关财产是min-inline-size,它定义元素的其他维度。

初始值

0

应用于

same as width and height

是否继承

no

百分比

block-size of containing block

适用媒体

visual

计算值

same as min-width and min-height

Animation type

discrete

规范顺序

the unique non-ambiguous order defined by the formal grammar

句法

价值

min-block-size取值为min-widthmin-height

形式语法

代码语言:javascript
复制
<'min-width'>

HTML

代码语言:javascript
复制
<p class="exampleText">Example text</p>

CSS

代码语言:javascript
复制
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  min-block-size: 200px;
}

规格

Specification

Status

Comment

CSS Logical Properties Level 1The definition of 'min-block-size' in that specification.

Editor's Draft

Initial definition

浏览器兼容性

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support

No support

41.0 (41.0)1

No support

No support

No support

Feature

Android

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

No support

41.0 (41.0)1

No support

No support

No support

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com