块级尺寸

跳转到：
  1. 语句
  2. 语句
  3. 例子
  4. 说明
  5. 浏览器兼容性 
  6. 相关链接

这篇翻译不完整。请帮忙从英语翻译这篇文章。

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

CSS的block-size属性定义了元素区块的水平宽度和垂直高度，也就是width或height属性，它们的大小取决于写入模式，即writing-mode的值。
 
 

语句

/* <length> values */
block-size: 300px;
block-size: 25em;

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

/* Keyword values */
block-size: 25em border-box;
block-size: 75% content-box;
block-size: max-content;
block-size: min-content;
block-size: available;
block-size: fit-content;
block-size: auto;

/* Global values */
block-size: inherit;
block-size: initial;
block-size: unset;If the writing mode is vertically oriented, the value of block-size relates to the width of the element; otherwise, it relates to the height of the element. A related property is inline-size, which defines the other dimension of the element.

如果写入模式为垂直方向，block-size的值与元素的宽度有关，否则取决于元素的高度。相关的属性是定义了元素的其它大小的inline-size。

语句

值

 block-size 属性的值是pwidth 属性与 height 属性的值的结合。

正式语句

<'width'>

例子

HTML

<p class="exampleText">Example text</p>

CSS

.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 200px;
}

说明

说明 状态 注释

CSS Logical Properties and Values Level 1
block-size

 

 Editor's Draft 初始定义

浏览器兼容性 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
block-sizeChrome Full support 57Edge No support NoFirefox Full support 41
Full support 41
No support 38 — 51
Disabled
Disabled From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 44Safari No support NoWebView Android Full support 57Chrome Android Full support 57Edge Mobile No support NoFirefox Android Full support 41
Full support 41
No support 38 — 51
Disabled
Disabled From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 44Safari iOS No support NoSamsung Internet Android Full support 5.0
max-contentChrome Full support 57Edge No support NoFirefox Full support 66IE No support NoOpera Full support 44Safari No support NoWebView Android Full support 57Chrome Android Full support 57Edge Mobile No support NoFirefox Android Full support 66Opera Android Full support 44Safari iOS No support NoSamsung Internet Android Full support 5.0
min-contentChrome Full support 57Edge No support NoFirefox Full support 66IE No support NoOpera Full support 44Safari No support NoWebView Android Full support 57Chrome Android Full support 57Edge Mobile No support NoFirefox Android Full support 66Opera Android Full support 44Safari iOS No support NoSamsung Internet Android Full support 5.0
fit-contentChrome Full support 57Edge No support NoFirefox Full support 41
Prefixed
Full support 41
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 44Safari No support NoWebView Android Full support 57Chrome Android Full support 57Edge Mobile No support NoFirefox Android ? Opera Android Full support 44Safari iOS No support NoSamsung Internet Android Full support 5.0
Alternate Name
Full support 5.0
Alternate Name
Alternate Name Uses the non-standard name: -webkit-fill-available

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

相关链接

文档标签和贡献者

此页面的贡献者： Aamperor
最后编辑者: Aamperor,