CSS - block-size 属性

CSS block-size 属性根据元素的写入模式确定元素的水平或垂直大小。当书写模式为 vertical 时，元素的宽度会受到影响;当 Writing Mode 为 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 value 已用于 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 property
	 	</h2>
	 	<p>
	 	 	 a) Auto Block Size
	 	</p>
	 	<div >
	 	 	 <p>
	 	 	 	 	This is a p tag with auto block size
	 	 	 </p>
	 	</div>
	 	<p>
	 	 	 b) Auto Block Size with	
	 	 	 Vertical Writing Mode
	 	</p>
	 	<div id="auto-vertical">
	 	 	 <p>
	 	 	 	 	This is p tag with auto block size	
	 	 	 	 	and vertical writing mode.
	 	 	 </p>
	 	</div>
	 	<p>
	 	 	 c) Auto Block Size with	
	 	 	 Horizontal Writing Mode
	 	</p>
	 	<div id="auto-horizontal">
	 	 	 <p>
	 	 	 	 	This is p tag with auto block size
	 	 	 	 	and horizontal writing mode.
	 	 	 </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 property
	 	</h2>
	 	<p>
	 	 	 a) 80px 	Block Size
	 	</p>
	 	<div >
	 	 	 <p>
	 	 	 	 	This is a p tag with 80px block size
	 	 	 </p>
	 	</div>
	 	<p>
	 	 	 b) 80px Block Size with	
	 	 	 Vertical Writing Mode</p>
	 	<div id="length-vertical">
	 	 	 <p>
	 	 	 	 	This is p tag with 80px block size	
	 	 	 	 	and vertical writing mode.
	 	 	 </p>
	 	</div>
	 	<p>
	 	 	 c) 80px Block Size with	
	 	 	 Horizontal Writing Mode
	 	</p>
	 	<div id="length-horizontal">
	 	 	 <p>
	 	 	 	 	This is p tag with 80px block size
	 	 	 	 	and horizontal writing mode.
	 	 	 </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 property
	 	</h2>
	 	<p>
	 	 	 a) 40% Block Size
	 	</p>
	 	<div>
	 	 	 <p>
	 	 	 	 	This is a p tag with 40% block size
	 	 	 </p>
	 	</div>
	 	<p>
	 	 	 b) 40% Block Size with	
	 	 	 Vertical Writing Mode
	 	</p>
	 	<div id="percent-vertical">
	 	 	 <p>
	 	 	 	 	This is p tag with 40%	
	 	 	 	 	block size and vertical writing mode.
	 	 	 </p>
	 	</div>
	 	<p>
	 	 	 c) 40% Block Size with	
	 	 	 Horizontal Writing Mode
	 	</p>
	 	<div id="percent-horizontal">
	 	 	 <p>
	 	 	 	 	This is p tag with 40%	
	 	 	 	 	block size and horizontal writing mode.
	 	 	 </p>
	 	</div>

</body>
</html>

支持的浏览器

属性
block-size	57.0	79.0	41.0	12.1	44.0

打印本页