De eigenschap weergeven specificeert het weergavegedrag van een element (het type weergavevak). Het definieert hoe een element in de lay-out wordt weergegeven en bepaalt de positionering en interactie binnen de stroom en structuur van het document.
Syntaxis:
display: value;>
Eigendomswaarden:
| Waarde | Beschrijving |
|---|
| in lijn | Het wordt gebruikt om een element als inline-element weer te geven. |
|---|
| blok | Het wordt gebruikt om een element als blokelement weer te geven |
|---|
| inhoud | Het wordt gebruikt om de container te laten verdwijnen. |
|---|
| buigen | Het wordt gebruikt om een element weer te geven als een flexcontainer op blokniveau. |
|---|
| rooster | Het wordt gebruikt om een element weer te geven als een rastercontainer op blokniveau. |
|---|
| inline-blok | Het wordt gebruikt om een element weer te geven als een blokcontainer op inline-niveau. |
|---|
| inline-flex | Het wordt gebruikt om een element weer te geven als een inline-flexcontainer. |
|---|
| inline-raster | Het wordt gebruikt om een element weer te geven als een inline-rastercontainer. |
|---|
| inline-tafel | Het wordt gebruikt om een tabel op inline-niveau weer te geven |
|---|
| lijst-item | Het wordt gebruikt om alle elementen in weer te gevenelement. |
|---|
| inlopen | Het wordt gebruikt om een element inline- of blokniveau weer te geven, afhankelijk van de context. |
|---|
| tafel | Het wordt gebruikt om het gedrag in te stellen zoals voor alle elementen. voor alle elementen.| tabel titel | Het wordt gebruikt om het gedrag in te stellen zoals voor alle elementen. |
|---|
| tabel-kolom-groep | Het wordt gebruikt om het gedrag in te stellen zoals voor alle elementen. |
|---|
| tabelkopgroep | Het wordt gebruikt om het gedrag in te stellen zoals voor alle elementen. |
|---|
| tabel-voettekst-groep | Het wordt gebruikt om het gedrag in te stellen zoals voor alle elementen. |
|---|
| tabel-rij-groep | Het wordt gebruikt om het gedrag in te stellen zoals voor alle elementen. |
|---|
| tafel-cel | Het wordt gebruikt om het gedrag in te stellen als | voor alle elementen. |
|---|
| tabel-kolom | Het wordt gebruikt om het gedrag in te stellen zoals voor alle elementen. |
|---|
| tafel rij | Het wordt gebruikt om het gedrag in te stellen als |
|---|
|
| geen | Het wordt gebruikt om het element te verwijderen. |
|---|
| voorletter | Het wordt gebruikt om de standaardwaarde in te stellen. |
|---|
| je erft | Het wordt gebruikt om eigendommen van de elementen van de ouders te erven. |
|---|
Voorbeeld : In dit voorbeeld worden drie div's gebruikt om de CSS-weergave-eigenschap te demonstreren. kaarten Java
HTML CSS Weergave eigenschaptitel><style>#geeks1 {hoogte: 100px; breedte: 200px; achtergrond: groenblauw; weergave: blok; } #geeks2 { hoogte: 100px; breedte: 200px; achtergrond: cyaan; weergave: blok; } #geeks3 { hoogte: 100px; breedte: 200px; achtergrond: groen; weergave: blok; } .gfg { marge-links: 20px; lettergrootte: 42px; lettertypegewicht: vet; kleur: #009900; } .geeks {lettergrootte: 25px; marge-links: 30px; } .main { marge: 50px; tekst uitlijnen: centreren; } stijl> hoofd> <body> <div>techcodeview.comdiv><div>weergave: blok; eigendomdiv><div> <div id='geeks1'>Blok 1div><div id='geeks2'>Blok 2div><div id='geeks3'>Blok 3div> div> body> html>></pre> </code> <h2><span>CSS Weergave-eigenschap Voorbeelden</span></h2><h3> <b> <strong>1. Weergaveblok gebruiken</strong> </b> <span> </span></h3><p dir='ltr'><span>Deze eigenschap wordt gebruikt als de standaardeigenschap van div. Deze eigenschap plaatst de div verticaal achter elkaar. De hoogte en breedte van de div kunnen worden gewijzigd met behulp van de block-eigenschap. Als de breedte niet wordt vermeld, neemt de div onder de block-eigenschap de breedte van de container in beslag.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>Gebruik de gegeven CSS in het bovenstaande voorbeeld.</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>Uitgang:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt="blokeigenschap weergeven"><h3> <b> <strong>2. Inline-display gebruiken</strong> </b> <span> </span></h3><p dir='ltr'><span>Deze eigenschap is de standaardeigenschap van ankertags. Deze wordt gebruikt om de div inline, dat wil zeggen horizontaal, te plaatsen. De eigenschap voor inline weergave negeert de door de gebruiker ingestelde hoogte en breedte.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>Gebruik de gegeven CSS in het bovenstaande voorbeeld.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-comparable-interface">vergelijkbare lijst</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>Uitgang:</strong> </b> <span> </span></p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt="voorbeelduitvoer van inline-eigenschappen weergeven"></p> <h3> <b> <strong>3. Gebruik Display Inline-blok</strong> </b> <span> </span></h3><p dir='ltr'><span>Deze functie maakt gebruik van de beide hierboven genoemde eigenschappen, blok en inline. Deze eigenschap lijnt de div dus inline uit, maar het verschil is dat de hoogte en breedte van het blok kunnen worden bewerkt. Kortom, dit zal de div zowel blok- als inline uitlijnen.</span></p> <p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>Gebruik de gegeven CSS in het bovenstaande voorbeeld.</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>Uitgang:</strong> </b> <span> </span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/software-development-life-cycle">sdl</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt="toon voorbeelduitvoer van inlineblokken"></p> <h3> <b> <strong>4. Weergave Geen gebruiken:</strong> </b> <span> </span></h3><p dir='ltr'><span>Deze eigenschap verbergt de div of de container die deze eigenschap gebruikt. Als u het op een van de div gebruikt, wordt de werking duidelijk.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-string-date">tekenreeks naar datum converteren</a>
</blockquote> <p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>Gebruik de gegeven CSS in het bovenstaande voorbeeld.</span></p> <pre class='hljs'>#geeks2 { background: cyan; display: none; }></pre><p dir='ltr'> <b> <strong>Uitgang:</strong> </b> <span>Geen eigenschap weergeven aan</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="geen eigenschap weergeven"></p> <p dir='ltr'> <b> <strong>Ondersteunde browsers:</strong> </b> </p> <p dir='ltr'><span>De browsers die worden ondersteund door de</span> <b> <strong>Eigenschap weergeven</strong> </b> <span>staan hieronder vermeld:</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Rand</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/hash/">Hash</a> </li><li> <a href="/cpp-iterator/">Cpp-Iterator</a> </li><li> <a href="/java-timestamp-class/">Java-Tijdstempelklasse</a> </li><li> <a href="/microservices-tutorial/">Microservices-Zelfstudie</a> </li><li> <a href="/bit-magic/">Beetje magie</a> </li><li> <a href="/java-calendar-class/">Java-Kalenderklasse</a> </li><li> <a href="/java-double/">Java-Dubbel</a> </li><li> <a href="/ms-word-tutorial/">Ms Word-Zelfstudie</a> </li><li> <a href="/acids-bases-salts/">Zuren, Basen En Zouten</a> </li><li> <a href="/python-numpy-matrix-function/">Python Numpy-Matrix-Functie</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Hoe een array in Java retourneren?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Een informaticaportaal voor nerds. Het bevat goed geschreven, goed doordachte en goed uitgelegde artikelen over computerwetenschappen en programmeren, quizzen en vragen over oefenen/competitief programmeren/bedrijfsinterviews.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-return-an-array-java"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/pair-c">PAAR IN C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/css-questions/">Css-Vragen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/bit-magic/">Beetje magie</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/heart-algebra-key-strategies-1311146">Hart van de algebra: sleutelstrategieën voor SAT-wiskunde</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/every-ap-literature-practice-test-available-1311298">Elke AP-literatuuroefentest beschikbaar: gratis en officieel</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">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/php-variables">verschil tussen $ en $$</a>
</li><li><a href="/how-fixandroid-process-acorehas-stopped-errors-android">Android-proces acore blijft stoppen</a>
</li><li><a href="/anonymous-function-java">Java-anonieme functie</a>
</li><li><a href="/java-hashtable-class">hashbare java</a>
</li><li><a href="/javascript-queryselector">document.queryselector</a>
</li><li><a href="/java-convert-int-string">cast in naar string 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 Alle Rechten Voorbehouden | <a href="//hu.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</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>
|
|---|
