Esercitazione CSS

CSS CASA Introduzione CSS Sintassi CSS Selettori CSS CSS Come fare per Commenti CSS Colori CSS Sfondi CSS Confini CSS Margini CSS Imbottitura CSS Altezza/larghezza CSS Modello a scatola CSS Schema CSS Testo CSS Font CSS Icone CSS Collegamenti CSS Elenchi CSS Tabelle CSS Display CSS Larghezza massima CSS Posizione CSS Indice Z CSS Overflow CSS CSS galleggiante CSS Inline-block Allineamento CSS Combinatori CSS Pseudo-classe CSS Pseudoelemento CSS Opacità CSS Barra di navigazione CSS Menu a discesa CSS Galleria di immagini CSS Sprite di immagini CSS Selettori CSS Attr Moduli CSS Contatori CSS Layout del sito Web CSS Unità CSS Specificità CSS CSS! importante Funzioni matematiche CSS

CSS avanzato

Angoli arrotondati CSS Immagini del bordo CSS Sfondi CSS Colori CSS Parole chiave a colori CSS Gradienti CSS Ombre CSS Effetti di testo CSS Font Web CSS Trasformazioni 2D CSS Trasformazioni CSS 3D Transizioni CSS Animazioni CSS Suggerimenti CSS Immagini in stile CSS Riflessione dell'immagine CSS Adattamento agli oggetti CSS Posizione dell'oggetto CSS Mascheratura CSS Pulsanti CSS Impaginazione CSS Colonne multiple CSS Interfaccia utente CSS Variabili CSS Dimensioni della scatola CSS Query sui media CSS Esempi CSS MQ Cassetta flessibile CSS

CSS reattivo

Introduzione a RWD Vista posteriore Vista griglia RWD Query sui media RWD Immagini RWD Video RWD Quadri RWD Modelli RWD

Griglia CSS

Introduzione alla griglia Contenitore a griglia Elemento griglia

CSS SASS

Esercitazione SASS

Esempi CSS

Modelli CSS Esempi CSS css quiz Esercizi CSS Certificato CSS

Riferimenti CSS

Riferimento CSS Selettori CSS Funzioni CSS CSS di riferimento sonoro Font sicuri per il Web CSS CSS Animabile Unità CSS Convertitore CSS PX-EM Colori CSS Valori di colore CSS Valori predefiniti CSS Supporto del browser CSS

Layout CSS - La proprietà display


La displayproprietà è la proprietà CSS più importante per il controllo del layout.


La proprietà di visualizzazione

La displayproprietà specifica se/come viene visualizzato un elemento.

Ogni elemento HTML ha un valore di visualizzazione predefinito a seconda del tipo di elemento che è. Il valore di visualizzazione predefinito per la maggior parte degli elementi è blocko inline.

Fare clic per mostrare il pannello

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).


Elementi a livello di blocco

Un elemento a livello di blocco inizia sempre su una nuova riga e occupa l'intera larghezza disponibile (si estende a sinistra ea destra il più possibile).

L'elemento <div> è un elemento a livello di blocco.

Esempi di elementi a livello di blocco:

  • <div>
  • <h1> - <h6>
  • <p>
  • <modulo>
  • <intestazione>
  • <piè di pagina>
  • <sezione>

Elementi in linea

Un elemento inline non inizia su una nuova riga e occupa solo la larghezza necessaria.

Questo è un elemento <span> inline all'interno di un paragrafo.

Esempi di elementi in linea:

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

Display: nessuno;

display: none;è comunemente usato con JavaScript per nascondere e mostrare elementi senza eliminarli e ricrearli. Dai un'occhiata al nostro ultimo esempio in questa pagina se vuoi sapere come questo può essere ottenuto.

L' <script>elemento utilizza display: none; come predefinito. 



Sostituisci il valore di visualizzazione predefinito

Come accennato, ogni elemento ha un valore di visualizzazione predefinito. Tuttavia, puoi ignorarlo.

Cambiare un elemento inline in un elemento block, o viceversa, può essere utile per far sembrare la pagina in un modo specifico e continuare a seguire gli standard web.

Un esempio comune è la creazione di <li>elementi in linea per i menu orizzontali:

Esempio

li {
  display: inline;
}

Nota: l'impostazione della proprietà di visualizzazione di un elemento cambia solo la modalità di visualizzazione dell'elemento , NON il tipo di elemento. Quindi, un elemento inline con display: block;non può avere altri elementi di blocco al suo interno.

L'esempio seguente mostra gli elementi <span> come elementi di blocco:

Esempio

span {
  display: block;
}

L'esempio seguente mostra gli elementi <a> come elementi di blocco:

Esempio

a {
  display: block;
}

Nascondi un elemento - display:nessuno o visibilità:nascosto?

display:none

Italia

visibility:hidden

foresta

Ripristina

Luci

È possibile nascondere un elemento impostando la displayproprietà su none. L'elemento verrà nascosto e la pagina verrà visualizzata come se l'elemento non fosse presente:

Esempio

h1.hidden {
  display: none;
}

visibility:hidden;nasconde anche un elemento.

Tuttavia, l'elemento occuperà comunque lo stesso spazio di prima. L'elemento sarà nascosto, ma influirà comunque sul layout:

Esempio

h1.hidden {
  visibility: hidden;
}

Altri esempi


This example demonstrates display: none; versus visibility: hidden;


This example demonstrates how to use CSS and JavaScript to show an element on click.


Test Yourself With Exercises

Exercise:

Hide the <h1> element. It should still take up the same space as before.

<style>
h1 {
  : ;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


CSS Display/Visibility Properties

Property Description
display Specifies how an element should be displayed
visibility Specifies whether or not an element should be visible