Latest web development tutorials

CSS display (display) e visibilità (visibilità)

Come visualizzare una proprietà elemento è impostato per essere visualizzato, attributo visibilità specifica che un elemento dovrebbe essere visibile o nascosto.

Box 1

Box 2
Box 3

Elementi nascosti - display: none o visibility: hidden

Nascondere un elemento per l'attributo di visualizzazione impostato su "Nessuno", o la proprietà di visibilità di "nascosto". Si noti, tuttavia, questi due metodi produrranno risultati diversi.

visibilità: nascosto per nascondere un elemento, ma elemento nascosto rimane la stessa prima dell'occupazione e non nascosto spazio. Cioè, anche se l'elemento è nascosto, ma ancora affliggono il layout.

Esempi

h1.hidden {visibility:hidden;}

Prova »

display: none per nascondere un elemento, e gli elementi nascosti non occupa spazio. In altre parole, questo elemento non è solo nascosta, e lo spazio occupato dall'elemento originale scompare dal layout pagina.

Esempi

h1.hidden {display:none;}

Prova »


CSS display - elementi di blocco e in linea

elemento Block è un elemento, occupando l'intera larghezza di una interruzione di linea prima e dopo di esso.

Esempi di elementi di blocco:

  • <H1>
  • <P>
  • <Div>

elementi in linea solo bisogno la larghezza necessaria, non forzare interruzioni di riga.

Esempi di elementi in linea:

  • <Span>
  • <a>

Come modificare un elemento di visualizzazione

È possibile modificare gli elementi di blocco e elementi in linea, e viceversa, è possibile rendere il look pagina è una combinazione di un modo particolare, e comunque seguire gli standard web.

L'esempio seguente visualizza gli elementi della lista come elementi in linea:

Esempi

li {display:inline;}

Prova »

I seguenti elementi esempio campata come elementi di blocco:

Esempi

span {display:block;}

Prova »

Nota: Cambiare il tipo di elementi di visualizzazione per vedere come viene visualizzato l'elemento, è che tipo di elementi.Per esempio: un elemento inline impostato su display: block, non è consentito di avere i propri elementi interni blocco nidificato.


Esempi

Altri esempi

Come visualizzare elemento inline.

Questo esempio dimostra come visualizzare in linea di un elemento.

Come visualizzare un elemento di blocco.

Questo esempio dimostra come visualizzare un elemento di blocco elemento.

Come utilizzare la proprietà crollo di un tavolo.

Questo esempio dimostra come utilizzare la tabella di proprietà collasso.