The proprietate de afișare specifică comportamentul de afișare al unui element (tipul casetei de randare). Acesta definește modul în care este redat un element în aspect, determinând poziționarea și interacțiunea acestuia în fluxul și structura documentului.
Sintaxă:
display: value;>
Valorile proprietatii:
| Valoare | Descriere |
|---|
| în linie | Este folosit pentru a afișa un element ca element inline. |
|---|
| bloc | Este folosit pentru a afișa un element ca element bloc |
|---|
| continuturi | Este folosit pentru a dispărea recipientul. |
|---|
| contracta | Este folosit pentru a afișa un element ca un container flexibil la nivel de bloc. |
|---|
| grilă | Este folosit pentru a afișa un element ca un container grilă la nivel de bloc. |
|---|
| inline-block | Este folosit pentru a afișa un element ca un container de bloc la nivel inline. |
|---|
| inline-flex | Este folosit pentru a afișa un element ca un container flexibil la nivel inline. |
|---|
| inline-grid | Este folosit pentru a afișa un element ca un container grilă la nivel inline. |
|---|
| inline-table | Este folosit pentru a afișa un tabel la nivel inline |
|---|
| articol-listă | Este folosit pentru a afișa toate elementele dinelement. |
|---|
| a alerga în | Este folosit pentru a afișa un element în linie sau la nivel de bloc, în funcție de context. |
|---|
| masa | Este folosit pentru a seta comportamentul ca pentru toate elementele. pentru toate elementele.| tabel-titlu | Este folosit pentru a seta comportamentul ca pentru toate elementele. |
|---|
| tabel-coloană-grup | Este folosit pentru a seta comportamentul ca pentru toate elementele. |
|---|
| grup-antet-tabel | Este folosit pentru a seta comportamentul ca pentru toate elementele. |
|---|
| grup de subsol-tabel | Este folosit pentru a seta comportamentul ca pentru toate elementele. |
|---|
| tabel-rând-grup | Este folosit pentru a seta comportamentul ca pentru toate elementele. |
|---|
| tabel-celula | Este folosit pentru a seta comportamentul ca | pentru toate elementele. |
|---|
| tabel-coloană | Este folosit pentru a seta comportamentul ca pentru toate elementele. |
|---|
| masă-rând | Este folosit pentru a seta comportamentul ca |
|---|
|
| nici unul | Este folosit pentru a elimina elementul. |
|---|
| iniţială | Este folosit pentru a seta valoarea implicită. |
|---|
| moștenești | Este folosit pentru a moșteni proprietăți de la elementele părinților săi. |
|---|
Exemplu: Acest exemplu folosește 3 div-uri pentru a demonstra proprietatea de afișare CSS. încapsulare java
HTML CSS Display propertytitle><style>#geeks1 { înălțime: 100px; latime: 200px; fundal: teal; afisare: bloc; } #geeks2 { înălțime: 100px; latime: 200px; fundal: cyan; afisare: bloc; } #geeks3 { înălțime: 100px; latime: 200px; fundal: verde; afisare: bloc; } .gfg { margin-left: 20px; dimensiunea fontului: 42px; greutatea fontului: bold; culoare: #009900; } .geeks { font-size: 25px; margine-stânga: 30px; } .principal { margin: 50px; text-align: centru; } stil> cap> <body> <div>techcodeview.comdiv><div>afisare: bloc; proprietatediv><div> <div id='geeks1'>Bloc 1div><div id='geeks2'>Bloc 2div><div id='geeks3'>Bloc 3div> div> body> html>>></pre> </code> <h2><span>Proprietate de afișare CSS Exemple</span></h2><h3> <b> <strong>1. Utilizarea blocului de afișare</strong> </b> <span> </span></h3><p dir='ltr'><span>Această proprietate este folosită ca proprietate implicită a div. Această proprietate plasează div-ul unul după altul pe verticală. Înălțimea și lățimea div-ului pot fi modificate folosind proprietatea bloc dacă lățimea nu este menționată, atunci div-ul de sub proprietatea bloc va ocupa lățimea containerului.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'> <b> <strong>Exemplu:</strong> </b> <span>Utilizați CSS-ul dat în exemplul de mai sus.</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>Ieșire:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt="Afișează proprietatea blocului"><h3> <b> <strong>2. Utilizarea Afișării inline</strong> </b> <span> </span></h3><p dir='ltr'><span>Această proprietate este proprietatea implicită a etichetelor de ancorare. Acesta este folosit pentru a plasa div-ul în linie, adică într-o manieră orizontală. Proprietatea de afișare în linie ignoră înălțimea și lățimea stabilite de utilizator.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'> <b> <strong>Exemplu:</strong> </b> <span>Utilizați CSS-ul dat în exemplul de mai sus.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/infinite-loop-c">buclă infinită</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>Ieșire:</strong> </b> <span> </span></p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt="afișează rezultatul exemplu de proprietate în linie"></p> <h3> <b> <strong>3. Folosind Display Inline-block</strong> </b> <span> </span></h3><p dir='ltr'><span>Această caracteristică utilizează ambele proprietăți menționate mai sus, bloc și inline. Deci, această proprietate aliniază div-ul în linie, dar diferența este că poate edita înălțimea și lățimea blocului. Practic, acest lucru va alinia div-ul atât în bloc, cât și în mod inline.</span></p> <p dir='ltr'> <b> <strong>Exemplu:</strong> </b> <span>Utilizați CSS-ul dat în exemplul de mai sus.</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>Ieșire:</strong> </b> <span> </span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-if-else-statement">if statement java</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt="afișare exemplu de ieșire de bloc inline"></p> <h3> <b> <strong>4. Folosind Display None:</strong> </b> <span> </span></h3><p dir='ltr'><span>Această proprietate ascunde div-ul sau containerul care utilizează această proprietate. Folosind-o pe unul dintre div, va clarifica lucrul.</span></p> <p dir='ltr'> <b> <strong>Exemplu:</strong> </b> <span>Utilizați CSS-ul dat în exemplul de mai sus.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/string-concatenation-java">șiruri de concatenare java</a>
</blockquote> <pre class='hljs'>#geeks2 { background: cyan; display: none; }></pre><p dir='ltr'> <b> <strong>Ieșire:</strong> </b> <span>Nu se afișează nicio proprietate</span> <b> <strong>blocul 2</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt="nu afișa nicio proprietate"></p> <p dir='ltr'> <b> <strong>Browsere acceptate:</strong> </b> </p> <p dir='ltr'><span>Browserele acceptate de</span> <b> <strong>Proprietate de afișare</strong> </b> <span>sunt enumerate mai jos:</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Margine</span> <span> </span> </li><li value='3'> <span>Firefox</span> </li><li value='4'> <span>Operă</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="/python-basics/">Python-Bazele</a> </li><li> <a href="/c-data-types/">Tipuri De Date C</a> </li><li> <a href="/javascript-misc/">Javascript-Diverse</a> </li><li> <a href="/exponents-maq/">Exponenți - Maq</a> </li><li> <a href="/uml-tutorial/">Tutorial Uml</a> </li><li> <a href="/accolite/">Acolit</a> </li><li> <a href="/shell/">Coajă</a> </li><li> <a href="/bubblesort/">Bubblesort</a> </li><li> <a href="/array-range-queries/">Interogări-Matrice-Gamă</a> </li><li> <a href="/digital-electronics-logic-gate/">Electronică Digitală - Poartă Logică</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Rearanjați o listă dată astfel încât să fie compusă din elemente minime maxime alternative</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Având în vedere o listă de numere întregi, rearanjați lista astfel încât să constea în alternarea elementelor minime maxime folosind numai operațiuni de listă. Primul element al listei ar trebui să fie minim, iar al doilea element ar trebui să fie maxim dintre toate elementele prezente în listă. În mod similar, al treilea element va fi următorul element minim și al patrulea element este următorul element maxim și așa mai departe. Nu este permisă utilizarea spațiului suplimentar. Exemple:</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/rearrange-a-given-list-such-that-it-consists-of-alternating-minimum-maximum-elements"> <i class="fa fa-external-link"></i> Citeşte Mai Mult</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articole Interesante</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/javascript-loops">Bucle JavaScript</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ddl-commands-sql">Comenzi DDL în SQL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/11-best-websites-watch-cartoons-online">11 cele mai bune site-uri web pentru a viziona desene animate online gratuit în HD</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-an-ap-scholar-1311418">Ce este un student AP? Avantaje și cerințe</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/virtual-lan">LAN virtual (VLAN)</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">Posturi Populare</h2>
<div class="content">
<ul class="list"> <li><a href="/prime-number-program-java">prime fără cod în java</a>
</li><li><a href="/masons-gain-formula">formula „mason”</a>
</li><li><a href="/npm-clear-cache">npm curat cache</a>
</li><li><a href="/download-install-sts-ide">suită de instrumente de primăvară</a>
</li><li><a href="/java-do-while-loop">java do while</a>
</li><li><a href="/java-convert-string-int">conversia șir în int 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 Toate Drepturile Rezervate | <a href="//sl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate</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>
|
|---|
