CSS - inline-size 属性

CSS 的 inline-size 属性根据元素的写入模式确定元素的内联的水平或垂直大小。它与 CSS 的 width 或 height 属性有关，基于 writing-mode 的值。

当写入模式为垂直方向时，inline-size 的值与元素的高度相关，否则它与元素的宽度相关。

可能的值

CSS 属性 inline-size 采用与 width 和 height 属性相同的值。

适用于

所有元素，但未替换的内联元素、表行和行组。

语法

以下是可以声明内联大小的不同方法：

长度值


inline-size: 100px;
inline-size: 20em;

百分比值


inline-size: 45%;

Keyword 值


inline-size: max-content;
inline-size: min-content;
inline-size: fit-content;
inline-size: auto;

Global 值


inline-size: inherit;
inline-size: initial;
inline-size: revert;
inline-size: revert-layer;
inline-size: unset;

CSS inline-size - 使用长度值

以下示例演示了具有 writing-mode： vertical-rl 和 inline-size 的输出，并为其指定了一个长度值：


<html>
<head>
<style>
	 	.container {
	 	 	 writing-mode: vertical-rl;
	 	 	 background-color: pink;
	 	 	 border: 2px solid blue;
	 	 	 display: inline-block;
	 	}

	 	.sampleText-px {
	 	 	 inline-size: 100px;
	 	}

	 	.sampleText-em {
	 	 	 inline-size: 20em;
	 	}
</style>
</head>
<body>
	 	<h2>inline-size - length value with writing-mode: vertical-rl</h2>
	 	<div class="container sampleText-px">Sample Text-px</div>
	 	<div class="container sampleText-em">Sample Text-em</div>
</body>
</html>

以下示例演示了使用 writing-mode： horizontal-tb 和 inline-size 的输出，并为其指定了长度值：


<html>
<head>
<style>
	 	.container {
	 	 	 writing-mode: horizontal-tb;
	 	 	 background-color: pink;
	 	 	 border: 2px solid blue;
	 	 	 display: inline-block;
	 	}

	 	.sampleText-px {
	 	 	 inline-size: 100px;
	 	}

	 	.sampleText-em {
	 	 	 inline-size: 20em;
	 	}
</style>
</head>
<body>
	 	<h2>inline-size - length value with writing-mode: horizontal-tb</h2>
	 	<div class="container sampleText-px">Sample Text-px</div>
	 	<div class="container sampleText-em">Sample Text-em</div>
</body>
</html>

CSS inline-size - 使用百分比值

以下示例演示了使用 writing-mode： vertical-rl 和 inline-size 的输出以百分比值的形式给出：


<html>
<head>
<style>
	 	.container {
	 	 	 writing-mode: vertical-rl;
	 	 	 background-color: pink;
	 	 	 border: 2px solid blue;
	 	 	 display: inline-block;
	 	}

	 	.sampleText-10per {
	 	 	 inline-size: 10%;
	 	}

	 	.sampleText-65per {
	 	 	 inline-size: 65%;
	 	}
</style>
</head>
<body>
	 	<h2>inline-size - percentage value with writing-mode: vertical-rl</h2>
	 	<div class="container sampleText-10per">Sample Text-10%</div>
	 	<div class="container sampleText-65per">Sample Text-65%</div>
</body>
</html>

以下示例演示了 writing-mode： horizontal-tb 和 inline-size 的输出以百分比值的形式给出：


<html>
<head>
<style>
	 	.container {
	 	 	 writing-mode: horizontal-tb;
	 	 	 background-color: pink;
	 	 	 border: 2px solid blue;
	 	 	 display: inline-inline;
	 	}

	 	.sampleText-10per {
	 	 	 inline-size: 10%;
	 	}

	 	.sampleText-65per {
	 	 	 inline-size: 65%;
	 	}
</style>
</head>
<body>
	 	<h2>inline-size - percentage value with writing-mode: horizontal-tb</h2>
	 	<div class="container sampleText-10per">Sample Text-10%</div>
	 	<div class="container sampleText-65per">Sample Text-65%</div>
</body>
</html>

CSS inline-size - 使用关键字值

以下示例演示了使用 writing-mode： vertical-rl 和 inline-size 的输出作为关键字值给出：


<html>
<head>
<style>
	 	.container {
	 	 	 writing-mode: vertical-rl;
	 	 	 background-color: pink;
	 	 	 border: 2px solid blue;
	 	 	 display: inline-block;
	 	}

	 	.sampleText-auto {
	 	 	 inline-size: auto;
	 	}

	 	.sampleText-max {
	 	 	 inline-size: max-content;
	 	}

	 	.sampleText-min {
	 	 	 inline-size: min-content;
	 	}

	 	.sampleText-fit {
	 	 	 inline-size: fit-content;
	 	}
</style>
</head>
<body>
	 	<h2>inline-size - keyword value with writing-mode: vertical-rl</h2>
	 	<div class="container sampleText-auto">Sample Text - auto</div>
	 	<div class="container sampleText-max">Sample Text - max-content</div>
	 	<div class="container sampleText-min">Sample Text - min-content</div>
	 	<div class="container sampleText-fit">Sample Text - fit-content feature</div>
</body>
</html>

以下示例演示了使用 writing-mode： horizontal-tb 和 inline-size 作为关键字值给出的输出：


<html>
<head>
<style>
	 	.container {
	 	 	 writing-mode: horizontal-tb;
	 	 	 background-color: pink;
	 	 	 border: 2px solid blue;
	 	 	 display: inline-block;
	 	}

	 	.sampleText-auto {
	 	 	 inline-size: auto;
	 	}

	 	.sampleText-max {
	 	 	 inline-size: max-content;
	 	}

	 	.sampleText-min {
	 	 	 inline-size: min-content;
	 	}

	 	.sampleText-fit {
	 	 	 inline-size: fit-content;
	 	}
</style>
</head>
<body>
	 	<h2>inline-size - keyword value with writing-mode: horizontal-tb</h2>
	 	<div class="container sampleText-auto">Sample Text - auto</div>
	 	<div class="container sampleText-max">Sample Text - max-content</div>
	 	<div class="container sampleText-min">Sample Text - min-content</div>
	 	<div class="container sampleText-fit">Sample Text - fit-content feature</div>
</body>
</html>

打印本页