logo

CSS displeja rekvizīts

The displeja īpašums norāda elementa displeja darbību (renderēšanas lodziņa veidu). Tas nosaka, kā elements tiek atveidots izkārtojumā, nosakot tā novietojumu un mijiedarbību dokumenta plūsmā un struktūrā.

Sintakse:

display: value;>

Īpašuma vērtības:



VērtībaApraksts
rindāTo izmanto, lai parādītu elementu kā iekļautu elementu.
bloķētTo izmanto, lai parādītu elementu kā bloka elementu
saturuTo izmanto, lai pazustu konteiners.
flexTo izmanto, lai parādītu elementu kā bloka līmeņa elastīgu konteineru.
režģisTo izmanto, lai parādītu elementu kā bloka līmeņa režģa konteineru.
iekļauts bloksTo izmanto, lai parādītu elementu kā iekļauta līmeņa bloka konteineru.
inline-flexTo izmanto, lai parādītu elementu kā iekļauta līmeņa elastīgu konteineru.
iekļauts režģisTo izmanto, lai parādītu elementu kā iekļauta līmeņa režģa konteineru.
iekļauta tabulaTo izmanto, lai parādītu iekļauto līmeņa tabulu
saraksta vienumsTo izmanto, lai parādītu visus elementus
  • elements.
  • ieskrietTo izmanto, lai parādītu elementu iekļautā vai bloka līmenī atkarībā no konteksta.
    tabulaTo izmanto, lai iestatītu uzvedību kā visiem elementiem. visiem elementiem.
    tabula-parakstsTo izmanto, lai iestatītu uzvedību kā visiem elementiem.
    tabula-kolonna-grupaTo izmanto, lai iestatītu uzvedību kā visiem elementiem.
    tabula-galvene-grupaTo izmanto, lai iestatītu uzvedību kā visiem elementiem.
    galds-kājene-grupaTo izmanto, lai iestatītu uzvedību kā visiem elementiem.
    tabula-rinda-grupaTo izmanto, lai iestatītu uzvedību kā visiem elementiem.
    galda šūnaTo izmanto, lai iestatītu uzvedību kāvisiem elementiem.
    tabula-kolonnaTo izmanto, lai iestatītu uzvedību kā visiem elementiem.
    tabula-rindaTo izmanto, lai iestatītu uzvedību kā
    neviensTo izmanto elementa noņemšanai.
    sākotnējāTo izmanto, lai iestatītu noklusējuma vērtību.
    tu mantoTo izmanto, lai mantotu īpašumu no tā vecāku elementiem.

    Piemērs : Šajā piemērā tiek izmantoti 3 div, lai parādītu CSS displeja rekvizītu.

    formatējiet datumu java
    HTML
       CSS displeja īpašuma nosaukums><style>#geeks1 { augstums: 100 pikseļi;  platums: 200 pikseļi;  fons: zilganzaļa;  displejs: bloks;  } #geeks2 { augstums: 100 pikseļi;  platums: 200 pikseļi;  fons: ciāna;  displejs: bloks;  } #geeks3 { augstums: 100 pikseļi;  platums: 200 pikseļi;  fons: zaļš;  displejs: bloks;  } .gfg { margin-left: 20px;  fonta izmērs: 42 pikseļi;  fonta svars: treknrakstā;  krāsa: #009900;  } .geeks { fonta izmērs: 25 pikseļi;  piemale-kreisais: 30 pikseļi;  } .main { margin: 50px;  teksta līdzināšana: centrs;  } style> head> <body> <div>techcodeview.comdiv><div>displejs: bloks; propertydiv><div> <div id='geeks1'>Bloks 1div><div id='geeks2'>Bloks 2div><div id='geeks3'>Bloķēt 3div> div> body> html>></pre> </code> <h2><span>CSS displeja rekvizītu piemēri</span></h2><h3>  <b>  <strong>1. Displeja bloka izmantošana</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Šis rekvizīts tiek izmantots kā div noklusējuma rekvizīts. Šis rekvizīts novieto div vienu pēc otra vertikāli. Div augstumu un platumu var mainīt, izmantojot bloka rekvizītu, ja platums nav minēts, tad div zem bloka rekvizīta aizņems konteinera platumu.</span></p> <p dir='ltr'>  <b>  <strong>Piemērs:</strong>  </b>  <span>Izmantojiet norādīto CSS iepriekš minētajā piemērā.</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>Izvade:</strong>  </b>  <span> </span></p>  <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt="displeja bloka īpašums"><h3>  <b>  <strong>2. Iekļautā displeja izmantošana</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Šis rekvizīts ir enkura tagu noklusējuma rekvizīts. To izmanto, lai ievietotu div inline, t.i., horizontāli. Iekļautā displeja rekvizīts ignorē lietotāja iestatīto augstumu un platumu.</span></p> <p dir='ltr'>  <b>  <strong>Piemērs:</strong>  </b>  <span>Izmantojiet norādīto CSS iepriekš minētajā piemērā.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-comparable-interface">salīdzināms saraksts</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>Izvade:</strong>  </b>  <span> </span></p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt="parādīt iekļauto rekvizītu piemēru izvadi"></p> <h3>  <b>  <strong>3. Display Inline-block izmantošana</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Šis līdzeklis izmanto abus iepriekš minētos rekvizītus — bloku un iekļauto. Tātad šis rekvizīts izlīdzina divrindu, taču atšķirība ir tāda, ka tā var rediģēt bloka augstumu un platumu. Būtībā tas izlīdzinās div gan blokā, gan iekļautā veidā.</span></p> <p dir='ltr'>  <b>  <strong>Piemērs:</strong>  </b>  <span>Izmantojiet norādīto CSS iepriekš minētajā piemērā.</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>Izvade:</strong>  </b>  <span> </span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-sort-string-array-java">java šķirošanas virknes</a>
    </blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt="parādīt inline bloka piemēra izvadi"></p> <h3>  <b>  <strong>4. Izmantojot displeju nav:</strong>  </b>  <span> </span></h3><p dir='ltr'><span>Šis rekvizīts slēpj div vai konteineru, kas izmanto šo rekvizītu. Izmantojot to vienā no div, tas kļūs skaidrs.</span></p> <p dir='ltr'>  <b>  <strong>Piemērs:</strong>  </b>  <span>Izmantojiet norādīto CSS iepriekš minētajā piemērā.</span></p> <pre class='hljs'>#geeks2 {  background: cyan;  display: none; }></pre><p dir='ltr'>  <b>  <strong>Izvade:</strong>  </b>  <span>Nerādīt nevienu īpašumu ieslēgtu</span>  <b>  <strong>2. bloks</strong>  </b>  </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt="nerādīt nevienu īpašumu"></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-replaceall">java virknes nomaiņa</a>
    </blockquote> <p dir='ltr'>  <b>  <strong>Atbalstītās pārlūkprogrammas:</strong>  </b>  </p> <p dir='ltr'><span>Pārlūkprogrammas, ko atbalsta</span>  <b>  <strong>Displeja īpašums</strong>  </b>  <span>ir uzskaitīti zemāk:</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Mala</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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="/dfs/">Dfs</a> </li><li> <a href="/python-regex/">Python-Regex</a> </li><li> <a href="/javafx-tutorial/">Javafx Apmācība</a> </li><li> <a href="/r-functions/">R Funkcijas</a> </li><li> <a href="/java-double/">Java — Dubultā</a> </li><li> <a href="/java-date-class/">Java Datuma Klase</a> </li><li> <a href="/stl/">Stl</a> </li><li> <a href="/java-8-cat/">Java 8</a> </li><li> <a href="/geography-class-8-cat/">Ģeogrāfija-8. Klase</a> </li><li> <a href="/top-10-list-world/">Top 10 Saraksts — Pasaule</a> </li>
                                    
                                </ul>
                            </div><!--//content-->  
                        </div><!--//section-inner-->                 
                    </aside><!--//aside-->
                    
                     <aside class="testimonials aside section">
                    	 <div class="section-inner">
                            <div class="content">
                                <div class="item">
      								<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>                                                   
                                </div>
                            </div>
                        </div>
                       <div class="section-inner">
                            <h2 class="heading">Tīmekļa skrāpēšanas ieviešana Python, izmantojot BeautifulSoup</h2>
                            <div class="content">
                                <div class="item">
                                     <blockquote class="quote">                                  
                                        <span> <i class="fa fa-quote-left"></i> Datorzinātņu portāls dīķiem. Tajā ir labi uzrakstīti, pārdomāti un labi izskaidroti raksti par datorzinātnēm un programmēšanu, viktorīnas un prakses/konkurētspējīgas programmēšanas/uzņēmuma intervijas jautājumi.</span>
                                    </blockquote>                
                                                                                                 
                                </div><!--//item-->
                                
                                <p> <a class="more-link" href="/implementing-web-scraping-python-with-beautifulsoup"> <i class="fa fa-external-link"></i> Lasīt Vairāk</a> </p> 
                                
                            </div><!--//content-->
                        </div><!--//section-inner-->
                    </aside><!--//section-->
                    
                   
                                
                     <aside class="languages aside section">
                        <div class="section-inner">
                            <h2 class="heading">Interesanti Raksti</h2>
                            <div class="content">
                                <ul class="list-unstyled">
                                    <li class="item">
                                        <span class="title"> <strong> <a href="/degrees-radians-calculator">Radiānu grādu kalkulators</a> </strong> </span>
                                        
                                    </li><!--//item--><li class="item">
                                        <span class="title"> <strong> <a href="/git/">Git</a> </strong> </span>
                                        
                                    </li><!--//item--><li class="item">
                                        <span class="title"> <strong> <a href="/how-fix-valueerror-exceptions-python">Kā noteikt Valueerror izņēmumus Python</a> </strong> </span>
                                        
                                    </li><!--//item--><li class="item">
                                        <span class="title"> <strong> <a href="/alter-sql">ALTER (RENAME) SQL</a> </strong> </span>
                                        
                                    </li><!--//item--><li class="item">
                                        <span class="title"> <strong> <a href="/what-is-full-form-er">Kāda ir ER pilna forma</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ārākas Posts</h2>
                            <div class="content">
                                <ul class="list"> <li><a href="/polymorphism-java">java polimorfisms</a>
    </li><li><a href="/difference-between-row">rinda pret kolonnu</a>
    </li><li><a href="/powershell-comments">powershell komentārs vairākās rindās</a>
    </li><li><a href="/stringtokenizer-java">stīgu marķieri java</a>
    </li><li><a href="/java-constant">java konstante</a>
    </li><li><a href="/cassidy-hutchinson">Kesidijas Hačinsones izglītība</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 Visas Tiesības Aizsargātas |  <a href="//hr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atruna</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Par Mums</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privātuma 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>
    	<script>
    !function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
            #toTopBtn {
                position: fixed;
                bottom: 25px;
                right: 25px;
                z-index: 9999;
                opacity: 0;
                visibility: hidden;
                background-color: #213141;
                color: white;
                border: none;
                border-radius: 8px;
                width: 50px;
                height: 50px;
                font-size: 24px;
                cursor: pointer;
                transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
            }
            #toTopBtn:hover {
                background-color: #555;
            }
        `,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
    </script>
    </body>
    </html>