El propiedad de visualización especifica el comportamiento de visualización de un elemento (el tipo de cuadro de representación). Define cómo se representa un elemento en el diseño, determinando su posicionamiento e interacción dentro del flujo y la estructura del documento.
Sintaxis:
display: value;>
Valores de propiedad:
| Valor | Descripción |
|---|
| en línea | Se utiliza para mostrar un elemento como un elemento en línea. |
|---|
| bloquear | Se utiliza para mostrar un elemento como un elemento de bloque. |
|---|
| contenido | Se utiliza para desaparecer el contenedor. |
|---|
| doblar | Se utiliza para mostrar un elemento como un contenedor flexible a nivel de bloque. |
|---|
| red | Se utiliza para mostrar un elemento como un contenedor de cuadrícula a nivel de bloque. |
|---|
| bloque en línea | Se utiliza para mostrar un elemento como un contenedor de bloques a nivel de línea. |
|---|
| flexible en línea | Se utiliza para mostrar un elemento como un contenedor flexible de nivel en línea. |
|---|
| cuadrícula en línea | Se utiliza para mostrar un elemento como un contenedor de cuadrícula a nivel de línea. |
|---|
| tabla en línea | Se utiliza para mostrar una tabla de nivel en línea. |
|---|
| elemento de lista | Se utiliza para mostrar todos los elementos enelemento. |
|---|
| entrar corriendo | Se utiliza para mostrar un elemento en línea o a nivel de bloque, según el contexto. |
|---|
| mesa | Se utiliza para establecer el comportamiento de todos los elementos. para todos los elementos.| título de tabla | Se utiliza para establecer el comportamiento de todos los elementos. |
|---|
| grupo-columna-tabla | Se utiliza para establecer el comportamiento de todos los elementos. |
|---|
| grupo-encabezado-tabla | Se utiliza para establecer el comportamiento de todos los elementos. |
|---|
| grupo de pie de tabla | Se utiliza para establecer el comportamiento de todos los elementos. |
|---|
| grupo-fila-tabla | Se utiliza para establecer el comportamiento de todos los elementos. |
|---|
| celda de tabla | Se utiliza para establecer el comportamiento como | para todos los elementos. |
|---|
| columna de tabla | Se utiliza para establecer el comportamiento de todos los elementos. |
|---|
| fila de la tabla | Se utiliza para establecer el comportamiento como |
|---|
|
| ninguno | Se utiliza para eliminar el elemento. |
|---|
| inicial | Se utiliza para establecer el valor predeterminado. |
|---|
| tu heredas | Se utiliza para heredar propiedades de los elementos de sus padres. |
|---|
Ejemplo : Este ejemplo utiliza 3 divs para demostrar la propiedad de visualización de CSS. reemplazar de cadena en java
HTML Título de propiedad de visualización CSS><style>#geeks1 { altura: 100px; ancho: 200px; fondo: verde azulado; bloqueo de pantalla; } #geeks2 { altura: 100px; ancho: 200px; fondo: cian; bloqueo de pantalla; } #geeks3 { altura: 100px; ancho: 200px; fondo: verde; bloqueo de pantalla; } .gfg { margen izquierdo: 20px; tamaño de fuente: 42px; peso de fuente: negrita; color: #009900; } .geeks { tamaño de fuente: 25px; margen izquierdo: 30px; } .main { margen: 50px; alineación de texto: centro; } estilo> cabeza> <body> <div>techcodeview.comdiv><div>bloqueo de pantalla; propiedaddiv><div> <div id='geeks1'>Bloque 1div><div id='geeks2'>Bloque 2div><div id='geeks3'>Bloque 3div> div> cuerpo> html>></pre> </code> <h2><span>Ejemplos de propiedades de visualización CSS</span></h2><h3> <b> <strong>1. Usando el bloque de visualización</strong> </b> <span> </span></h3><p dir='ltr'><span>Esta propiedad se utiliza como propiedad predeterminada de div. Esta propiedad coloca los div uno tras otro verticalmente. La altura y el ancho del div se pueden cambiar usando la propiedad del bloque. Si no se menciona el ancho, entonces el div debajo de la propiedad del bloque ocupará el ancho del contenedor.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'> <b> <strong>Ejemplo:</strong> </b> <span>Utilice el CSS proporcionado en el ejemplo anterior.</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>Producción:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/css-properties/99/css-display-property.webp' alt="propiedad del bloque de visualización"><h3> <b> <strong>2. Uso de la visualización en línea</strong> </b> <span> </span></h3><p dir='ltr'><span>Esta propiedad es la propiedad predeterminada de las etiquetas de anclaje. Esto se utiliza para colocar el div en línea, es decir, de forma horizontal. La propiedad de visualización en línea ignora la altura y el ancho establecidos por el usuario.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <p dir='ltr'> <b> <strong>Ejemplo:</strong> </b> <span>Utilice el CSS proporcionado en el ejemplo anterior.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-hashmap">mapa hash java</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>Producción:</strong> </b> <span> </span></p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-2.webp' alt="mostrar la salida del ejemplo de propiedad en línea"></p> <h3> <b> <strong>3. Uso del bloque Display Inline</strong> </b> <span> </span></h3><p dir='ltr'><span>Esta característica utiliza las dos propiedades mencionadas anteriormente, bloque y en línea. Entonces, esta propiedad alinea el div en línea, pero la diferencia es que puede editar la altura y el ancho del bloque. Básicamente, esto alineará el div tanto en bloque como en línea.</span></p> <p dir='ltr'> <b> <strong>Ejemplo:</strong> </b> <span>Utilice el CSS proporcionado en el ejemplo anterior.</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>Producción:</strong> </b> <span> </span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/parallel-processing">procesamiento en paralelo</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-3.webp' alt="mostrar salida de ejemplo de bloque en línea"></p> <h3> <b> <strong>4. Usando Mostrar Ninguno:</strong> </b> <span> </span></h3><p dir='ltr'><span>Esta propiedad oculta el div o el contenedor que usa esta propiedad. Al usarlo en uno de los div, el trabajo quedará claro.</span></p> <p dir='ltr'> <b> <strong>Ejemplo:</strong> </b> <span>Utilice el CSS proporcionado en el ejemplo anterior.</span></p> <pre class='hljs'>#geeks2 { background: cyan; display: none; }></pre><p dir='ltr'> <b> <strong>Producción:</strong> </b> <span>No mostrar ninguna propiedad en</span> <b> <strong>bloque 2</strong> </b> </p> <p dir='ltr'> <img src='//techcodeview.com/img/css-properties/99/css-display-property-4.webp' alt="mostrar ninguna propiedad"></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/linux-file-system">¿Qué es el sistema de archivos de Linux?</a>
</blockquote> <p dir='ltr'> <b> <strong>Navegadores compatibles:</strong> </b> </p> <p dir='ltr'><span>Los navegadores soportados por el</span> <b> <strong>Propiedad de visualización</strong> </b> <span>están enlistados debajo:</span></p> <ul><li value='1'> <span>Google Chrome</span> </li><li value='2'> <span>Borde</span> <span> </span> </li><li value='3'> <span>Firefox</span> </li><li value='4'> <span>Ópera</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="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/css-questions/">Preguntas Css</a> </li><li> <a href="/csharp-generic-hashset/">Csharp-Generic-Hashset</a> </li><li> <a href="/artificial-neural-network/">Red Neuronal Artificial</a> </li><li> <a href="/spring-tutorial/">Tutorial De Primavera</a> </li><li> <a href="/c-static-keyword/">C++-Palabra Clave Estática</a> </li><li> <a href="/linux-file-contents/">Contenido Del Archivo De Linux</a> </li><li> <a href="/dbms-basics/">Conceptos Básicos Del Sgbd</a> </li><li> <a href="/commerce-12th/">Comercio - 12</a> </li><li> <a href="/java-examples/">Ejemplos De Java</a> </li><li> <a href="/java-mail-tutorial/">Tutorial De Correo Java</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Chanclas JK</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Flip flop JK con tutorial, sistema numérico, código Gray, álgebra booleana y puertas lógicas, forma canónica y estándar, simplificación de funciones booleanas, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/jk-flip-flop"> <i class="fa fa-external-link"></i> Leer Más</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Artículos De Interés</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/difference-between-prayer">Diferencia entre oración y súplica</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/underscore-python">Guión bajo (_) en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-d">Diferencia entre el especificador de formato %d y %i en lenguaje C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linux-process-memory-usage">Uso de la memoria del proceso de Linux</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/routing-information-protocol">Protocolo de información de enrutamiento (RIP)</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">Entradas Populares</h2>
<div class="content">
<ul class="list"> <li><a href="/java-enum-valueof-method">valor java de enumeración</a>
</li><li><a href="/how-sort-an-array-java">ordenar matriz en java</a>
</li><li><a href="/exception-handling-java">manejo de excepciones en java</a>
</li><li><a href="/what-is-full-form-iskcon">formulario completo de iskcon</a>
</li><li><a href="/an-array-strings-c">matriz de cadenas c</a>
</li><li><a href="/heap-sort-algorithm">ordenar montón</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 Todos Los Derechos Reservados | <a href="//tr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad</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>
|
|---|
