De visa egenskap anger ett elements visningsbeteende (typen av renderingsruta). Den definierar hur ett element renderas i layouten, bestämmer dess placering och interaktion inom dokumentets flöde och struktur.
Syntax:
display: value;>
Fastighetsvärden:
| Värde | Beskrivning |
|---|
| i kö | Den används för att visa ett element som ett inline-element. |
|---|
| blockera | Det används för att visa ett element som ett blockelement |
|---|
| innehåll | Den används för att försvinna behållaren. |
|---|
| böja | Den används för att visa ett element som en flexbehållare på blocknivå. |
|---|
| rutnät | Den används för att visa ett element som en rutnätsbehållare på blocknivå. |
|---|
| inline-block | Den används för att visa ett element som en inline-nivå blockbehållare. |
|---|
| inline-flex | Den används för att visa ett element som en inline-nivå flexbehållare. |
|---|
| inline-rutnät | Den används för att visa ett element som en inline-nivå rutnätsbehållare. |
|---|
| inline-tabell | Den används för att visa en inline-nivåtabell |
|---|
| listobjekt | Den används för att visa alla element ielement. |
|---|
| springa in | Den används för att visa ett element inline- eller blocknivå, beroende på sammanhanget. |
|---|
| tabell | Den används för att ställa in beteendet som för alla element. för alla element.| tabell-bildtext | Den används för att ställa in beteendet som för alla element. |
|---|
| tabell-kolumn-grupp | Den används för att ställa in beteendet som för alla element. |
|---|
| tabell-huvudgrupp | Den används för att ställa in beteendet som för alla element. |
|---|
| tabell-sidfotsgrupp | Den används för att ställa in beteendet som för alla element. |
|---|
| tabell-rad-grupp | Den används för att ställa in beteendet som för alla element. |
|---|
| tabell-cell | Den används för att ställa in beteendet som | för alla element. |
|---|
| tabell-kolumn | Den används för att ställa in beteendet som för alla element. |
|---|
| bordsrad | Den används för att ställa in beteendet som |
|---|
|
| ingen | Den används för att ta bort elementet. |
|---|
| första | Den används för att ställa in standardvärdet. |
|---|
| du ärver | Den används för att ärva egendom från sina föräldrars element. |
|---|
Exempel: Det här exemplet använder 3 divs för att demonstrera CSS-visningsegenskapen. java bubbla sortera
HTML CSS Visa egenskapstitel><style>#geeks1 { höjd: 100px; bredd: 200px; bakgrund: kricka; display: block; } #geeks2 { höjd: 100px; bredd: 200px; bakgrund: cyan; display: block; } #geeks3 { höjd: 100px; bredd: 200px; bakgrund: grön; display: block; } .gfg { margin-left: 20px; teckenstorlek: 42px; font-weight: fet; färg: #009900; } .geeks { font-size: 25px; marginal-vänster: 30px; } .main { margin: 50px; text-align: center; } stil> huvud> <body> <div>techcodeview.comdiv><div>display: block; fastighetsdiv><div> <div id='geeks1'>Block 1div><div id='geeks2'>Block 2div><div id='geeks3'>Blockera 3div> div> body> html>></pre> </code> <h2><span>Exempel på CSS-visningsegenskap</span></h2><h3> <b> <strong>1. Använda Display Block</strong> </b> <span> </span></h3><p dir='ltr'><span>Denna egenskap används som standardegenskap för div. Den här egenskapen placerar div efter varandra vertikalt. Höjden och bredden på div kan ändras med blockegenskapen om bredden inte nämns, då kommer div under blockegenskapen att ta upp behållarens bredd.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'> <b> <strong>Exempel:</strong> </b> <span>Använd den givna CSS i exemplet ovan.</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>Produktion:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt="visa blockegenskap"><h3> <b> <strong>2. Använda Inline Display</strong> </b> <span> </span></h3><p dir='ltr'><span>Den här egenskapen är standardegenskapen för ankartaggar. Detta används för att placera div inline, dvs horisontellt. Egenskapen för inline display ignorerar höjden och bredden som ställts in av användaren.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'> <b> <strong>Exempel:</strong> </b> <span>Använd den givna CSS i exemplet ovan.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/infinite-loop-c">oändlig loop</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>Produktion:</strong> </b> <span> </span></p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt="visa inline egenskap exempel utdata"></p> <h3> <b> <strong>3. Använda Display Inline-block</strong> </b> <span> </span></h3><p dir='ltr'><span>Denna funktion använder de båda egenskaperna som nämns ovan, block och inline. Så den här egenskapen justerar div inline men skillnaden är att den kan redigera blockets höjd och bredd. I grund och botten kommer detta att justera div både i block och inline-sätt.</span></p> <p dir='ltr'> <b> <strong>Exempel:</strong> </b> <span>Använd den givna CSS i exemplet ovan.</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>Produktion:</strong> </b> <span> </span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/finite-state-machine">ändlig tillståndsmaskin</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt="visa inline blockexempel utgång"></p> <h3> <b> <strong>4. Använda Display None:</strong> </b> <span> </span></h3><p dir='ltr'><span>Den här egenskapen döljer den div eller behållaren som använder den här egenskapen. Om du använder den på en av div:erna blir det tydligt att det fungerar.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-convert-int-string">konvertera heltal till sträng java</a>
</blockquote> <p dir='ltr'> <b> <strong>Exempel:</strong> </b> <span>Använd den givna CSS i exemplet ovan.</span></p> <pre class='hljs'>#geeks2 { background: cyan; display: none; }></pre><p dir='ltr'> <b> <strong>Produktion:</strong> </b> <span>Visa ingen egenskap på</span> <b> <strong>block 2</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt="visa ingen egenskap"></p> <p dir='ltr'> <b> <strong>Webbläsare som stöds:</strong> </b> </p> <p dir='ltr'><span>Webbläsarna som stöds av</span> <b> <strong>Visa egendom</strong> </b> <span>listas nedan:</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Kant</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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-basics/">Python-Grunderna</a> </li><li> <a href="/us-gk/">Us Gk</a> </li><li> <a href="/dfs/">Dfs</a> </li><li> <a href="/informatica-tutorial/">Handledning För Informatik</a> </li><li> <a href="/bootstrap-tutorial/">Handledning För Bootstrap</a> </li><li> <a href="/accenture/">Accenture</a> </li><li> <a href="/binary-search/">Binär Sökning</a> </li><li> <a href="/java-timer-class/">Java Timer Klass</a> </li><li> <a href="/network-layer/">Nätverkslager</a> </li><li> <a href="/law-us/">Lag Usa</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Verilog grå räknare</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Verilog Grey Counter med vad är Verilog, Lexical Tokens, ASIC Design Flow, Chip Abstraktionslager, Verilog Data Types, Verilog Module, RTL Verilog, Arrays, Port etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/verilog-gray-counter"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/javascript-ternary-operator">JavaScript ternär operatör</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/14-summer-engineering-internships-131364">14 sommaringenjörspraktik för gymnasieelever</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/basic-math-formulas">Grundläggande matematiska formler</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-virtual-environment-introduction">Python virtuell miljö | Introduktion</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/text-column-excel">Text till kolumn i Excel</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ära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/numpy-zeros-python">nollor</a>
</li><li><a href="/linux-export-command">vad är export i linux</a>
</li><li><a href="/an-array-strings-c">rad strängar i c</a>
</li><li><a href="/how-many-zeros-1-million">10 miljoner</a>
</li><li><a href="/features-java">funktioner i java</a>
</li><li><a href="/an-array-strings-c">sträng i array i c</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 Alla Rättigheter Förbehållna | <a href="//lt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>
|
|---|
