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> <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> <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 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="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/javascript-functions/">Funciones Javascript</a> </li><li> <a href="/entertainment/">Entretenimiento</a> </li><li> <a href="/process-synchronization/">Sincronización De Procesos</a> </li><li> <a href="/bfs/">Bfs</a> </li><li> <a href="/image-processing/">Procesamiento De Imágenes</a> </li><li> <a href="/matrix/">Matriz</a> </li><li> <a href="/python-modules/">Módulos-Python</a> </li><li> <a href="/c-operators/">Operadores C</a> </li><li> <a href="/postman-tutorial/">Tutorial De Cartero</a> </li><li> <a href="/java-advanced/">Java-Avanzado</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">Fórmula de frecuencia resonante</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal de informática para geeks. Contiene artículos de programación y ciencias de la computación bien escritos, bien pensados y bien explicados, cuestionarios y preguntas de práctica/programación competitiva/entrevistas de empresa.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/resonant-frequency-formula"> <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="/opencv-tutorial-python">Tutorial de OpenCV en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/php-pagination">Paginación PHP</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-undo-redo-photoshop">Cómo deshacer/rehacer en Photoshop</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/spring-boot-starter-parent">Padre inicial de arranque de primavera</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/list-top-10-major-wars-world">Lista de las 10 guerras más importantes del mundo</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="/selenium-tutorial">tutorial de selenio java</a>
</li><li><a href="/run-command-linux">comando de ejecución de Linux</a>
</li><li><a href="/avl-tree">rotación del árbol avl</a>
</li><li><a href="/typescript-foreach">foreach mecanografiado</a>
</li><li><a href="/dynamic-array-java">matriz dinámica en 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 Todos Los Derechos Reservados | <a href="//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>
|
|---|
