CSS - block-size 属性_CSS 菜鸟教程

CSS block-size 属性根据元素的写入模式确定元素的水平或垂直大小。当书写模式为 vertical 时，元素的宽度会受到影响，当书写模式为 Horizontal 时，高度会受到影响。

语法

block-size: auto | length | percentage | initial | inherit;

属性值

值	描述
auto	设置元素的默认块大小。默认值。
length	以 px、cm、pt 等为单位设置块的大小。
percentage	以百分比值设置块的大小。
initial	这会将属性设置为其默认值。
inherit	这将从父元素继承属性。

CSS block-size 属性示例

以下示例说明了具有不同值的 block-size 属性。

具有 Auto 值的 Block Size 属性

为了让浏览器决定块的大小，我们使用 auto 值。auto 值将默认值设置为 block-size。在以下示例中， auto 值已用于 block-size，无论是否具有写入模式。

<!DOCTYPE html>
<html>
<head>
	 	<style>
	 	 	 div {
	 	 	 	 	background-color: lightgreen;
	 	 	 	 	border: solid black 1px;
	 	 	 	 	block-size: auto;
	 	 	 }

	 	 	 #auto-vertical {
	 	 	 	 	writing-mode: vertical-rl;
	 	 	 }

	 	 	 #auto-horizontal {
	 	 	 	 	writing-mode: horizontal-tb;
	 	 	 }
	 	</style>
</head>

<body>
	 	<h2>CSS block-size 属性示例</h2>
	 	<p>
	 	 	 a) 自动块大小
	 	</p>
	 	<div>
	 	 	 <p>这是一个具有自动块大小的p标签</p>
	 	</div>
	 	<p>
	 	 	 b) 垂直写入模式下的自动块大小
	 	</p>
	 	<div id="auto-vertical">
	 	 	 <p>这是具有自动块大小和垂直写入模式的p标签。</p>
	 	</div>
	 	<p>
	 	 	 c) 水平写入模式下的自动块大小
	 	</p>
	 	<div id="auto-horizontal">
	 	 	 <p>这是具有自动块大小和水平写入模式的p标签。</p>
	 	</div>

</body>

</html>
</html>

具有 Length 值的 Block Size 属性

要根据我们的选择设置块的大小，我们可以根据长度指定大小（例如 10px、25px 等）。在以下示例中，80px 大小已用于有和没有写入模式的块大小。

<!DOCTYPE html>
<html>
<head>
	 	<style>
	 	 	 div {
	 	 	 	 	background-color: lightgreen;
	 	 	 	 	border: solid black 1px;
	 	 	 	 	block-size: 80px;
	 	 	 }

	 	 	 #length-vertical {
	 	 	 	 	writing-mode: vertical-rl;
	 	 	 }

	 	 	 #length-horizontal {
	 	 	 	 	writing-mode: horizontal-tb;
	 	 	 }
	 	</style>
</head>

<body>
	 	<h2>CSS block-size 属性</h2>
	 	<p> a) 80px块大小</p>
	 	<div >
	 	 	 <p>这是一个80px块大小的p标签 </p>
	 	</div>
	 	<p> b) 垂直书写模式下的80px块大小 </p>
	 	<div id="length-vertical">
	 	 	 <p>这是p标签，块大小为80px，采用垂直书写模式。</p>
	 	</div>
	 	<p>
	 	 	 c) 80px块大小，水平书写模式
	 	</p>
	 	<div id="length-horizontal">
	 	 	 <p>这是p标签，块大小为80px，水平书写模式。</p>
	 	</div>

</body>

</html>
</html>

具有百分比值的 Block Size 属性

要根据我们的选择设置区块的大小，我们可以用百分比来指定大小（例如 10%、15% 等）。在以下示例中，40% size 已用于 block-size，包括有和没有写入模式。

例

<!DOCTYPE html>
<html>

<head>
	 	<style>
	 	 	 body {
	 	 	 	 	height: 100vh;
	 	 	 }

	 	 	 div {
	 	 	 	 	background-color: lightgreen;
	 	 	 	 	border: solid black 1px;
	 	 	 	 	block-size: 40%;
	 	 	 }

	 	 	 #percent-vertical {
	 	 	 	 	writing-mode: vertical-rl;
	 	 	 }

	 	 	 #percent-horizontal {
	 	 	 	 	writing-mode: horizontal-tb;
	 	 	 }
	 	</style>
</head>

<body>

	 	<h2> CSS block-size 属性</h2>
	 	<p>
	 	 	 a) 40%块大小
	 	</p>
	 	<div>
	 	 	 <p> 这是一个块大小为40%的p标签 </p>
	 	</div>
	 	<p>
	 	 	 b) 垂直写入模式下块大小为40%
	 	</p>
	 	<div id="percent-vertical">
	 	 	 <p>这是具有40%块大小和垂直写入模式的p标签。</p>
	 	</div>
	 	<p>
	 	 	 c) 水平写入模式下块大小为40%
	 	</p>
	 	<div id="percent-horizontal">
	 	 	 <p>这是具有40%块大小和水平写入模式的p标签。</p>
	 	</div>

</body>
</html>

支持的浏览器

属性
block-size	57.0	79.0	41.0	12.1	44.0

<< CSS - container-name CSS 数据类型 - gradient >>