PROPRIETÀ DI VISUALIZZAZIONE CSS

IL proprietà di visualizzazione specifica il comportamento di visualizzazione di un elemento (il tipo di riquadro di rendering). Definisce come viene rappresentato un elemento nel layout, determinandone il posizionamento e l’interazione all’interno del flusso e della struttura del documento.

Sintassi:

display: value;>

Valori delle proprietà:

Valore Descrizione

in linea Viene utilizzato per visualizzare un elemento come elemento in linea.

bloccare Viene utilizzato per visualizzare un elemento come elemento di blocco

Contenuti Serve per far scomparire il contenitore.

flettere Viene utilizzato per visualizzare un elemento come contenitore flessibile a livello di blocco.

griglia Viene utilizzato per visualizzare un elemento come contenitore della griglia a livello di blocco.

blocco in linea Viene utilizzato per visualizzare un elemento come contenitore di blocchi a livello in linea.

inline-flex Viene utilizzato per visualizzare un elemento come contenitore flessibile a livello in linea.

griglia in linea Viene utilizzato per visualizzare un elemento come contenitore della griglia a livello in linea.

tabella in linea Viene utilizzato per visualizzare una tabella a livello in linea

voce-elenco Viene utilizzato per visualizzare tutti gli elementi in
elemento.

correre in Viene utilizzato per visualizzare un elemento in linea o a livello di blocco, a seconda del contesto.

tavolo

Viene utilizzato per impostare il comportamento come per tutti gli elementi. per tutti gli elementi.

didascalia	Viene utilizzato per impostare il comportamento come per tutti gli elementi.
gruppo-colonne-della-tabella	Viene utilizzato per impostare il comportamento come per tutti gli elementi.
gruppo-intestazione-tabella	Viene utilizzato per impostare il comportamento come per tutti gli elementi.
gruppo-footer-tabella	Viene utilizzato per impostare il comportamento come per tutti gli elementi.
gruppo-riga-tabella	Viene utilizzato per impostare il comportamento come per tutti gli elementi.
cella della tabella	Viene utilizzato per impostare il comportamento come	per tutti gli elementi.
colonna della tabella	Viene utilizzato per impostare il comportamento come per tutti gli elementi.
riga della tabella	Viene utilizzato per impostare il comportamento come
nessuno	Viene utilizzato per rimuovere l'elemento.
iniziale	Viene utilizzato per impostare il valore predefinito.
erediti	Viene utilizzato per ereditare la proprietà dagli elementi dei suoi genitori.

Esempio : Questo esempio utilizza 3 div per dimostrare la proprietà display CSS.

vicky kaushal età

HTML

    CSS Visualizza titolo proprietà><style>#geeks1 {altezza: 100px;  larghezza: 200px;  sfondo: verde acqua;  blocco di visualizzazione;  } #geeks2 { altezza: 100px;  larghezza: 200px;  sfondo: ciano;  blocco di visualizzazione;  } #geeks3 { altezza: 100px;  larghezza: 200px;  sfondo: verde;  blocco di visualizzazione;  } .gfg { margine sinistro: 20px;  dimensione carattere: 42px;  peso carattere: grassetto;  colore: #009900;  } .geeks { dimensione carattere: 25px;  margine sinistro: 30px;  } .main { margine: 50px;  allineamento testo: centro;  } stile> testa> <body> <div>techcodeview.comdiv><div>blocco di visualizzazione; proprietàdiv><div> <div id='geeks1'>Blocca 1div><div id='geeks2'>Blocca 2div><div id='geeks3'>Blocca 3div> div> corpo> html>></pre> </code> <h2><span>Esempi di proprietà di visualizzazione CSS</span></h2><h3>  <b>  <strong>1. Utilizzo del blocco display</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Questa proprietà viene utilizzata come proprietà predefinita di div. Questa proprietà posiziona i div uno dopo l'altro verticalmente. L'altezza e la larghezza del div possono essere modificate utilizzando la proprietà block. Se la larghezza non è menzionata, il div sotto la proprietà block occuperà la larghezza del contenitore.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'>  <b>  <strong>Esempio:</strong>  </b>  <span>Utilizza il CSS fornito nell'esempio sopra.</span></p> <pre class='hljs'>#geeks1 {  background: teal;  display: block; } #geeks2 {  background: cyan;  display: block; } #geeks3 {  background: green;  display: block; }></pre><p dir='ltr'>  <b>  <strong>Produzione:</strong>  </b>  <span> </span></p>  <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt="proprietà del blocco di visualizzazione"><h3>  <b>  <strong>2. Utilizzo della visualizzazione in linea</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Questa proprietà è la proprietà predefinita dei tag di ancoraggio. Viene utilizzato per posizionare il div in linea, ovvero in modo orizzontale. La proprietà di visualizzazione in linea ignora l'altezza e la larghezza impostate dall'utente.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'>  <b>  <strong>Esempio:</strong>  </b>  <span>Utilizza il CSS fornito nell'esempio sopra.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-contains">la stringa Java contiene</a>
