CSS DISPLAY PROPERTY - TECHCODEVIEW.COM

The vlastnosť zobrazenia určuje správanie zobrazenia prvku (typ vykresľovacieho poľa). Definuje, ako sa prvok vykreslí v rozložení, určuje jeho umiestnenie a interakciu v rámci toku a štruktúry dokumentu.

Syntax:

display: value;>

Hodnoty vlastnosti:

Hodnota Popis

v rade Používa sa na zobrazenie prvku ako vnoreného prvku.

blokovať Používa sa na zobrazenie prvku ako prvku bloku

obsahu Používa sa na zmiznutie nádoby.

flex Používa sa na zobrazenie prvku ako flexibilného kontajnera na úrovni bloku.

mriežka Používa sa na zobrazenie prvku ako kontajnera mriežky na úrovni bloku.

inline-blok Používa sa na zobrazenie prvku ako kontajnera bloku na úrovni riadku.

inline-flex Používa sa na zobrazenie prvku ako flex kontajnera na úrovni riadku.

inline-grid Používa sa na zobrazenie prvku ako kontajnera mriežky na úrovni riadku.

inline-table Používa sa na zobrazenie tabuľky na úrovni riadkov

položka zoznamu Používa sa na zobrazenie všetkých prvkov v
element.

zabehnutý Používa sa na zobrazenie vnorenej alebo blokovej úrovne prvku v závislosti od kontextu.

tabuľky

Používa sa na nastavenie správania ako pre všetky prvky. pre všetky prvky.

popis tabuľky	Používa sa na nastavenie správania ako pre všetky prvky.
tabuľka-stĺpec-skupina	Používa sa na nastavenie správania ako pre všetky prvky.
table-header-group	Používa sa na nastavenie správania ako pre všetky prvky.
table-footer-group	Používa sa na nastavenie správania ako pre všetky prvky.
tabuľka-riadok-skupina	Používa sa na nastavenie správania ako pre všetky prvky.
tabuľka-bunka	Používa sa na nastavenie správania ako	pre všetky prvky.
tabuľka-stĺpec	Používa sa na nastavenie správania ako pre všetky prvky.
riadok stola	Používa sa na nastavenie správania ako
žiadny	Používa sa na odstránenie prvku.
počiatočné	Používa sa na nastavenie predvolenej hodnoty.
dedíš	Používa sa na dedenie majetku od prvkov svojich rodičov.

Príklad: Tento príklad používa 3 divs na demonštráciu vlastnosti zobrazenia CSS.

prepojený zoznam v jazyku Java

HTML

    CSS Display propertytitle><style>#geeks1 { výška: 100px;  šírka: 200px;  pozadie: modrozelená;  displej: blok;  } #geeks2 { výška: 100px;  šírka: 200px;  pozadie: azúrová;  displej: blok;  } #geeks3 { výška: 100px;  šírka: 200px;  pozadie: zelené;  displej: blok;  } .gfg { ľavý okraj: 20px;  veľkosť písma: 42px;  font-weight: bold;  farba: #009900;  } .geeks { font-size: 25px;  ľavý okraj: 30px;  } .main { margin: 50px;  text-align: center;  } štýl> hlava> <body> <div>techcodeview.comdiv><div>displej: blok; propertydiv><div> <div id='geeks1'>Blok 1div><div id='geeks2'>Blok 2div><div id='geeks3'>Block 3div> div> body> html>></pre> </code> <h2><span>Príklady vlastností zobrazenia CSS</span></h2><h3>  <b>  <strong>1. Pomocou Display Block</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Táto vlastnosť sa používa ako predvolená vlastnosť div. Táto vlastnosť umiestňuje div jeden po druhom vertikálne. Výšku a šírku prvku div je možné zmeniť pomocou vlastnosti block, ak šírka nie je uvedená, potom prvok div pod vlastnosťou block zaberie šírku kontajnera.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'>  <b>  <strong>Príklad:</strong>  </b>  <span>Použite daný CSS vo vyššie uvedenom príklade.</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>Výkon:</strong>  </b>  <span> </span></p>  <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt="vlastnosť zobrazovacieho bloku"><h3>  <b>  <strong>2. Používanie Inline Display</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Táto vlastnosť je predvolenou vlastnosťou kotevných značiek. Používa sa na umiestnenie prvku div inline, t. j. horizontálne. Vlastnosť inline display ignoruje výšku a šírku nastavenú používateľom.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'>  <b>  <strong>Príklad:</strong>  </b>  <span>Použite daný CSS vo vyššie uvedenom príklade.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/preorder-traversal">prechod predobjednávky</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>Výkon:</strong>  </b>  <span> </span></p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt="zobraziť výstup príkladu inline vlastnosti"></p> <h3>  <b>  <strong>3. Pomocou Display Inline-block</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Táto funkcia využíva obe vlastnosti uvedené vyššie, blokovú a inline. Táto vlastnosť teda zarovnáva div inline, ale rozdiel je v tom, že môže upravovať výšku a šírku bloku. V zásade to zarovná div v blokovom aj inline spôsobe.</span></p> <p dir='ltr'>  <b>  <strong>Príklad:</strong>  </b>  <span>Použite daný CSS vo vyššie uvedenom príklade.</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>Výkon:</strong>  </b>  <span> </span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/bash-else-if">bash elf</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt="zobraziť výstup príkladu inline bloku"></p> <h3>  <b>  <strong>4. Používanie zobrazenia Žiadne:</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Táto vlastnosť skryje div alebo kontajner, ktorý používa túto vlastnosť. Ak ho použijete na jednom z divov, bude práca jasná.</span></p> <p dir='ltr'>  <b>  <strong>Príklad:</strong>  </b>  <span>Použite daný CSS vo vyššie uvedenom príklade.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-convert-int-string">java konvertuje celé číslo na reťazec</a>
