CSS właściwość min-block-size

Poprzednia strona @media
Następna strona min-inline-size

Definicja i użycie

min-block-size Właściwość określa minimalny rozmiar elementu w kierunku blokowym.

Jeśli rozmiar zawartości w kierunku blokowym jest mniejszy niż minimalny rozmiar, zastosuje się min-block-size Wartość atrybutu.

Jeśli rozmiar zawartości w kierunku blokowym jest większy niż minimalny rozmiar, zastosuje się min-block-size Wartość atrybutu nie działa.

Uwaga:powiązane atrybuty CSS writing-mode Definiuje kierunek blokowy, co wpływa na min-block-size Wynik atrybutów. Dla stron w języku angielskim, kierunek blokowy jest pionowy, a kierunek wewnętrzny jest z lewej na prawą.

CSS min-block-size Atrybuty są podobne do atrybutów CSS min-height i min-width Bardzo podobne, ale min-block-size Atrybut zależy od kierunku blokowego.

Przykład

Przykład 1

Ustaw minimalny rozmiar elementu <div> w kierunku blokowym na 200 pikseli:

div {
  min-block-size: 200px;
}

Spróbuj sam

Przykład 2: Sposób pisania

Ustaw kierunek blokowy elementu <div> na writing-mode Kiedy wartość atrybutu ustawiona jest na vertical-rl, kierunek blokowy zmienia się z pionowego na boczny, co wpływa na min-block-size Działanie atrybutu:

div {
  min-block-size: 200px;
  writing-mode: vertical-rl;
}

Spróbuj sam

Przykład 3: min-block-size i block-size

Obserwuj element <div> (block-size i inny element <div> (min-block-size Różne reakcje na zmianę rozmiaru zawartości przy 100px (min-block-size):

#div1 {
  min-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

Spróbuj sam

Gramatyka CSS

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

Wartość atrybutu

Wartość	Opis
auto	Domyślnie. Domyślna wartość min-block-size dla elementu.
length	Określ min-block-size, jednostką px, pt, cm itp. Zobacz:Jednostki CSS.
%	Określ procentowy rozmiar wzdłuż osi, w stosunku do elementu nadrzędnego, dla min-block-size.
initial	Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit	Inhereduje tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość:	auto
Inheredność:	Nie
Tworzenie animacji:	Wspierane. Zobacz:Atrybuty animacji.
Wersja:	CSS3
Gramatyka JavaScript:	object.style.minBlockSize="10px"