</blockquote> <pre class='hljs'>#geeks1 {  background: teal;  display: inline; } #geeks2 {  background: cyan;  display: inline; } #geeks3 {  background: green;  display: inline; }></pre><p dir='ltr'>  <b>  <strong>Produzione:</strong>  </b>  <span> </span></p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt="visualizza l'output di esempio della proprietà in linea"></p> <h3>  <b>  <strong>3. Utilizzo del blocco Display Inline</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Questa funzionalità utilizza entrambe le proprietà menzionate sopra, blocco e in linea. Quindi, questa proprietà allinea il div in linea ma la differenza è che può modificare l'altezza e la larghezza del blocco. Fondamentalmente, questo allineerà il div sia in modalità blocco che in linea.</span></p> <p dir='ltr'>  <b>  <strong>Esempio:</strong>  </b>  <span>Utilizza il CSS fornito nell'esempio sopra.</span></p> <pre class='hljs'>#geeks1  {  background: teal;  display: inline-block; }  #geeks2 {  background: cyan;  display: inline-block;  }  #geeks3 {  background: green;  display: inline-block; }></pre><p dir='ltr'>  <b>  <strong>Produzione:</strong>  </b>  <span> </span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-date">convertire una stringa in una data</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt="visualizza l'output di esempio del blocco in linea"></p> <h3>  <b>  <strong>4. Utilizzo di Visualizza nessuno:</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Questa proprietà nasconde il div o il contenitore che utilizza questa proprietà. Usandolo su uno dei div renderà il lavoro più chiaro.</span></p> <p dir='ltr'>  <b>  <strong>Esempio:</strong>  </b>  <span>Utilizza il CSS fornito nell'esempio sopra.</span></p> <pre class='hljs'>#geeks2 {  background: cyan;  display: none; }></pre><p dir='ltr'>  <b>  <strong>Produzione:</strong>  </b>  <span>Non visualizzare alcuna proprietà attiva</span>  <b>  <strong>blocco 2</strong>  </b>  </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt="non visualizzare alcuna proprietà"></p> <p dir='ltr'>  <b>  <strong>Browser supportati:</strong>  </b>  </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-math-random-method">math.random java</a>
</blockquote> <p dir='ltr'><span>I browser supportati da</span>  <b>  <strong>Proprietà di visualizzazione</strong>  </b>  <span>sono elencati di seguito:</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Bordo</span> <span> </span> </li><li value='3'> <span>Firefox</span> </li><li value='4'> <span>musica lirica</span> </li><li value='5'> <span>Safari</span> </li></ul>  <br>  <br></span></td></tr></tbody></table></article>
                         
                        </div><!--//content-->
                    </div><!--//section-inner-->                 
                </section><!--//section-->
    
            </div><!--//primary-->
            <div class="secondary col-md-4 col-sm-12 col-xs-12">
                  <aside class="info aside section">
                    <div class="section-inner">
                        <h2 class="">Categoria</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/math-concepts/">Concetti Matematici</a> </li><li> <a href="/exception-handling/">La Gestione Delle Eccezioni</a> </li><li> <a href="/photoshop-tutorial/">Tutorial Di Photoshop</a> </li><li> <a href="/linux-tools/">Strumenti Linux</a> </li><li> <a href="/access-modifiers/">Modificatori Di Accesso</a> </li><li> <a href="/python-math-library/">Libreria Matematica Python</a> </li><li> <a href="/floyd-warshall/">Floyd-Warshall</a> </li><li> <a href="/cpp-friend/">Cpp-Amico</a> </li><li> <a href="/uml-tutorial/">Esercitazione Sull'uml</a> </li><li> <a href="/misc/">Varie</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">Esercitazione Sull'uml</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Esercitazione Sull'uml</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/uml-tutorial/"> <i class="fa fa-external-link"></i> Per Saperne Di Più</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Articoli Interessanti</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/how-create-discord-account">Come creare un account Discord</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/how-put-text-over-an-image-google-docs">Come inserire testo su un'immagine in Google Docs</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/difference-between-throw">Differenza tra lancio e lancio in Java</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/convert-list-array-java">Converti elenco in array in Java</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/javascript-array-reduce-method">Metodo JavaScript Array reduce()</a> </strong> </span>
                                    
                                </li><!--//item-->
                               
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
              
                 <aside class="list music aside section">
                    <div class="section-inner">
                        <h2 class="heading">Messaggi Popolari</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/bash-if">bash se condizione</a>
</li><li><a href="/rekha">attrice cinematografica rekha</a>
</li><li><a href="/git-rebase">git rebase</a>
</li><li><a href="/alpha-beta-pruning">esempio di potatura alfa beta</a>
</li><li><a href="/python-chr-function">funzione Python CHR</a>
</li> 
                                
                                
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
              
            </div><!--//secondary-->    
        </div><!--//row-->
    </div><!--//masonry-->
    
	    <footer class="footer">
        <div class="container text-center">
                <span>
Copyright ©2025 Tutti I Diritti Riservati |  <a href="//ja.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Disclaimer</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Chi Siamo</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica Sulla Riservatezza</a>  </span>
        </div>
    </footer>
 
         
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>    
    

    <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>     
	
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
	
</body>
</html>

TechCodeview