Propriété d'affichage CSStitre><style>#geeks1 { hauteur : 100 px ; largeur : 200 px ; fond : bleu sarcelle ; bloc de visualisation; } #geeks2 { hauteur : 100 px ; largeur : 200 px ; fond : cyan ; bloc de visualisation; } #geeks3 { hauteur : 100 px ; largeur : 200 px ; fond : vert ; bloc de visualisation; } .gfg { marge gauche : 20 px ; taille de police : 42 px ; poids de la police : gras ; couleur : #009900 ; } .geeks { taille de police : 25 px ; marge gauche : 30 px ; } .main { marge : 50px ; alignement du texte : centre ; } style> tête> <body> <div>techcodeview.comdiv><div>bloc de visualisation; propriétédiv><div> <div id='geeks1'>Bloc 1div><div id='geeks2'>Bloc 2div><div id='geeks3'>Bloc 3div> div> corps> html>></pre> </code> <h2><span>Exemples de propriétés d'affichage CSS</span></h2><h3> <b> <strong>1. Utilisation du bloc d'affichage</strong> </b> <span> </span></h3><p dir='ltr'><span>Cette propriété est utilisée comme propriété par défaut de div. Cette propriété place les div les uns après les autres verticalement. La hauteur et la largeur du div peuvent être modifiées à l'aide de la propriété block si la largeur n'est pas mentionnée, alors le div sous la propriété block occupera la largeur du conteneur.</span></p> <p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>Utilisez le CSS donné dans l'exemple ci-dessus.</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>Sortir:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt="afficher la propriété du bloc"><h3> <b> <strong>2. Utilisation de l'affichage en ligne</strong> </b> <span> </span></h3><p dir='ltr'><span>Cette propriété est la propriété par défaut des balises d'ancrage. Ceci est utilisé pour placer le div en ligne, c'est-à-dire de manière horizontale. La propriété d'affichage en ligne ignore la hauteur et la largeur définies par l'utilisateur.</span></p> <p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>Utilisez le CSS donné dans l'exemple ci-dessus.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/greatandhra-reviews">grandandhra</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>Sortir:</strong> </b> <span> </span></p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt="afficher la sortie d'un exemple de propriété en ligne"></p> <h3> <b> <strong>3. Utilisation du bloc Display Inline</strong> </b> <span> </span></h3><p dir='ltr'><span>Cette fonctionnalité utilise les deux propriétés mentionnées ci-dessus, block et inline. Ainsi, cette propriété aligne le div en ligne mais la différence est qu'elle peut modifier la hauteur et la largeur du bloc. Fondamentalement, cela alignera le div à la fois en bloc et en ligne.</span></p> <p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>Utilisez le CSS donné dans l'exemple ci-dessus.</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>Sortir:</strong> </b> <span> </span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-convert-double-string">doubler en chaîne java</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt="afficher la sortie d'un exemple de bloc en ligne"></p> <h3> <b> <strong>4. Utilisation de l'affichage Aucun :</strong> </b> <span> </span></h3><p dir='ltr'><span>Cette propriété masque le div ou le conteneur qui utilise cette propriété. En l'utilisant sur l'un des div, le travail sera plus clair.</span></p> <p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>Utilisez le CSS donné dans l'exemple ci-dessus.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/diana-blacker-cavendish">Diana Mary Blacker</a>
</blockquote> <pre class='hljs'>#geeks2 { background: cyan; display: none; }></pre><p dir='ltr'> <b> <strong>Sortir:</strong> </b> <span>Afficher aucune propriété sur</span> <b> <strong>bloc 2</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt="afficher aucune propriété"></p> <p dir='ltr'> <b> <strong>Navigateurs pris en charge :</strong> </b> </p> <p dir='ltr'><span>Les navigateurs pris en charge par le</span> <b> <strong>Propriété d'affichage</strong> </b> <span>sont listés ci-dessous :</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Bord</span> <span> </span> </li><li value='3'> <span>Firefox</span> </li><li value='4'> <span>Opéra</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="//spiritscaution.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="">Catégorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/medlife/">Medlife</a> </li><li> <a href="/finance-maq/">Financement Maq</a> </li><li> <a href="/facebook/">Facebook</a> </li><li> <a href="/python-utility/">Utilitaire Python</a> </li><li> <a href="/ai-news/">Actualités Sur L'ia</a> </li><li> <a href="/shortcut-keys/">Raccourcis Claviers</a> </li><li> <a href="/data-link-layer/">Couche De Liaison De Données</a> </li><li> <a href="/csharp-generic-hashset/">Csharp-Generic-Hashset</a> </li><li> <a href="/java-timestamp-class/">Classe D'horodatage Java</a> </li><li> <a href="/linux-files/">Fichiers Linux</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="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Balise HTML en gras</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Balise HTML en gras ou balise HTML b avec exemples, formulaires, saisie, texte, ancre, image, titre, chapiteau, zone de texte, paragraphe, titre, citations, code, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/html-bold-tag"> <i class="fa fa-external-link"></i> Lire La Suite</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Des Articles Intéressants</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/jannat-mirza-biography">Biographie de Jannat Mirza</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/restful/">Reposant</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/inches-mm-converter">Convertisseur de pouces en mm</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/photoshop-tutorial/">Tutoriel Photoshop</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/act-test-dates-full-guide-choosing-2023-1311134">Dates des tests ACT : guide complet pour choisir (2023, 2024)</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">Articles Populaires</h2>
<div class="content">
<ul class="list"> <li><a href="/java-convert-string-int">Java convertit la chaîne en int</a>
</li><li><a href="/difference-between-csma-ca">csma et csma cd</a>
</li><li><a href="/how-find-hidden-apps-android">applications cachées sur cet appareil</a>
</li><li><a href="/linux-home-directory">qu'est-ce que $home Linux</a>
</li><li><a href="/what-is-10-40">10 sur 40</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 Tous Les Droits Sont Réservés | <a href="//ro.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité</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>
