CSS - min-block-size（最小块大小）属性_CSS 菜鸟教程

CSS min-block-size 属性根据元素的写入模式设置元素块的水平或垂直最小大小，这对应于基于 writing_mode值的 min-width 或 min-height 属性。

min-block-size 决定了垂直方向写入模式的最小宽度和水平方向模式的最小高度。min-inline-size 属性定义另一个维度。

可能的值

min-block-size 属性接受与 min-height 和 min-width 相同的值。

适用于

与宽度和高度相同。

语法

<length>值

min-block-size: 100px;
min-block-size: 5em;

<percentage> 值

min-block-size: 10%;

Keyword 值

min-block-size: max-content;
min-block-size: min-content;
min-block-size: fit-content;
min-block-size: fit-content(20em);

CSS min-block-size - <length>值

以下示例演示了 min-block-size： 100px 属性将 div 元素的高度设置为最小值为 100px −

<html>
<head>
<style>
	 	div {
	 	 	 background-color: orange;
	 	 	 border: 2px solid blue;
	 	 	 min-block-size: 100px; 		
	 	}
</style>
</head>
<body>
	 	<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>

CSS min-block-size - max-content 值

以下示例演示了 min-block-size： max-content 属性设置适合其中内容的最小高度 -

<html>
<head>
<style>
	 	div {
	 	 	 background-color: orange;
	 	 	 border: 2px solid blue;
	 	 	 min-block-size: max-content; 		
	 	}
</style>
</head>
<body>
	 	<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>

CSS min-block-size - 包含水平和垂直文本

以下示例演示了如何将 min-block-size 属性与写入模式一起使用，以在垂直方向上显示文本 -

<html>
<head>
<style>
	 	div {
	 	 	 background-color: pink;
	 	 	 border: 2px solid blue;
	 	 	 min-block-size: 200px;
	 	 	 writing-mode: vertical-rl;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <p>CSS min-block-size</p>
	 	</div>
</body>
</html>

<< CSS - max-block-size（最大块大小）属性 CSS - mix-blend-mode （混合模式）属性 >>