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> <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> <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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/data-structures-hash/">Gegevensstructuren-Hash</a> </li><li> <a href="/cpp-operator-overloading/">Cpp-Operator-Overbelasting</a> </li><li> <a href="/adobe/">Adobe</a> </li><li> <a href="/cell-biology/">Cellenbiologie</a> </li><li> <a href="/counter/">Balie</a> </li><li> <a href="/jquery-tutorial/">Jquery-Zelfstudie</a> </li><li> <a href="/json/">Json</a> </li><li> <a href="/project/">Project</a> </li><li> <a href="/queue/">Wachtrij</a> </li><li> <a href="/ruby-basics/">Ruby-Basics</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="//brunetteerdeplete.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Eenvoudige rekenmachine met TCP in Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Programmering aan de clientzijde</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/simple-calculator-using-tcp-in-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="/referential-integrity-constraints-dbms">Referentiële integriteitsbeperkingen in DBMS</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/slope-secant-line-formula">Helling van de Secant Line-formule</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/range-statistics">Bereik in statistieken</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-system-arraycopy-method">Java-systeem arraycopy() Methode</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/insertion-sort-algorithm">Invoegsorteeralgoritme</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="/how-change-image-size-css">css afbeeldingsgrootte wijzigen</a>
</li><li><a href="/constructor-abstract-class-java">kan een abstracte klasse een constructor hebben</a>
</li><li><a href="/working-hashmap-java">interne werking van hashmap</a>
</li><li><a href="/rekha">rekha indiaan</a>
</li><li><a href="/how-check-null-java">java nulcontrole</a>
</li><li><a href="/difference-between-csma-ca">csma en csma-cd</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="//uk.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>
<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>
