Due proprietà: display e visibility. Analizziamo similitudini e differenze.
Sabato, Marzo 22nd, 2008Chi si sarà già avvicinato al fantastico mondo dei CSS, spero anche grazie a questo sito, avrà sicuramente sperimentato queste due proprietà: display e visibility. Avrete sicuramente notato che sono simili come proprietà, ma hanno delle differenze sostanziali: andiamo ad analizzare queste proprietà più da vicino.
Per quanto riguarda la proprietà display, questa specifica il modo di visualizzazione di un elemento: il valore può essere none, block, inline e list-item. Ce ne sarebbero anche altri, ma vista la scarsa implementazione non se ne consiglia troppo l’uso. Il valore none indica che l’elemento non è visibile, il valore block indica che l’elemento sarà visibile come blocco distaccato, quale può essere ad esempio un elemento DIV; il valore inline indica che l’elemento deve assumere un comportamento da blocco in linea quale può essere quello dell’elemento SPAN; list-item indica che l’elemento si comporta come un punto di un elenco.
Per quanto riguarda invece la proprità visibility, essa, come display, imposta la visibilità di un elemento e supporta i valori: hidden(nascosto) e visible(visibile), tuttavia il comportamento è assai diverso da quello di DISPLAY. Un elemento impostato come non visibile attraverso display:none infatti non solo non è visibile, ma lo spazio che avrebbe occupato nella pagina viene rimpiazzato dagli altri elementi, se invece impostiamo visibility:hidden lo spazio cheoccuperebbe l’elemento risulta vuoto, ma viene preservato. Notiamo quindi che entrambe le proprietà possono impostare la visibilità di un elemento, ma la differenza è molto evidente.
Prossimamente analizzeremo la proprietà POSITION e alcune sue caratteristiche. Buona lettura e venite a trovarmi spesso!
r quanto riguarda il posizio per cui abbiamo bisogno di spostarlo della metà delle dimensioni del box a sinistra e in alto così da ottenere un la centratura. Questo lo facciamo modificando l’attributo margin nell’ultima riga. Ricordate, abbiamo detto che le dimensioni del box ci sarebbero state utili ai fini della centratura. Ebbene, qualsiasi saranno le dimensioni del vostro box, ricordate sempre che, per centrarlo dobbiamo impostare dei margini negativi, onde spostare l’angolo superiore sinistro, più in alto e più a destra nella misura della metà delle dimensioni del nostro box. Nel nostro caso, infatti, il box è alto 200px e largo 300 per cui, per farlo andare al centro dobbiamo farlo “salire” della metà dell’altezza, quindi 100px e spostarlo a sinistra della metà della larghezza, per cui di 150px. come Questo, come detto prima, lo otteniamo grazie alla riga 
Loading ...
