CSS RODYMO NUOSAVYBĖ – TECHCODEVIEW.COM

The rodyti nuosavybę nurodo elemento rodymo elgseną (atvaizdavimo laukelio tipą). Jis apibrėžia, kaip elementas pateikiamas makete, nustatant jo padėtį ir sąveiką dokumento sraute ir struktūroje.

Sintaksė:

display: value;>

Turto vertės:

Vertė apibūdinimas

eilutę Jis naudojamas elementui rodyti kaip eilutiniam elementui.

blokas Jis naudojamas elementui rodyti kaip bloko elementui

turinį Jis naudojamas konteineriui dingti.

lankstus Jis naudojamas elementui rodyti kaip bloko lygio lankstus konteineris.

tinklelis Jis naudojamas elementui rodyti kaip bloko lygio tinklelio talpyklai.

eilutinis blokas Jis naudojamas elementui rodyti kaip eilutinio lygio bloko konteineris.

inline-flex Jis naudojamas elementui rodyti kaip eilutinio lygio lankstus konteineris.

eilutinis tinklelis Jis naudojamas elementui rodyti kaip eilutinio lygio tinklelio konteineris.

eilutinė lentelė Jis naudojamas eilutei rodyti lentelę

sąrašo elementas Jis naudojamas visiems elementams rodyti
elementas.

įbėgimas Jis naudojamas elemento eilutėje arba bloko lygiui rodyti, atsižvelgiant į kontekstą.

stalo

Jis naudojamas visų elementų elgesiui nustatyti. visiems elementams.

lentelė-antraštė	Jis naudojamas visų elementų elgesiui nustatyti.
lentelė-stulpelis-grupė	Jis naudojamas visų elementų elgesiui nustatyti.
lentelė-antraštė-grupė	Jis naudojamas visų elementų elgesiui nustatyti.
stalas-poraštė-grupė	Jis naudojamas visų elementų elgesiui nustatyti.
lentelė-eilutė-grupė	Jis naudojamas visų elementų elgesiui nustatyti.
stalo langelis	Jis naudojamas elgesiui nustatyti kaip	visiems elementams.
lentelė-stulpelis	Jis naudojamas visų elementų elgesiui nustatyti.
lentelė-eilė	Jis naudojamas elgesiui nustatyti kaip
nė vienas	Jis naudojamas elementui pašalinti.
pradinė	Jis naudojamas numatytajai vertei nustatyti.
tu paveldi	Jis naudojamas paveldėti turtą iš savo tėvų elementų.

Pavyzdys : Šiame pavyzdyje CSS rodymo ypatybei parodyti naudojami 3 div.

yra python

HTML

    CSS rodymo nuosavybės pavadinimas><style>#geeks1 { aukštis: 100 taškų;  plotis: 200 pikselių;  fonas: žalsvai mėlynas;  ekranas: blokas;  } #geeks2 { aukštis: 100 taškų;  plotis: 200 pikselių;  fonas: žalsvai mėlyna;  ekranas: blokas;  } #geeks3 { aukštis: 100 taškų;  plotis: 200 pikselių;  fonas: žalias;  ekranas: blokas;  } .gfg { margin-left: 20px;  šrifto dydis: 42 pikseliai;  šrifto svoris: paryškintas;  spalva: #009900;  } .geeks { šrifto dydis: 25 pikseliai;  paraštė kairėje: 30 tšk.;  } .main { paraštė: 50 taškų;  teksto lygiavimas: centre;  } style> head> <body> <div>techcodeview.comdiv><div>ekranas: blokas; propertydiv><div> <div id='geeks1'>Blokas 1div><div id='geeks2'>Blokas 2div><div id='geeks3'>Blokuoti 3div> div> body> html>>></tag> <h2><span>CSS rodymo nuosavybės pavyzdžiai</span></h2><h3>  <b>  <strong>1. Ekrano bloko naudojimas</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Ši savybė naudojama kaip numatytoji div nuosavybė. Ši savybė įdeda „div“ vieną po kito vertikaliai. Div aukštį ir plotį galima pakeisti naudojant bloko ypatybę, jei plotis neminimas, tada po bloko ypatybe esantis div užims konteinerio plotį.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'>  <b>  <strong>Pavyzdys:</strong>  </b>  <span>Naudokite pateiktą CSS aukščiau esančiame pavyzdyje.</span></p> <pre class='hljs'>#geeks1 {  background: teal;  display: block; } #geeks2 {  background: cyan;  display: block; } #geeks3 {  background: green;  display: block; }></pre> </code><p dir='ltr'>  <b>  <strong>Išvestis:</strong>  </b>  <span> </span></p>  <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt="rodymo bloko nuosavybė"><h3>  <b>  <strong>2. Inline Display naudojimas</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Ši savybė yra numatytoji prierašo žymų savybė. Tai naudojama „div“ įterpti į eilutę, ty horizontaliai. Inline rodymo ypatybė nepaiso vartotojo nustatyto aukščio ir pločio.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'>  <b>  <strong>Pavyzdys:</strong>  </b>  <span>Naudokite pateiktą CSS aukščiau esančiame pavyzdyje.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/preorder-traversal">išankstinio užsakymo pervežimas</a>
