logo

Propietat de visualització CSS

El propietat de visualització especifica el comportament de visualització d'un element (el tipus de quadre de representació). Defineix com es representa un element en el disseny, determinant el seu posicionament i la seva interacció dins del flux i l'estructura del document.

Sintaxi:



display: value;>

Valors de propietat:

ValorDescripció
en liniaS'utilitza per mostrar un element com a element en línia.
blocS'utilitza per mostrar un element com a element de bloc
contingutsS'utilitza per desaparèixer el recipient.
flexionarS'utilitza per mostrar un element com a contenidor flexible a nivell de bloc.
graellaS'utilitza per mostrar un element com a contenidor de graella a nivell de bloc.
bloc en líniaS'utilitza per mostrar un element com a contenidor de blocs de nivell en línia.
flexió en líniaS'utilitza per mostrar un element com a contenidor flexible de nivell en línia.
quadrícula en líniaS'utilitza per mostrar un element com a contenidor de graella de nivell en línia.
taula en líniaS'utilitza per mostrar una taula de nivell en línia
element de llistaS'utilitza per mostrar tots els elements
  • element.
  • atropellamentS'utilitza per mostrar un element en línia o a nivell de bloc, depenent del context.
    taulaS'utilitza per establir el comportament de tots els elements. per a tots els elements.
    subtítol de la taulaS'utilitza per establir el comportament de tots els elements.
    grup-taula-columnaS'utilitza per establir el comportament de tots els elements.
    grup-capçalera-taulaS'utilitza per establir el comportament de tots els elements.
    grup de peu de taulaS'utilitza per establir el comportament de tots els elements.
    taula-fila-grupS'utilitza per establir el comportament de tots els elements.
    taula-cel·laS'utilitza per establir el comportament comper a tots els elements.
    taula-columnaS'utilitza per establir el comportament de tots els elements.
    taula-filaS'utilitza per establir el comportament com
    capS'utilitza per eliminar l'element.
    inicialS'utilitza per establir el valor predeterminat.
    tu heretesS'utilitza per heretar propietats dels elements dels seus pares.

    Exemple: Aquest exemple utilitza 3 divs per demostrar la propietat de visualització CSS.

    en Java regex
    HTML
       CSS Mostra el títol de propietat><style>#geeks1 { alçada: 100px;  amplada: 200 píxels;  fons: verd verd;  visualització: bloc;  } #geeks2 { alçada: 100px;  amplada: 200 píxels;  fons: cian;  visualització: bloc;  } #geeks3 { alçada: 100px;  amplada: 200 píxels;  fons: verd;  visualització: bloc;  } .gfg { marge esquerre: 20px;  mida de la lletra: 42px;  pes de la lletra: negreta;  color: #009900;  } .geeks { font-size: 25px;  marge esquerre: 30 píxels;  } .principal { marge: 50px;  alineació de text: centre;  } estil> cap> <body> <div>techcodeview.comdiv><div>visualització: bloc; propietatdiv><div> <div id='geeks1'>Bloc 1div><div id='geeks2'>Bloc 2div><div id='geeks3'>Bloc 3div> div> cos> html>>></pre> </code> <h2><span>Propietat de visualització CSS ​​Exemples</span></h2><h3>  <b>  <strong>1. Ús del bloc de visualització</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Aquesta propietat s'utilitza com a propietat per defecte de div. Aquesta propietat col·loca el div un darrere l'altre verticalment. L'alçada i l'amplada del div es poden canviar mitjançant la propietat del bloc si no s'esmenta l'amplada, aleshores el div sota la propietat del bloc ocuparà l'amplada del contenidor.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'>  <b>  <strong>Exemple:</strong>  </b>  <span>Utilitzeu el CSS donat a l'exemple anterior.</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>Sortida:</strong>  </b>  <span> </span></p>  <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt="Mostra la propietat del bloc"><h3>  <b>  <strong>2. Ús de la pantalla en línia</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Aquesta propietat és la propietat per defecte de les etiquetes d'ancoratge. S'utilitza per col·locar el div en línia, és a dir, de manera horitzontal. La propietat de visualització en línia ignora l'alçada i l'amplada establertes per l'usuari.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'>  <b>  <strong>Exemple:</strong>  </b>  <span>Utilitzeu el CSS donat a l'exemple anterior.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/pandas-dataframe-merge">pd fusionar</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>Sortida:</strong>  </b>  <span> </span></p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt="Mostra la sortida d'exemple de propietat en línia"></p> <h3>  <b>  <strong>3. Ús de Display Inline-block</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Aquesta característica utilitza les dues propietats esmentades anteriorment, block i inline. Per tant, aquesta propietat alinea el div en línia, però la diferència és que pot editar l'alçada i l'amplada del bloc. Bàsicament, això alinearà el div tant en bloc com en línia.</span></p> <p dir='ltr'>  <b>  <strong>Exemple:</strong>  </b>  <span>Utilitzeu el CSS donat a l'exemple anterior.</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>Sortida:</strong>  </b>  <span> </span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-convert-byte-array-string-java">matriu de bytes java a cadena</a>
    </blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt="Mostra la sortida d'exemple de bloc en línia"></p> <h3>  <b>  <strong>4. Ús de Mostrar cap:</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Aquesta propietat amaga el div o el contenidor que utilitzen aquesta propietat. Utilitzar-lo en un dels div deixarà clar el funcionament.</span></p> <p dir='ltr'>  <b>  <strong>Exemple:</strong>  </b>  <span>Utilitzeu el CSS donat a l'exemple anterior.</span></p> <pre class='hljs'>#geeks2 {  background: cyan;  display: none; }></pre><p dir='ltr'>  <b>  <strong>Sortida:</strong>  </b>  <span>Mostra cap propietat a</span>  <b>  <strong>bloc 2</strong>  </b>  </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt="mostrar cap propietat"></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/numpy-zeros-python">np.zeros</a>
    </blockquote> <p dir='ltr'>  <b>  <strong>Navegadors compatibles:</strong>  </b>  </p> <p dir='ltr'><span>Els navegadors compatibles amb el</span>  <b>  <strong>Propietat de visualització</strong>  </b>  <span>s'enumeren a continuació:</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Edge</span> <span> </span> </li><li value='3'> <span>Firefox</span> </li><li value='4'> <span>Òpera</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="/apache-ant-tutorial/">Tutorial Apache Ant</a> </li><li> <a href="/splunk-tutorial/">Tutorial De Splunk</a> </li><li> <a href="/ethical-hacking/">Hacking Ètic</a> </li><li> <a href="/maths-class-6-cat/">Matemàtiques-Classe-6</a> </li><li> <a href="/python/">Pitó</a> </li><li> <a href="/control-systems/">Sistemes De Control</a> </li><li> <a href="/best-apps/">Millors Aplicacions</a> </li><li> <a href="/dbms-basics/">Conceptes Bàsics De Dbms</a> </li><li> <a href="/memory-management/">Gestió De La Memòria</a> </li><li> <a href="/english-questions/">Preguntes D'anglès</a> </li>
                                    
                                </ul>
                            </div><!--//content-->  
                        </div><!--//section-inner-->                 
                    </aside><!--//aside-->
                    
                     <aside class="testimonials aside section">
                       <div class="section-inner">
                            <h2 class="heading">Quina és la forma completa de COP</h2>
                            <div class="content">
                                <div class="item">
                                     <blockquote class="quote">                                  
                                        <span> <i class="fa fa-quote-left"></i> COP Full Form amb MBPS significa, significat, Full Forms, què és MBPS, descripció, exemple, explicació, acrònim de, abreviatura, definicions, nom complet</span>
                                    </blockquote>                
                                                                                                 
                                </div><!--//item-->
                                
                                <p> <a class="more-link" href="/what-is-full-form-cop"> <i class="fa fa-external-link"></i> Llegir Més</a> </p> 
                                
                            </div><!--//content-->
                        </div><!--//section-inner-->
                    </aside><!--//section-->
                    
                   
                                
                     <aside class="languages aside section">
                        <div class="section-inner">
                            <h2 class="heading">Articles D'Interès</h2>
                            <div class="content">
                                <ul class="list-unstyled">
                                    <li class="item">
                                        <span class="title"> <strong> <a href="/const-keyword-c">Const paraula clau en C++</a> </strong> </span>
                                        
                                    </li><!--//item--><li class="item">
                                        <span class="title"> <strong> <a href="/ml-cups-converter-free-online-converter">Convertidor de ml a tasses - Convertidor en línia gratuït</a> </strong> </span>
                                        
                                    </li><!--//item--><li class="item">
                                        <span class="title"> <strong> <a href="/delete-directory-file-using-python">Suprimiu un directori o fitxer amb Python</a> </strong> </span>
                                        
                                    </li><!--//item--><li class="item">
                                        <span class="title"> <strong> <a href="/convert-string-an-integer-javascript">Converteix una cadena en un enter en JavaScript</a> </strong> </span>
                                        
                                    </li><!--//item--><li class="item">
                                        <span class="title"> <strong> <a href="/python-convert-list-python-array">Python | Converteix la llista en una matriu Python</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">Entrades Populars</h2>
                            <div class="content">
                                <ul class="list"> <li><a href="/c-example-hello-world">codi de mostra c#</a>
    </li><li><a href="/palindrome-program-c">nombre de palíndrom</a>
    </li><li><a href="/arp-commands">comanda arp-a</a>
    </li><li><a href="/pseudocode-java">pseudocodi java</a>
    </li><li><a href="/difference-between-ice">neu vs gel</a>
    </li><li><a href="/java-extend-multiple-classes">una classe pot estendre diverses classes</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 Tots Els Drets Reservats |  <a href="//iw.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa</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>