</blockquote> <pre class='hljs'>#geeks2 {  background: cyan;  display: none; }></pre><p dir='ltr'>  <b>  <strong>Výkon:</strong>  </b>  <span>Nezobrazovať žiadnu vlastnosť</span>  <b>  <strong>blok 2</strong>  </b>  </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt="nezobrazovať žiadnu vlastnosť"></p> <p dir='ltr'>  <b>  <strong>Podporované prehliadače:</strong>  </b>  </p> <p dir='ltr'><span>Prehliadače podporované</span>  <b>  <strong>Zobraziť vlastnosť</strong>  </b>  <span>sú uvedené nižšie:</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Hrana</span> <span> </span> </li><li value='3'> <span>Firefox</span> </li><li value='4'> <span>Opera</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="">Kategórie</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/algorithms-greedy-algorithms/">Algoritmy-Greedy Algorithms</a> </li><li> <a href="/python-turtle/">Python-Korytnačka</a> </li><li> <a href="/java-arrays/">Java-Arrays</a> </li><li> <a href="/groovy-tutorial/">Groovy Návod</a> </li><li> <a href="/information-security/">Informačná Bezpečnosť</a> </li><li> <a href="/python-sys/">Python-Sys</a> </li><li> <a href="/apache-ant-tutorial/">Návod Na Apache Ant</a> </li><li> <a href="/golang/">Golang</a> </li><li> <a href="/image-processing/">Spracovanie Obrazu</a> </li><li> <a href="/cricket/">Kriket</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">SQL ľavé vonkajšie spojenie vs ľavé spojenie</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Portál informatiky pre geekov. Obsahuje dobre napísané, dobre premyslené a dobre vysvetlené články o informatike a programovaní, kvízy a otázky z praxe/súťažného programovania/pohovoru o spoločnosti.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/sql-left-outer-join-vs-left-join"> <i class="fa fa-external-link"></i> Čítajte Viac</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Zaujímavé Články</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/sonu-kakkar">Sonu Kakkar</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/operators-r">Operátori v R</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/hiba-bukhari">Hiba Bukhari</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/derivative-arctan">Derivát Arctanu</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/copy-python-deep-copy">kopírovať v Pythone (Deep Copy a Shallow Copy)</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">Populárne Príspevky</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/what-is-stack">zásobník v ds</a>
</li><li><a href="/rekha">indická rekha</a>
</li><li><a href="/java-string-compare">java string cmp</a>
</li><li><a href="/java-arrays">pole v java metódach</a>
</li><li><a href="/java-convert-string-int">java previesť reťazec na int</a>
</li><li><a href="/convert-25-c-into-kelvin-scale">25 c až k</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 Všetky Práva Vyhradené |  <a href="//nl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Odmietnutie Zodpovednosti</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nás</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Zásady Ochrany Osobných Údajov</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

Vlastnosť zobrazenia CSS