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

Właściwość szerokości dostosowuje szerokość elementu poprzez rozciąganie w kierunku poziomym (wewnątrz wyściółki). Własność szerokości jest powiązana z wyściółką, granicą i marginesem, ale nie wpływa na nich ani nie jest zmieniana. Elementy blokowe uzyskują szerokość zgodnie z szerokością strony; Jednak właściwość szerokości pozwala dostosować szerokość zgodnie z wymogiem.

Ten opisowy przewodnik zapewnia działanie i wykorzystanie właściwości szerokości w CSS. Działanie właściwości szerokości jest kierowane przez stosowaną składnię i cytowane jest kilka przykładów ilustrujących użycie właściwości szerokości.

Jak działa właściwość szerokości w CSS

Szerokość elementu można ustawić za pomocą składni napisanej poniżej.

selektor szerokość: wartość;

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

• Długość: Wartość jest zdefiniowana w PX, EM. Wartość EM zmienia się w zależności od domyślnego zestawu wielkości dla elementu nadrzędnego. Na przykład, jeśli domyślny rozmiar jest ustawiony na 15px, zostanie ono policzone jako 1EM i zachowując domyślnie do 15px, wartość wielkości 2EM byłaby równoważna 30px.
• Auto: przeglądarki dostosowują wartość automatycznie
• Procent ( %): Wartość (w %) wiąże się z szerokością elementu nadrzędnego. Na przykład wartość 50% dostosowałaby szerokość do 50% (elementu nadrzędnego lub w którym zawarty jest element docelowy).
• dziedzictwo: wartość szerokości elementu nadrzędnego jest pobierana
• Początkowy: używana jest domyślna wartość szerokości

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

Jak korzystać z właściwości szerokości w CSS

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

Przykład 1: Korzystanie z właściwości szerokości o długości/procentach

Ten przykład wyjaśnia wykorzystanie właściwości szerokości z różnymi miarami długości i procentowego. Przedstawiony poniżej kod odnosi się do tego przykładu:

Dostosowanie szerokości

Szerokość w PX

Szerokość w EM

Szerokość w %

Opis kodu znajduje się poniżej:

• Trzy klasy CSS są tworzone o nazwie „PX”, „EM” i „Per”
• „PX”, „EM” i „Per” wykorzystują odpowiednio PX, EM i %
• Te trzy klasy są używane w trzech akapitach, aby wykazać ich użycie

Obraz kodu jest podany poniżej

Wyjście:

Przykład 2: Za pomocą szerokości z wartościami początkowymi, dziedzicznymi i automatycznymi

W tym przykładzie używane są wartości początkowe, dziedziczne i automatyczne, aby zmienić szerokość elementu. Aby to zrobić, ćwiczy się następujący kod:

Dostosowanie szerokości za pomocą wartości automatycznych/początkowych/dziedzicznych

początkowa szerokość

Dziedziczna szerokość

automatyczna szerokość

Kod jest opisany jako

• Trzy zajęcia CSS są o nazwie „Początkowe”, „dziedzictwo” i „auto”
• Klasy te są używane w trzech akapitach reprezentujących wartości „początkowe”, „dziedzictwo” i „auto” szerokości
• Div jest stylizowany z 50% szerokością i kolorem tła, który byłby używany jako rodzic do jednego akapitu (który jest używany z klasą dziedzictwa CSS)

Obraz kodu pokazano poniżej

Wyjście:

Z wyjścia obserwuje się, że szerokość drugiego akapitu jest dziedziczona od Div (której szerokość wynosi 50%), a zatem akapit byłby ograniczony do 50% jego elementu macierzystego (DIV).

Przykład 3: Korzystanie z szerokości z maksymalną szerokością i szerokością min

Maksymalna szerokość i szerokość min definiują odpowiednio górną i dolną granicę szerokości. Jeśli właściwość szerokości jest używana z szerokością min/maksymalną szerokość, istnieje szansa, że ​​wynik może nie taki sam jak według twojego wymagania. Wartość szerokości można zagrożić w jednym z następujących warunków:

• Jeśli szerokość < max-width then value of max-width will be used and
• Jeśli szerokość < min-width then the width would be set according to the min-width value

Przećwiczmy to za pomocą kodu napisanego poniżej.

Używając szerokości z szerokością min i maksymalną szerokością

szerokość z szerokością min

szerokość z maksymalną szerokością

Opis kodu jest podany poniżej

• Dwie klasy CSS są tworzone o nazwie „Min” i „Maks”, które wykorzystują szerokość z szerokością i szerokością z maksymalną szerokością
• Wartości szerokości w klasach „min” i „maks.” wynoszą odpowiednio 25% i 75%, podczas gdy szerokość min wynosi 75%, a maksymalna szerokość wynosi 50%
• Te klasy CSS są używane w dwóch akapitach

Obraz edytora kodu pokazano poniżej:

Wyjście:

Z powyższego wyjścia na szerokość ma wpływ na szerokość min i maksymalną szerokość. Stąd sugeruje się, że szerokość należy użyć osobno, w przeciwnym razie właściwość może spowodować dziwne wyjście.

Wniosek

Właściwość szerokości w CSS służy do dostosowania szerokości (długości poziomej) elementu. To sprawia, że ​​połączenie z wyściółką, granicą i marginesem elementu. Jednak ani szerokość, ani wyściółka/margines/obramowanie nie efektu. Ten artykuł zawiera działanie i wykorzystanie własności szerokości w CSS. Na właściwość szerokości może mieć wpływ na właściwości maksymalnej i minimalnej wysokości CSS. Zaleca się stosowanie właściwości szerokości poprzez utrzymanie maksymalnej szerokości i szerokości min. Ponadto zademonstrowaliśmy przykłady, które wykorzystują szerokość i właściwość maksymalnej/minimalnej szerokości w CSS.