Układ CSS - Właściwość wyświetlania
Właściwość displayjest najważniejszą właściwością CSS do kontrolowania układu.
Wyświetlacz Właściwość
Właściwość displayokreśla, czy/jak wyświetlany jest element.
Każdy element HTML ma domyślną wartość wyświetlaną w zależności od typu elementu. Domyślną wartością wyświetlaną dla większości elementów jest blocklub
inline.
Kliknij, aby wyświetlić panel
This panel contains a <div> element, which is hidden by default (display: none).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block).
Elementy blokowe
Element blokowy zawsze zaczyna się w nowej linii i zajmuje całą dostępną szerokość (rozciąga się w lewo iw prawo tak daleko, jak to możliwe).
Przykłady elementów blokowych:
- <div>
- <h1> - <h6>
- <p>
- <formularz>
- <nagłówek>
- <stopka>
- <sekcja>
Elementy wbudowane
Element śródliniowy nie zaczyna się w nowej linii i zajmuje tylko tyle szerokości, ile jest to konieczne.
To jest wbudowany element <span> wewnątrz akapitu.
Przykłady elementów wbudowanych:
- <span>
- <a>
- <img>
Nie wyświetla się;
display: none;jest powszechnie używany w JavaScript do ukrywania i pokazywania elementów bez usuwania ich i ponownego tworzenia. Spójrz na nasz ostatni przykład na tej stronie, jeśli chcesz wiedzieć, jak można to osiągnąć.
Element <script>używa display: none;
domyślnie.
Zastąp domyślną wyświetlaną wartość
Jak wspomniano, każdy element ma domyślną wartość wyświetlaną. Możesz to jednak zmienić.
Zmiana elementu śródliniowego na blokowy lub odwrotnie może być przydatna, aby strona wyglądała w specyficzny sposób i nadal była zgodna ze standardami sieciowymi.
Typowym przykładem jest tworzenie <li>elementów śródliniowych dla menu poziomych:
Przykład
li {
display: inline;
}
Uwaga: Ustawienie właściwości wyświetlania elementu zmienia tylko sposób wyświetlania elementu , a NIE rodzaj elementu. Tak więc element śródliniowy z display: block;nie może zawierać w sobie innych elementów blokowych.
Poniższy przykład wyświetla elementy <span> jako elementy blokowe:
Przykład
span {
display: block;
}
Poniższy przykład wyświetla elementy <a> jako elementy blokowe:
Przykład
a {
display: block;
}
Ukryj element — wyświetlanie:brak lub widoczność:ukryty?
display:none
visibility:hidden
Resetowanie
Ukrycie elementu można wykonać, ustawiając displaywłaściwość na
none. Element zostanie ukryty, a strona będzie wyświetlana tak, jakby elementu tam nie było:
Przykład
h1.hidden {
display: none;
}
visibility:hidden;ukrywa również element.
Jednak element nadal będzie zajmował tyle samo miejsca, co poprzednio. Element zostanie ukryty, ale nadal będzie miał wpływ na układ:
Przykład
h1.hidden {
visibility: hidden;
}
Więcej przykładów
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |