display (proprietà CSS) imposta se debba essere visualizzato l’elemento HTML. Nel caso di display:inline-block, l’elemento è inline ma con caratteristiche block, avendo proprietà height, margin, padding e width per tutti e quattro i suoi lati. Nel caso di display:none, l’elemento non è mostrato perché non è presente nella pagina, mentre nel caso di visibility:hidden l’elemento è presente nella pagina ma semplicemente è invisibile quindi continua ad occupare lo spazio nella pagina.
Sintassi
[selettore] {
display: block|inline|inline-block|none|display;
}
Esempi
<style>
.displayblock_1 {
display: block;
}
</style>
<span>Elemento inline (di default).</span>
<span>Elemento inline (di default).</span>
<span class="displayblock_1">Elemento block.</span>
Elemento inline (di default).Elemento inline (di default).Elemento block.
<style>
.displayinline_1 {
display: inline;
}
</style>
<p>Elemento block (di default).</p>
<p>Elemento block (di default).</p>
<p class="displayinline_1">Elemento inline.</p>
<p class="displayinline_1">Elemento inline.</p>
Elemento block (di default).
Elemento block (di default).
<style>
.displayinline_3 {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid yellow;
}
</style>
<div class="displayinline_3">box 1</div>
<div class="displayinline_3">box 2</div>
<div class="displayinline_3">box 3</div>
<div class="displayinline_3">box 4</div>
<div class="displayinline_3">box 5</div>
<style>
.displaynone_1 { display:none; }
.visibilityhidden_1 { visibility:hidden; }
</style>
<script>
jQuery(document).ready(function($) {
$("#displaynone_button").click(function() {
$(".displaynone_1").show();
$("#displaynone_button").hide();
});
$("#visibilityhidden_button").click(function() {
$(".visibilityhidden_1").css('visibility', 'visible');
$("#visibilityhidden_button").hide();
});
})
</script>
<div style="text-align:center">testo sopra visibility:hidden</div><p class="visibilityhidden_1">Elemento hidden.</p><p class="visibilityhidden_1">Elemento hidden.</p><div style="text-align:center">testo sotto visibility:hidden</div>
<button type="button" id="visibilityhidden_button">visualizza Elemento "visibility:hidden"</button>
<div style="text-align:center">testo sopra display:none</div><p class="displaynone_1">Elemento none.</p><p class="displaynone_1">Elemento none.</p><div style="text-align:center">testo sotto display:none</div>
<button type="button" id="displaynone_button">visualizza Elemento "display:none"</button>
testo sopra visibility:hidden
Elemento hidden.
Elemento hidden.
testo sotto visibility:hidden
testo sopra display:none
Elemento none.
Elemento none.
testo sotto display:none
Contenuti correlati
- CSS
- HTML
- JavaScript
- jQuery
- PHP
- SQL
- WORDPRESS
0 Comment