Css 简明教程
CSS - max-block-size Property
CSS max-block-size 属性设置元素在由 writing_mode 提供的书写方向相反方向的最大尺寸。对于水平书写，它等同于 max-height ，而对于垂直书写，它与 max-width 相同。
max-inline-size 属性定义了另一个尺寸的最大长度。
分别为水平尺寸和垂直尺寸设置 max-width 和 max-height 是有帮助的。
使用 max-height 或 max-width 时，选择 max-block-size 以获得内容的最大高度，选择 max-inline-size 以获得最大宽度。查看 writing_mode 示例以了解各种书写模式。
Possible Values
你可以将 max-block-size 属性的值设置为 max-height 和 max-width 值允许的任何值。
-
<length> − 将 max-block-size 设置为绝对值。
-
<percentage> − 将 max-block-size 设置为包含块的块轴大小的百分比。
-
none − 该框没有大小限制。
-
max-content − 内在 max-block-size。
-
min-content − 最小 max-block-size。
-
fit-content − 直到 max-content 的可用空间，但绝不超过 min(max-content, max(min-content, stretch)) 。
-
fit-content(<length-percentage>) − 在 min(max-content, max(min-content, argument)) 中，将适合内容公式与可用空间中提供的参数一起使用。
CSS max-block-size - writing-mode Effects
以下是如何将 writing-mode 值映射到 max-height 或 max-width 的方式：
Values of writing-mode |
max-block-size is equivalent to |
horizontal-tb、lr（已弃用）、lr-tb（已弃用）、rl（已弃用）、rb（已弃用）、rb-rl（已弃用） |
|
vertical-rl、vertical-lr、sideways-rl（实验性）、sideways-lr（实验性）、tb（已弃用）、tb-rl（已弃用） |
CSS max-block-size - <length> Value
以下示例演示了 max-block-size: 80px 属性将 div 元素的高度设置为最大 70px −
<html>
<head>
<style>
div {
background-color: orange;
border: 2px solid blue;
max-block-size: 80px;
}
</style>
</head>
<body>
<div>
<h3>Tutorialspoint</h3>
<h4>CSS max-block-size: 80px</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>CSS max-block-size - <percentage> Value
以下示例演示了 max-block-size: 80% 属性将 div 元素的高度设置为最大 80% −
<html>
<head>
<style>
div {
background-color: violet;
border: 2px solid blue;
max-block-size: 80%;;
}
</style>
</head>
<body>
<div>
<h2>Tutorialspoint</h2>
<h3>CSS max-block-size: 80%</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>CSS max-block-size - <max-content> Value
以下示例演示了 max-block-size: max-content 属性允许 div 元素的高度垂直扩展以适合内容 −
<html>
<head>
<style>
div {
background-color: violet;
border: 2px solid blue;
max-block-size: max-content;
}
</style>
</head>
<body>
<div>
<h2>Tutorialspoint</h2>
<h3>CSS max-block-size: max-content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</body>
</html>CSS max-block-size - With Horizontal and Vertical Text
以下示例演示如何将 max-block-size 属性与 writing-modes 一起使用以水平和垂直方向显示文本 −
<html>
<head>
<style>
div {
background-color: yellow;
border: 2px solid blue;
margin: 10px;
padding: 5px;
max-block-size: 150px;
min-block-size: 120px;
}
.box1 {
writing-mode: horizontal-tb;
}
.box2{
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="box1">
<h3>CSS max-block-size with writing-mode: horizontal-tb</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="box2">
<h3>CSS max-block-size with writing-mode: vertical-rl.</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</body>
</html>