</blockquote> <tag data-text-3='#geeks1 {  background: teal;  display: inline; } #geeks2 {  background: cyan;  display: inline; } #geeks3 {  background: green;  display: inline; }></pre><p dir='ltr'>  <b>  <strong>Išvestis:</strong>  </b>  <span> </span></p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt="rodyti eilutę nuosavybės pavyzdžio išvestį"></p> <h3>  <b>  <strong>3. Naudojant Display Inline-block</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Šios funkcijos naudoja abi aukščiau paminėtas ypatybes – blokinę ir eilutę. Taigi, ši savybė sulygiuoja div eilutę, tačiau skirtumas yra tas, kad ji gali redaguoti bloko aukštį ir plotį. Iš esmės tai sulygiuos „div“ tiek blokiniu, tiek tiesioginiu būdu.</span></p> <p dir='ltr'>  <b>  <strong>Pavyzdys:</strong>  </b>  <span>Naudokite pateiktą CSS aukščiau esančiame pavyzdyje.</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>Išvestis:</strong>  </b>  <span> </span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/fiscal-quarters-q1-q2">kokie mėnesiai yra Q3</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt="rodyti eilutės bloko pavyzdžio išvestį"></p> <h3>  <b>  <strong>4. Ekrano jokio naudojimas:</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Ši nuosavybė paslepia div arba konteinerį, kuris naudoja šią ypatybę. Naudodami jį viename iš div, tai padarys darbą aiškesnį.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/multiplexer">multiplekseris</a>
</blockquote> <p dir='ltr'>  <b>  <strong>Pavyzdys:</strong>  </b>  <span>Naudokite pateiktą CSS aukščiau esančiame pavyzdyje.</span></p> <pre class='hljs'>#geeks2 {  background: cyan;  display: none; }></pre><p dir='ltr'>  <b>  <strong>Išvestis:</strong>  </b>  <span>Nerodyti jokios nuosavybės</span>  <b>  <strong>2 blokas</strong>  </b>  </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt="nerodyti jokios nuosavybės"></p> <p dir='ltr'>  <b>  <strong>Palaikomos naršyklės:</strong>  </b>  </p> <p dir='ltr'><span>Naršyklės, kurias palaiko</span>  <b>  <strong>Rodyti nuosavybę</strong>  </b>  <span>yra išvardyti žemiau:</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Kraštas</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="">Kategorija</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/c-input-output-quiz/">C Įvesties Ir Išvesties Viktorina</a> </li><li> <a href="/hash/">Maišos</a> </li><li> <a href="/china-gk/">Kinija Gk</a> </li><li> <a href="/c-storage-classes-type-qualifiers/">C-Storage Klasės Ir Tipo Kvalifikatoriai</a> </li><li> <a href="/pytorch-tutorial/">Pytorch Pamoka</a> </li><li> <a href="/python-library/">Python Biblioteka</a> </li><li> <a href="/cpp-pointer/">Cpp Rodyklė</a> </li><li> <a href="/linux-tutorial/">Linux Pamoka</a> </li><li> <a href="/ai-ml-ds-with-r/">Ai-Ml-Ds Su R</a> </li><li> <a href="/computer-network/">Kompiuterinis Tinklas</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                   <div class="section-inner">
                        <h2 class="heading">std::string::palyginti () C++</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Kompiuterių mokslo portalas, skirtas geikams. Jame yra gerai parašyti, gerai apgalvoti ir gerai paaiškinti informatikos ir programavimo straipsniai, viktorinos ir praktikos / konkurencinio programavimo / įmonės interviu klausimai.</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/std-string-compare-c"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">Įdomios Straipsniai</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/how-write-html">Kaip rašyti HTML?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/ms-excel-tutorial/">Ms Excel Pamoka</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/enumerate-python">Enumerate () Python</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/avneet-kaur">Avneet Kaur</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/to-generate-a-one-time-password-or-unique-identification-url">Norėdami generuoti vienkartinį slaptažodį arba unikalų identifikavimo URL</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">Populiarios Temos</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/java-applet">programėlė</a>
</li><li><a href="/what-is-trie-data-structure">Išbandykite duomenų struktūrą</a>
</li><li><a href="/unordered_map-c">unordered_map c++</a>
</li><li><a href="/difference-between-list">sąrašas ir nustatytas java</a>
</li><li><a href="/java-convert-string-int">eilutę į sveikąjį skaičių Java</a>
</li><li><a href="/how-access-android-settings-menu">Android telefono nustatymų meniu</a>
</li><li><a href="/difference-between-table">vaizdai ir stalai</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 Visos Teisės Saugomos |  <a href="//tr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo Politika</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>