Layout CSS - proprietà display

display L'attributo display è uno dei più importanti attributi CSS per il controllo della布局.

Attributo display

display L'attributo definisce se/come visualizzare l'elemento.

Ogni elemento HTML ha un valore predefinito di display, che dipende dal tipo dell'elemento. La maggior parte degli elementi ha come valore predefinito di display block o inline.

Clicca per visualizzare l'area

Questa area contiene un elemento <div>, che è nascosto per impostazione predefinita. (display: none

È stiliato dal CSS, e lo mostriamo utilizzando JavaScript (cambia in) display: block

)

Elemento bloccante (block element)

Gli elementi bloccanti iniziano sempre una nuova riga e occupano tutto lo spazio disponibile (estendendosi il più possibile a sinistra e a destra).

Questo elemento <div> è un elemento bloccante.

  • Esempi di elementi bloccanti:
  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>

<section>

Elemento in linea (inline element)

Gli elementi in linea non iniziano una nuova riga e occupano solo la larghezza necessaria.Questo è un paragrafo in linea.

Elemento <span> in linea

  • Esempi di elementi in linea:
  • <span>
  • <a>

<img>

display: none; Display: none;

Di solito viene utilizzato insieme a JavaScript per nascondere e mostrare gli elementi senza doverli eliminare e ricreare. Se desideri sapere come raggiungere questo obiettivo, consulta l'ultimo esempio su questa pagina.<script> l'elemento utilizza display: none;.

Sovrascrivere il valore di Display predefinito

Come menzionato in precedenza, ogni elemento ha un valore di display predefinito. Ma puoi sovrascriverlo.

Cambiare un elemento in linea in un elemento bloccante e viceversa, è utile per far apparire la pagina in un modo specifico mentre si seguono gli standard Web.

Un esempio comune è creare elementi in linea per implementare menu orizzontali. <li> elemento:

esempio

li {
  display: inline;
}

Prova Personalmente

Attenzione:Impostare l'attributo display dell'elemento cambierà soloil modo in cui l'elemento è visualizzatosenza cambiare la natura dell'elemento. Pertanto, con display: block; Gli elementi in linea non sono autorizzati a contenere altri elementi bloccanti all'interno di essi.

Esempio: Il seguente esempio mostrerà l'elemento <span> come elemento bloccante:

esempio

span {
  display: block;
}

Prova Personalmente

Esempio: Il seguente esempio mostrerà l'elemento <a> come elemento bloccante:

esempio

a {
  display: block;
}

Prova Personalmente

Nascondere l'elemento - display: none o visibility: hidden?

display: none

visibility: hidden

Reset

attraverso display impostare l'attributo nessuno È possibile nascondere l'elemento. L'elemento sarà nascosto e la pagina apparirà come se l'elemento non fosse presente:

esempio

h1.hidden {
  display: none;
}

Prova Personalmente

visibility: hidden; È anche possibile nascondere l'elemento.

Ma, l'elemento continuerà a occupare lo stesso spazio dell'anteprima. L'elemento sarà nascosto, ma continuerà a influenzare la layout:

esempio

h1.hidden {
  visibility: hidden;
}

Prova Personalmente

Altri Esempi

Differenze tra display: none; e visibility: hidden;
Questo esempio dimostra la differenza tra display: none; e visibility: hidden;
Combina CSS e JavaScript per visualizzare il contenuto
Questo esempio dimostra come utilizzare CSS e JavaScript per visualizzare l'elemento quando viene cliccato.

Proprietà Display/Visibility CSS

Proprietà Descrizione
display Specificare come visualizzare l'elemento.
visibility Specificare se l'elemento deve essere visibile.