CSS - Свойство max-block-size: Дружеское руководство для начинающих

Здравствуйте, будущие маги CSS! Сегодня мы отправимся в увлекательное путешествие в мир CSS, конкретно исследуя свойство max-block-size. Не волнуйтесь, если вы новички; я буду вашим дружественным гидом, и мы рассмотрим эту тему шаг за шагом. Так что возьмите любимый напиток, устройтесь поудобнее и погружайтесь с нами!

Что такое max-block-size?

Прежде чем мы углубимся в Details, давайте поймем, что такое max-block-size. Представьте, что вы строите башню из блоков. Свойство max-block-size похоже на установкуlimits на высоту вашей башни. В терминах CSS оно определяет максимальный размер элемента в направленииблока.

"Но подождите," может быть вы спросите, "что такое направлениеблока?" Отличный вопрос! Направлениеблока обычно вертикальное в языках, записываемых горизонтально (например, английский), и горизонтальное в языках, записываемых вертикально (например, традиционный японский).

Синтаксис и возможные значения

Давайте посмотрим, как мы можем использовать max-block-size в нашем CSS:

.my-element {
max-block-size: value;
}

Теперь что мы можем поставить вместо "value"? Вот удобная таблица со всеми возможными значениями:

Значение	Описание
<length>	Фиксированная длина, например 300px или 20em
<percentage>	Процент размера контейнера
none	Нетlimits ( это значение по умолчанию)
max-content	Внутренне предпочитаемый максимальный размер
min-content	Внутренний минимальный размер
fit-content	Подобно auto, но с некоторыми различиями
auto	Браузер решает максимальный размер

Применяется к

Не все свойства CSS применяются ко всем HTML-элементам. Свойство max-block-size применяется ко всем элементам, кроме:

• Не置换аемые inline-элементы
• Строки таблиц
• Группы строк

Не волнуйтесь, если вы еще не знакомы с этими терминами. По мере вашего прогресса в изучении CSS, вы встретите их и поймете, почему они являются исключениями.

Влияние writing-mode на CSS max-block-size

Теперь, когда事情 становятся интересными! Свойство max-block-size изменяет свое поведение в зависимости от writing-mode текста. Давайте рассмотрим несколько примеров:

Пример 1: Горизонтальный режим письма

.box {
writing-mode: horizontal-tb;
max-block-size: 200px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
This is a box with horizontal writing mode and max-block-size set to 200px.
</div>

В этом примере max-block-size ограничит высоту ящика 200 пикселями, так как направлениеблока вертикальное в горизонтальном режиме письма.

Пример 2: Вертикальный режим письма

.box {
writing-mode: vertical-rl;
max-block-size: 200px;
background-color: lightgreen;
padding: 10px;
}

<div class="box">
This is a box with vertical writing mode and max-block-size set to 200px.
</div>

В этом случае max-block-size ограничит ширину ящика 200 пикселями, так как направлениеблока горизонтальное в вертикальном режиме письма.

CSS max-block-size - значение

Когда мы используем значение длины, мы устанавливаем фиксированный максимальный размер. Давайте посмотрим, как это работает:

.fixed-size {
max-block-size: 150px;
background-color: lightyellow;
padding: 10px;
}

<div class="fixed-size">
This box has a max-block-size of 150px. If the content exceeds this height, it will overflow.
</div>

В этом примере, regardless of how much content we put in the div, it won't grow taller than 150 pixels.

CSS max-block-size - значение

Процентыrelative к размеру контейнера. Вот как это работает:

.parent {
height: 300px;
background-color: lightgray;
}

.child {
max-block-size: 50%;
background-color: lightpink;
padding: 10px;
}

<div class="parent">
<div class="child">
This child div has a max-block-size of 50% of its parent's height.
</div>
</div>

В этом случае, child div не будет выше的一半 высоты своего родителя.

CSS max-block-size - значение

Значение max-content особенно полезно, когда вы хотите, чтобы ваш элемент был настолько большим, насколько это requires его содержимое, но не больше. Давайте посмотрим пример:

.max-content-box {
max-block-size: max-content;
background-color: lightcoral;
padding: 10px;
}

<div class="max-content-box">
This box will expand to fit its content, but no more than that.
</div>

Этот ящик вырастет, чтобы вместить свое содержимое, но не растянется дальше.

CSS max-block-size - с горизонтальным и вертикальным текстом

Давайте закончим примером, который combine horizontal и vertical текст:

.mixed-text {
max-block-size: 200px;
background-color: lavender;
padding: 10px;
}

.vertical-text {
writing-mode: vertical-rl;
max-block-size: 100px;
background-color: lightsalmon;
margin-top: 10px;
}

<div class="mixed-text">
This is horizontal text with max-block-size of 200px.
<div class="vertical-text">
This is vertical text with max-block-size of 100px.
</div>
</div>

В этом примере у нас есть контейнер с горизонтальным текстом и максимальной высотой 200px. Внутри него у нас есть другой div с вертикальным текстом и максимальной шириной 100px.

И вот мы и все! Мы исследовали свойство max-block-size с различных сторон. Помните, ключ к овладению CSS - это практика. Так что не бойтесь экспериментировать с этими примерами, модифицировать их и смотреть, что произойдет. Счастливого кодирования, и пусть ваши блоки всегда будут идеального размера!

Credits: Image by storyset