display Obiekt jest najważniejszą właściwością CSS do sterowania układu.
Wyświetlacz nieruchomości
display właściwość określa, czy / jak jest wyświetlany element.
Każdy element HTML ma wartość domyślną wyświetlacza w zależności od typu elementu jest. Domyślna wartość wskazania dla większości elementów jest block lub inline .
Kliknij, aby wyświetlić panel
Panel ten zawiera <div> element, który jest domyślnie ukryty ( display: none ).
Jest urządzony z CSS, i używamy JavaScript, żeby go pokazać (zmienić go ( display: block ).
Elementy blokowe
Element blokowy zawsze zaczyna się od nowego wiersza i zajmuje całą dostępną szerokość (rozciąga się na lewo i prawo o ile to możliwe).
Przykłady elementów blokowych:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
inline Elements
Element inline nie rozpocznie się od nowego wiersza i tylko zajmuje tyle samo szerokości, jak to konieczne.
Jest to inline <span> Element wewnątrz akapitu.
Przykłady elementów inline:
- <span>
- <a>
- <img>
Wyświetlacz: brak;
display: none; jest powszechnie stosowany z JavaScript, aby ukryć i pokazać elementy bez usuwania i ich odtworzenie. Spójrz na nasz ostatni przykład na tej stronie, jeśli chcesz wiedzieć, jak można to osiągnąć.
<script> Element użyciu display: none; jako domyślne.
Zastąpić domyślne wyświetlanie wartości
Jak już wspomniano, każdy element ma wartość domyślną wyświetlacza. Jednak można to zmienić.
Zmienianie inline elementu do elementu blokowego, lub odwrotnie, mogą być przydatne do tworzenia strony wyglądają konkretny sposób, a wciąż są zgodne ze standardami WWW.
Typowym przykładem jest uczynienie inline <li> elementy menu poziomym:
 | Wskazówka: Ustawienie właściwości wyświetlania elementu zmienia się tylko sposób wyświetlania elementów, NIE, jaki rodzaj elementu jest.Więc elementem inline z display: block; nie może mieć inne elementy blokowe środku. |
|---|
Na przykład następujące wyświetlacze <span> elementy jako elementy blokowe:
Ukrywanie elementu - display:none lub visibility:hidden ?
Ukrywanie elementu można dokonać poprzez ustawienie display właściwość none . Element zostanie ukryta, a strona zostanie wyświetlona jakby element nie istnieje:
visibility:hidden; ukrywa również element.
Jednak elementem będzie nadal zajmują tyle samo miejsca co wcześniej. Element zostanie ukryty, ale wciąż wpływa na układ:
Więcej przykładów
display: none; kontra visibility: hidden;
Ten przykład pokazuje, display: none; versus visibility: hidden;
Za pomocą CSS wraz z JavaScript, aby zobaczyć treść
Ten przykład pokazuje, jak używać CSS i JavaScript, aby zobaczyć element na kliknięcie.
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»
Pokaż / CSS Properties Widoczność
| Nieruchomość | Opis |
|---|---|
| display | Określa, w jaki sposób powinien być wyświetlany element |
| visibility | Określa, czy element powinien być widoczny |