Właściwość wyświetlania CSS | Wyjaśnione
Wyświetlaj właściwość
Jak sama nazwa wskazuje, właściwość wyświetlania CSS określa, w jaki sposób elementy HTML są wyświetlane na stronie internetowej. Ta właściwość może być bardzo przydatna, gdy chcesz zmienić zwykłe zachowanie elementu HTML. Załóżmy, że z jakiegoś powodu chcesz zamienić stan elementu wbudowanego na stan elementu na poziomie bloku, możesz użyć tej właściwości do renderowania tej zmiany.
Składnia
Wyświetlacz: wartość;Tutaj zademonstrowaliśmy niektóre wartości właściwości wyświetlania dla Twojego lepszego zrozumienia.
Elementy wbudowane
Elementy, które zużywają tylko wymaganą ilość miejsca, nazywane są elementami inline. Można je również nazywać elementami wyświetlanymi w linii.Te elementy nie zaczynają się od nowej linii, co więcej, możesz umieścić wiele elementów inline w tej samej linii. Niektóre przykłady to, itp.
Jak konwertować elementy na poziomie blokowym na elementy wbudowane za pomocą właściwości Display
W tym przykładzie tworzymy trzy elementy i ustawiamy wartość właściwości wyświetlania jako „wbudowane”, dlatego wszystkie elementy będą wyświetlane w jednej linii i zużywają tylko ilość wymaganej przestrzeni.
Wyjście
Chociaż element domyślnie jest elementem na poziomie bloków, ale po ustawieniu wartości właściwości wyświetlacza na „wbudowany” będzie zachowywał się jako element wbudowany.
Elementy na poziomie blokowym
Elementy, które zużywają całą dostępną przestrzeń (od lewej do prawej) i zaczynają od nowej linii, są uważane za elementy poziomu bloków. Elementy poziomu bloku są w stanie przechowywać elementy wbudowane wraz z innymi elementami poziomu bloku. Większość elementów w HTML to elementy blokowe. Niektóre przykłady to ,
- ,
- element.
, itp.
Jak konwertować elementy inline na elementy na poziomie blokowym za pomocą właściwości Display
Ze względu na ten przykład rozważymy dwa elementy i ustawę wartość właściwości wyświetlania na „Block”. W rezultacie oba elementy zużyją całą przestrzeń poziomą, działając jako elementy na poziomie blokowym. Chociaż element domyślnie jest elementem wbudowanym.
Wyjście
Wyświetlacz Flex
Ta wartość wydajnie dostosowuje elementy wewnątrz pojemnika. Równie rozkłada przestrzeń między elementami obecnymi w pojemniku.
Jak działa elastyczna wartość właściwości wyświetlacza
W tym przykładzie zilustrowaliśmy elastyczną wartość właściwości wyświetlania. Stworzyliśmy pięć
elementy wewnątrz elementu posiadającego klasę flex-container i przypisaliśmy wartość „flex” do właściwości wyświetlania
elementy.
Wyjście
Wyświetlacz siatki
Wartość siatki właściwości wyświetlacza jest przydatna podczas układania elementów w postaci siatki, a tym samym podczas korzystania z siatki nie ma potrzeby korzystania z pływaków i pozycjonowania.
Jak działa wartość siatki właściwości wyświetlania
W tym przykładzie stworzyliśmy sześć elementów wewnątrz większego elementu posiadającego klasę Container Grid i przypisaliśmy wartość „siatki” do właściwości wyświetlania
elementy
Wyjście
Istnieje wiele innych wartości, które można przypisać do właściwości wyświetlania, które są następujące.
| Wartość | Opis | |||||||||||||||||||||||
| Wline | Ta wartość wyświetla elementy jako elementy wbudowane. | |||||||||||||||||||||||
| blok | Ta wartość wyświetla elementy jako elementy na poziomie bloku. | |||||||||||||||||||||||
| zawartość | Ta wartość sprawia, że pojemnik znika. | |||||||||||||||||||||||
| przewód | Ta wartość wyświetla elementy jako pojemniki na poziomie bloków. | |||||||||||||||||||||||
| siatka | Ta wartość wyświetla elementy jako pojemniki na poziomie bloków. | |||||||||||||||||||||||
| Block wbudowany | Ta wartość wyświetla elementy jako kontenery blokowe na poziomie inline. | |||||||||||||||||||||||
| Flex rzędowy | Ta wartość wyświetla elementy jako kontenery Flex na poziomie inline. | |||||||||||||||||||||||
| sieć rzędowa | Ta wartość wyświetla elementy jako pojemniki siatki na poziomie inline. | |||||||||||||||||||||||
| Tablica wbudowana | Ta wartość wyświetla tabele na poziomie inline. | |||||||||||||||||||||||
| element listy | Ta wartość wyświetla wszystkie elementy w | |||||||||||||||||||||||
| uruchomienie | Ta wartość na podstawie kontekstu wyświetla elementy jako elementy inline lub blokowe. | |||||||||||||||||||||||
| tabela | Ta wartość renderuje elementy do zachowania
Aby lepiej zrozumieć, możesz wypróbować inne wartości właściwości wyświetlania, aby zobaczyć, jak działają. Wniosek Właściwość wyświetlania CSS określa, w jaki sposób elementy HTML są wyświetlane na stronie internetowej, korzystając z tej właściwości. Istnieje szeroki zakres wartości, które można zastosować do właściwości wyświetlacza, każda z innym celem. W tym zapisie właściwość wyświetlania jest szczegółowo omawiana wraz z odpowiednimi przykładami. |