CSS
Controllo del layout
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>
<!--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>
<!--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>
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>