Układ CSS - atrybut display

display Atrybut display jest jednym z najważniejszych atrybutów CSS do kontroli układu.

Atrybut display

display Atrybut określa, czy/które elementy mają być wyświetlane.

Każdy element HTML ma domyślną wartość display, która zależy od jego typu elementu. Domyślną wartością display dla większości elementów jest block lub inline.

Kliknij, aby wyświetlić panel

Ten panel zawiera element <div>, który domyślnie jest ukryty. (display: none)

jest ustawiony przez CSS, a my używamy JavaScript do jego wyświetlenia. (Zmień na display: block)

Elementy blokowe (block element)

Elementy blokowe zawsze zaczynają nową linię i zajmują całą dostępną szerokość (jak najbardziej w lewo i w prawo).

Ten element <div> należy do elementów blokowych.

Oto kilka przykładów elementów blokowych:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

elementy wewnętrzne (inline element)

elementy wewnętrzne nie zaczynają nowej linii, zajmują tylko wymaganą szerokość.

To jest akapit:wewnętrzny element <span>.

Oto kilka przykładów elementów wewnętrznych:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; jest zwykle używane razem z JavaScriptem do ukrywania i wyświetlania elementów, bez konieczności usuwania i ponownego tworzenia ich. Jeśli chcesz dowiedzieć się, jak osiągnąć ten cel, sprawdź ostatni przykład na tej stronie.

Domyślnie,<script> element używa display: none;.

Nadpisanie domyślnej wartości Display

Jak już wspomniano, każdy element ma domyślną wartość display. Możesz jednak nadpisać ją.

zmiana elementu wewnętrznego na blokowy i na odwrót, jest bardzo użyteczna do wyświetlania strony w określony sposób, jednocześnie przestrzegając standardów Web.

Jednym z powszechnych przykładów jest tworzenie wewnętrznych elementów wiersza do tworzenia poziomych menu: <li> element:

przykład

li {
  display: inline;
}

Spróbuj sam

Uwaga:ustawienie atrybutu display elementu zmieni tylkowyświetlanie elementunie zmieniając rodzaju elementu. Dlatego, elementy z display: block; wewnętrzne elementy wiersza nie pozwalają na zawieranie innych elementów blokowych.

Poniższy przykład wyświetla element <span> jako element blokowy:

przykład

span {
  display: block;
}

Spróbuj sam

Poniższy przykład wyświetla element <a> jako element blokowy:

przykład

a {
  display: block;
}

Spróbuj sam

Ukrycie elementu - display: none czy visibility: hidden?

display: none

visibility: hidden

Reset

przez ustawienie display wartość atrybutu ustawiona na none Można ukryć element. Element będzie ukryty, a strona będzie wyglądać, jakby element nie był w niej:

przykład

h1.hidden {
  display: none;
}

Spróbuj sam

visibility: hidden; Można również ukryć element.

Jednak, element wciąż zajmuje tyle samej przestrzeni co wcześniej. Element będzie ukryty, ale wciąż wpłynie na układ:

przykład

h1.hidden {
  visibility: hidden;
}

Spróbuj sam

Więcej przykładów

Różnice między display: none; a visibility: hidden;
Ten przykład pokazuje różnicę między display: none; a visibility: hidden;
Łączenie CSS i JavaScript do wyświetlania treści
Ten przykład pokazuje, jak wyświetlić element za pomocą CSS i JavaScript po kliknięciu.

Właściwości Display/Visibility CSS

Atrybut Opis
display Określa, jak element powinien być wyświetlany.
visibility Określa, czy element powinien być widoczny.