Wyjaśniono właściwość wysokości w CSS

Właściwość wysokości dostosowuje wysokość elementu lub można powiedzieć, że rozciąga/ściska element w kierunku pionowym. Elementy blokowe uzyskują wysokość zgodnie z zawartością i jeśli wysokość musi zostać dostosowana, należy użyć właściwości wysokości.

Ponieważ wysokość jest jedną z działań najbliższych wyściółki, granicy i marginesów. Jednak ani nie wpływa na nich, ani nie dostaje przez nich skutku. Ten opisowy przewodnik zapewnia działanie i wykorzystanie właściwości wysokości w CSS z następującymi wynikami uczenia się:

• Działanie nieruchomości wysokości w CSS
• Zastosowanie nieruchomości wysokości w CSS
• Różnica między wysokością a maksymalną wysokością/minimum

Jak działa nieruchomość wysokości w CSS

Właściwość działania wysokości w CSS zależy od składni podanej poniżej:

selektor high: wartość;

Selektor może być dowolnym elementem lub może odnosić się do klasy CSS w arkuszu stylizacji. Wartość wysokości można ustawić w różnych jednostkach pomiarowych określonych poniżej;

Długość: długość (długość pionowa) można zdefiniować w jednostkach takich jak PX, EM itp. PX jest wartością statyczną, podczas gdy EM zmienia się w zależności od wartości domyślnej elementu nadrzędnego. Jakby wysokość ciała jest ustawiona na 20px (jako wysokość domyślna), byłoby to równoważne 1EM.

Auto: Ta wartość dostosowuje wysokość zgodnie z domyślnym ustawieniem przeglądarki

Procent (%): Procent głównego elementu jest traktowany jako odniesienie. Na przykład wartość 50% dostosowałaby wysokość do 50% (zgodnie z wysokością elementu nadrzędnego.)

Początkowy: wykorzystuje domyślną wartość wysokości

dziedzictwo: ta wartość pobiera wysokość z elementu nadrzędnego

Działanie właściwości wysokości w CSS zależy głównie od zastosowania jednostki pomiarowej.

Jak używać właściwości wysokości w CSS

Ta sekcja zawiera kilka przykładów, które pokazują funkcjonalność właściwości wysokości w CSS.

Przykład 1: Korzystanie z długości/procentu właściwości wysokości

W tym przykładzie wykorzystuje wartość długości z różnymi jednostkami pomiarowymi, a następujący kod jest praktykowany w tym względzie.

Dostosowanie wysokości (przy użyciu długości i procentu)

Wysokość jest w PX

Wysokość jest w procentach (%)

Wysokość w EM

Opis kodu znajduje się poniżej:

• Utworzyło trzy klasy CC o nazwie „Prim”, „SEC” i „Ter”
• Klasa „Prim” rozważa wysokość w „PX”, podczas gdy klasy „SEC” i „Ter” wykorzystują „%” i „EM” dla długości wysokości (pionowe)
• Trzy klasy CSS są używane w trzech akapitach (które są tworzone w ciele)

Obraz powyższego kodu pokazano poniżej,

Wyjście:

Przykład 2: Za pomocą wartości automatycznych, dziedzicznych i początkowych właściwości wysokości

Ten przykład praktykuje auto, dziedziczenie i początkowe wartości właściwości wysokości w CSS. Aby to zrobić, kod podany poniżej jest praktykowany

Dostosowanie wysokości

Wysokość jest ustawiona na wartość początkową

Wysokość jest dziedziczona

Wysokość w auto

Opis kodu podano poniżej:

• Utworzono CSS dla elementu „Div” (ponieważ byłby użyty jako element nadrzędny)
• Zastosowane są trzy klasy CSS „INI”, „Inh” i „Aut”, które byłyby używane do wartości wysokości (początkowe, dziedziczne i auto)
• Jeden akapit korzysta z klasy „INI”, podczas gdy akapit przy użyciu klasy „Inh” jest zawarty w Div, a trzeci akapit korzysta z klasy „AUT” CSS

Obraz powyższego kodu jest wyświetlany poniżej

Wyjście:

Przykład 3: Używając wysokości z maksymalną wysokością i minimum

Zróżnicujmy właściwości działania wysokości od właściwości maksymalnej/minuty za pomocą kodu napisanego poniżej.

Dostosowanie wysokości

Wysokość z maksymalną wysokością

Wysokość z minimum

Opis kodu to

• Dwie klasy CSS są tworzone o nazwie „HX” i „HN”
• Klasa „HX” zawiera właściwości „wysokość” i „maksymalnie wysokości”
• Klasa „HN” rozważa właściwości „minimum” i „wysokości”
• Klasa „HX” jest powiązana z pierwszym akapitem, podczas gdy klasa „HN” jest używana w drugim akapicie.

Obraz kodu jest podany poniżej

Wyjście:

Z wyjścia zaobserwowano, że właściwość na maksymalnej wysokości zdominowała właściwość wysokości, a właściwość minimum zdominowała właściwość wysokości.

Przechodząc przykłady, dostarczyliśmy funkcjonalność wysokości, a także opisali jej zachowanie, używając go z właściwościami maksymalnie/minuty.

Wniosek

Właściwość wysokości w CSS dostosowuje wysokość (długość pionową) elementu. Ten artykuł zawiera działanie i wykorzystanie nieruchomości wysokości w CSS. Wysokość nie jest wykonywana przez granicę/margines/wyściółka, ale może mieć na nią wpływ właściwość maksymalnej i minimalnej wysokości CSS. Dostarliśmy kilka przykładów, które wykorzystują wysokość z wysokości minuty/maksymalnie, i stwierdzono, że właściwość wysokości musi być używana sama (nie z maksymalną wysokością/minimum).