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="/shortcut-keys/">Tecles De Drecera</a> </li><li> <a href="/sorting/">Classificar</a> </li><li> <a href="/cpp-template/">Plantilla Cpp</a> </li><li> <a href="/interesting-facts/">Dades D'interès</a> </li><li> <a href="/perl-tutorial/">Tutorial De Perl</a> </li><li> <a href="/google-tricks/">Trucs De Google</a> </li><li> <a href="/biology-difference-between/">Biologia-Diferència-Entre</a> </li><li> <a href="/web-scraping/">Raspat Web</a> </li><li> <a href="/cpp-oops/">Cpp-Oops</a> </li><li> <a href="/artificial-neural-network/">Xarxa Neuronal Artificial</a> </li>
                                    
                                </ul>
                            </div><!--//content-->  
                        </div><!--//section-inner-->                 
                    </aside><!--//aside-->
                    
                     <aside class="testimonials aside section">
                       <div class="section-inner">
                            <h2 class="heading">HashSet a Java</h2>
                            <div class="content">
                                <div class="item">
                                     <blockquote class="quote">                                  
                                        <span> <i class="fa fa-quote-left"></i> Un portal d'informàtica per a frikis. Conté articles d'informàtica i programació ben escrits, ben pensats i ben explicats, proves i preguntes pràctiques/programació competitiva/entrevistes d'empresa.</span>
                                    </blockquote>                
                                                                                                 
                                </div><!--//item-->
                                
                                <p> <a class="more-link" href="/hashset-java"> <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="/cin-c">cin en C++</a> </strong> </span>
                                        
                                    </li><!--//item--><li class="item">
                                        <span class="title"> <strong> <a href="/python-numpy-matrix-function/">Funció Python Numpy-Matrix</a> </strong> </span>
                                        
                                    </li><!--//item--><li class="item">
                                        <span class="title"> <strong> <a href="/parse-json-c">Analitza JSON en C#</a> </strong> </span>
                                        
                                    </li><!--//item--><li class="item">
                                        <span class="title"> <strong> <a href="/how-add-code-block-google-docs">Com afegir un bloc de codi a Google Docs</a> </strong> </span>
                                        
                                    </li><!--//item--><li class="item">
                                        <span class="title"> <strong> <a href="/int_max-int_min-c-c">INT_MAX i INT_MIN en C/C++ i aplicacions</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="/css-padding">farciment css</a>
    </li><li><a href="/java-comments">comentaris java</a>
    </li><li><a href="/java-math-exp-method">número d''euler en java'</a>
    </li><li><a href="/loops-java">bucle del programa java</a>
    </li><li><a href="/how-align-images-css">alinear la imatge amb css</a>
    </li><li><a href="/how-generate-random-number-java">nombre aleatori en java</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="//it.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>