Ricerca…


Sintassi

  • display: nessuno | inline | blocco | lista-elemento | elemento della lista inline | blocco in linea | tavolo in linea | tabella | cella-tabella | tabella-colonna | gruppo-colonna-tabella | tabella-footer-group | tabella-intestazione-gruppo | table-row | gruppo di righe della tabella | flex | inline-flex | griglia | griglia in linea | run-in | rubino | rubino-base | rubino-testo | contenitore-rubino-base | contenitore-testo-rubino | contenuto;

Parametri

Valore Effetto
none Nascondi l'elemento e impediscilo di occupare spazio.
block Elemento di blocco, occupa il 100% della larghezza disponibile, rompi dopo elemento.
inline Elemento in linea, non occupa larghezza, nessuna interruzione dopo elemento.
inline-block Assunzione di proprietà speciali da elementi sia in linea che a blocchi, nessuna interruzione, ma può avere larghezza.
inline-flex Visualizza un elemento come un contenitore flessibile a livello di linea.
inline-table L'elemento viene visualizzato come una tabella a livello in linea.
grid Si comporta come un elemento di blocco e ne espone il contenuto in base al modello di griglia.
flex Si comporta come un elemento di blocco e presenta il suo contenuto secondo il modello di flexbox.
inherit Eredita il valore dall'elemento genitore.
initial Reimposta il valore sul valore predefinito preso dai comportamenti descritti nelle specifiche HTML o dal foglio di stile predefinito browser / utente.
table Si comporta come l'elemento table HTML.
table-cell Lascia che l'elemento si comporti come un elemento <td>
table-column Lascia che l'elemento si comporti come un elemento <col>
table-row Lascia che l'elemento si comporti come un elemento <tr>
list-item Lascia che l'elemento si comporti come un elemento <li> .

La proprietà di visualizzazione

La proprietà CSS di display è fondamentale per controllare il layout e il flusso di un documento HTML. La maggior parte degli elementi ha un valore di display predefinito di entrambi i block o in inline (sebbene alcuni elementi abbiano altri valori predefiniti).

In linea

Un elemento in inline occupa solo la larghezza necessaria. Si impila orizzontalmente con altri elementi dello stesso tipo e non può contenere altri elementi non in linea.

<span>This is some <b>bolded</b> text!</span>

Come dimostrato sopra, due elementi inline , <span> e <b> , sono in linea (da cui il nome) e non interrompono il flusso del testo.

Bloccare

Un elemento di block occupa la larghezza massima disponibile del suo elemento padre. Inizia con una nuova riga e, a differenza degli elementi in inline , non limita il tipo di elementi che può contenere.

<div>Hello world!</div><div>This is an example!</div>

L'elemento div è a livello di blocco per impostazione predefinita e, come mostrato sopra, i due elementi di block sono impilati verticalmente e, a differenza degli elementi in inline , il flusso del testo si interrompe.

Blocco in linea

Il valore inline-block ci offre il meglio di entrambi i mondi: unisce l'elemento al flusso del testo e ci consente di utilizzare padding , margin , height e proprietà simili che non hanno alcun effetto visibile sugli elementi in inline .

Gli elementi con questo valore di visualizzazione si comportano come se fossero testo normale e, di conseguenza, sono influenzati dalle regole che controllano il flusso del testo, ad esempio l' text-align . Di default sono anche ridotte alla dimensione più piccola possibile per ospitare il loro contenuto.

<!--Inline: unordered list-->
<style>
li {
    display : inline;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

Display: inline

<!--block: unordered list-->
<style>
li {
    display : block;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

Blocco di visualizzazione

<!--Inline-block: unordered list-->
<style>
li {
    display : inline-block;
    background : lightblue;
    padding:10px; 

    border-width:2px;
    border-color:black;
    border-style:solid;
    }

</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

Display: inline-block

nessuna

Un elemento a cui non viene assegnato il valore none alla proprietà display non verrà visualizzato affatto.

Ad esempio creiamo un elemento div che ha un id di myDiv :

<div id="myDiv"></div>

Questo può ora essere contrassegnato come non visualizzato dalla seguente regola CSS:

#myDiv {
    display: none;
}

Quando un elemento è stato impostato per essere display:none; il browser ignora ogni altra proprietà di layout per quell'elemento specifico (sia position che float ). Nessuna casella sarà resa per quell'elemento e la sua esistenza in html non influenzerà la posizione dei seguenti elementi.

Si noti che questo è diverso dall'impostazione della proprietà di visibility su hidden . Impostazione della visibility: hidden; perché un elemento non visualizza l'elemento sulla pagina ma l'elemento continua a occupare lo spazio nel processo di rendering come se fosse visibile. Ciò influenzerà quindi il modo in cui i seguenti elementi vengono visualizzati sulla pagina.

Il valore none per la proprietà display è comunemente usato insieme a JavaScript per mostrare o nascondere elementi a volontà, eliminando la necessità di eliminarli e ricrearli effettivamente.

Per ottenere la vecchia struttura della tabella utilizzando div

Questa è la normale struttura della tabella HTML

<style>
    table {
        width: 100%;
    }
</style>

<table>
  <tr>
    <td>
        I'm a table
    </td>
  </tr>
</table>

Puoi fare la stessa implementazione in questo modo

<style>
    .table-div {
        display: table;
    }
    .table-row-div {
        display: table-row;
    }
    .table-cell-div {
        display: table-cell;
    }
</style>

<div class="table-div>
  <div class="table-row-div>
    <div class="table-cell-div>
      I behave like a table now
    </div>
  </div>
</div>


Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow