The näyttöominaisuus määrittää elementin näyttökäyttäytymisen (renderöintilaatikon tyypin). Se määrittää, kuinka elementti renderöidään asettelussa ja määrittää sen sijainnin ja vuorovaikutuksen dokumentin kulussa ja rakenteessa.
Syntaksi:
display: value;>
Kiinteistöjen arvot:
| Arvo | Kuvaus |
|---|
| linjassa | Sitä käytetään elementin näyttämiseen rivielementtinä. |
|---|
| lohko | Sitä käytetään elementin näyttämiseen lohkoelementtinä |
|---|
| sisällys | Sitä käytetään säiliön katoamiseen. |
|---|
| flex | Sitä käytetään elementin näyttämiseen lohkotason joustavana säiliönä. |
|---|
| ruudukko | Sitä käytetään elementin näyttämiseen lohkotason ruudukkosäiliönä. |
|---|
| inline-lohko | Sitä käytetään elementin näyttämiseen rivitason lohkosäiliönä. |
|---|
| inline-flex | Sitä käytetään elementin näyttämiseen rivitason joustavana säiliönä. |
|---|
| inline-ruudukko | Sitä käytetään elementin näyttämiseen rivitason ruudukkosäiliönä. |
|---|
| inline-taulukko | Sitä käytetään rivitason taulukon näyttämiseen |
|---|
| luettelo-kohde | Sitä käytetään kaikkien elementtien näyttämiseenelementti. |
|---|
| sisäänajo | Sitä käytetään elementin näyttämiseen rivin tai lohkon tasolla kontekstista riippuen. |
|---|
| pöytä | Sitä käytetään asettamaan käyttäytyminen kuten kaikille elementeille. kaikille elementeille.| taulukon kuvateksti | Sitä käytetään asettamaan käyttäytyminen kuten kaikille elementeille. |
|---|
| taulukko-sarake-ryhmä | Sitä käytetään asettamaan käyttäytyminen kuten kaikille elementeille. |
|---|
| taulukko-otsikko-ryhmä | Sitä käytetään asettamaan käyttäytyminen kuten kaikille elementeille. |
|---|
| pöytä-alatunniste-ryhmä | Sitä käytetään asettamaan käyttäytyminen kuten kaikille elementeille. |
|---|
| taulukko-rivi-ryhmä | Sitä käytetään asettamaan käyttäytyminen kuten kaikille elementeille. |
|---|
| pöytäsolu | Sitä käytetään asettamaan käyttäytyminen muodossa | kaikille elementeille. |
|---|
| taulukko-pylväs | Sitä käytetään asettamaan käyttäytyminen kuten kaikille elementeille. |
|---|
| pöytä-rivi | Sitä käytetään asettamaan käyttäytyminen muodossa |
|---|
|
| ei mitään | Sitä käytetään elementin poistamiseen. |
|---|
| alkukirjain | Sitä käytetään oletusarvon asettamiseen. |
|---|
| inherit | Sitä käytetään omaisuuden perimiseen vanhempiensa elementeiltä. |
|---|
Esimerkki: Tässä esimerkissä käytetään kolmea div-merkkiä CSS-näyttöominaisuuden osoittamiseen. rekursio java
HTML CSS Display propertytitle><style>#geeks1 { korkeus: 100 kuvapistettä; leveys: 200px; tausta: sinivihreä; näyttö: lohko; } #geeks2 { korkeus: 100 kuvapistettä; leveys: 200px; tausta: syaani; näyttö: lohko; } #geeks3 { korkeus: 100 pikseliä; leveys: 200px; tausta: vihreä; näyttö: lohko; } .gfg { margin-left: 20px; fonttikoko: 42px; fontin paino: lihavoitu; väri: #009900; } .geeks { font-size: 25px; marginaali vasen: 30px; } .main { margin: 50px; tekstin tasaus: keskellä; } style> head> <body> <div>techcodeview.comdiv><div>näyttö: lohko; propertydiv><div> <div id='geeks1'>Lohko 1div><div id='geeks2'>Lohko 2div><div id='geeks3'>Estä 3div> div> body> html>>></tag> <h2><span>CSS-näyttöominaisuuksien esimerkkejä</span></h2><h3> <b> <strong>1. Näyttölohkon käyttö</strong> </b> <span> </span></h3><p dir='ltr'><span>Tätä ominaisuutta käytetään div:n oletusominaisuudena. Tämä ominaisuus asettaa div peräkkäin pystysuoraan. Div:n korkeutta ja leveyttä voidaan muuttaa block-ominaisuuden avulla, jos leveyttä ei mainita, niin block ominaisuuden alla oleva div vie kontin leveyden.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'> <b> <strong>Esimerkki:</strong> </b> <span>Käytä annettua CSS:ää yllä olevassa esimerkissä.</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>Lähtö:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt="näyttölohkon ominaisuus"><h3> <b> <strong>2. Inline-näytön käyttäminen</strong> </b> <span> </span></h3><p dir='ltr'><span>Tämä ominaisuus on ankkuritunnisteiden oletusominaisuus. Tätä käytetään sijoittamaan div inline eli vaakasuoraan. Inline display -ominaisuus jättää huomioimatta käyttäjän asettaman korkeuden ja leveyden.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'> <b> <strong>Esimerkki:</strong> </b> <span>Käytä annettua CSS:ää yllä olevassa esimerkissä.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/pandas-dataframe-merge">pd yhdistä</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>Lähtö:</strong> </b> <span> </span></p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt="näytä upotettu ominaisuusesimerkkitulos"></p> <h3> <b> <strong>3. Display Inline-blockin käyttäminen</strong> </b> <span> </span></h3><p dir='ltr'><span>Tämä ominaisuus käyttää molempia yllä mainittuja ominaisuuksia, lohko- ja sisäisiä ominaisuuksia. Joten tämä ominaisuus kohdistaa divin rivin sisään, mutta erona on, että se voi muokata lohkon korkeutta ja leveyttä. Pohjimmiltaan tämä kohdistaa div:n sekä lohko- että rivimuotoisesti.</span></p> <p dir='ltr'> <b> <strong>Esimerkki:</strong> </b> <span>Käytä annettua CSS:ää yllä olevassa esimerkissä.</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>Lähtö:</strong> </b> <span> </span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-escape-characters">java escape -merkkejä</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt="näytä rivin sisäinen lohkoesimerkkitulos"></p> <h3> <b> <strong>4. Display None -toiminnon käyttäminen:</strong> </b> <span> </span></h3><p dir='ltr'><span>Tämä ominaisuus piilottaa div- tai säilön, jotka käyttävät tätä ominaisuutta. Käyttämällä sitä jossakin divissä, se tekee toiminnan selväksi.</span></p> <p dir='ltr'> <b> <strong>Esimerkki:</strong> </b> <span>Käytä annettua CSS:ää yllä olevassa esimerkissä.</span></p> <pre class='hljs'>#geeks2 { background: cyan; display: none; }></pre><p dir='ltr'> <b> <strong>Lähtö:</strong> </b> <span>Näytä mitään omaisuutta päällä</span> <b> <strong>lohko 2</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt="näytä mitään ominaisuutta"></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-get-iphone-emojis-android">kuinka saada iphone emojit Androidille</a>
</blockquote> <p dir='ltr'> <b> <strong>Tuetut selaimet:</strong> </b> </p> <p dir='ltr'><span>Selaimet, joita tukee</span> <b> <strong>Näytä ominaisuus</strong> </b> <span>on lueteltu alla:</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Reuna</span> <span> </span> </li><li value='3'> <span>Firefox</span> </li><li value='4'> <span>Ooppera</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="">Luokka</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/java-interfaces/">Java-Rajapinnat</a> </li><li> <a href="/csharp-basics/">Csharp-Basics</a> </li><li> <a href="/web-technologies-difference-between/">Verkkoteknologiat – Ero</a> </li><li> <a href="/avl-tree/">Avl-Puu</a> </li><li> <a href="/array-range-queries/">Array-Range-Kyselyt</a> </li><li> <a href="/excel-basics/">Excelin Perusteet</a> </li><li> <a href="/physics-class-8-cat/">Fysiikka-Luokka-8</a> </li><li> <a href="/gblog/">Glogi</a> </li><li> <a href="/c-misc/">C-Sekalaiset</a> </li><li> <a href="/permutation/">Permutaatio</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Kim Kardashian ja Kanye Westin 4 lasta (kaikki mitä sinun tarvitsee tietää)</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kim Kardashian ja Kanye West Kids: North West, Saint West, Chicago West ja Psalm West. Kim Kardashian ja Kanye West, joista usein puhutaan Kimyenä, saivat ensimmäisen lapsensa 15. kesäkuuta 2013. Kimin raskaus oli vaikea, ja he puhuivat siitä tv-ohjelmassaan ja verkossa. Vaikka he ovat hyvin kuuluisia, he odottivat kaksi kuukautta ennen kuin jakoivat hänen kuvansa Internetiin. Aluksi he eivät halunneet häntä TV-ohjelmaan KUWTK (Keeping Up with the Kardashians), mutta hän päätyi siihen paljon. Hänellä oli jopa omat erityiset hetkensä, kuten räppiessään Pariisissa.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/kim-kardashian-kanye-west-s-4-kids"> <i class="fa fa-external-link"></i> Lue Lisää</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Mielenkiintoisia Artikkeleita</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/difference-between-sulfur">Ero rikin, sulfaatin ja sulfiitin välillä</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/different-ways-create-pandas-dataframe">Eri tapoja luoda Pandas Dataframe</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/lodash-_-debounce-method">Lodash _.debounce() -menetelmä</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/advantages-disadvantages-online-shopping">Verkkokaupan edut ja haitat</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/javascript-check-if-key-exists-inside-json-object">JavaScript Tarkista, onko JSON-objektin sisällä avain</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">Suosittu Viestiä</h2>
<div class="content">
<ul class="list"> <li><a href="/string-concatenation-java">ketjutus java-merkkijono</a>
</li><li><a href="/string-concatenation-java">java concat merkkijono</a>
</li><li><a href="/what-is-full-form-dhl">dhl merkitys</a>
</li><li><a href="/what-is-floppy-disk">levyke</a>
</li><li><a href="/how-many-keys-are-computer-keyboard">kuinka monta näppäintä näppäimistössä on</a>
</li><li><a href="/first-order-logic-artificial-intelligence">ensimmäisen asteen logiikka</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 Kaikki Oikeudet Pidätetään | <a href="//uk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vastuuvapauslauseke</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Meistä</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Tietosuojakäytäntö</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>
|
|---|
