La propiedad Display en CSS define cómo se colocarán los componentes (div, hipervínculo, encabezado, etc.) en la página web. Como sugiere su nombre, esta propiedad se utiliza para definir la visualización de las diferentes partes de una página web.
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 envase. |
| flexionar | Se utiliza para mostrar un elemento como un contenedor flexible a nivel de bloque. |
| cuadrícula | 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 de nivel en línea. |
| en línea-flex | 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 de nivel en 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 en el elemento <li>. |
| 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 como <tabla> para todos los elementos. |
| título de la tabla | Se utiliza para establecer el comportamiento como <caption> para todos los elementos. |
| tabla-columna-grupo | Se utiliza para establecer el comportamiento como <columna> para todos los elementos. |
| grupo de encabezado de tabla | Se utiliza para establecer el comportamiento como <header> para todos los elementos. |
| grupo-pie-de-tabla | Se utiliza para establecer el comportamiento como <footer> para todos los elementos. |
| tabla-fila-grupo | Se utiliza para establecer el comportamiento como <fila> para todos los elementos. |
| tabla-celda | Se utiliza para establecer el comportamiento como <td> para todos los elementos. |
| tabla-columna | Se utiliza para establecer el comportamiento como <col> para todos los elementos. |
| fila de la tabla | Se utiliza para establecer el comportamiento como <tr> para todos los elementos. |
| ninguna | Se utiliza para eliminar el elemento. |
| inicial | Se utiliza para establecer el valor predeterminado. |
| heredar | Se utiliza para heredar la propiedad de los elementos de sus padres. |
Algunos valores importantes se describen a continuación con el ejemplo.
Bloque: esta propiedad se utiliza como propiedad predeterminada de div. Esta propiedad coloca el div uno tras otro verticalmente. La altura y el ancho del div se pueden cambiar usando la propiedad de bloque si no se menciona el ancho, entonces la propiedad div debajo del bloque ocupará el ancho del contenedor.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS | Display property</title>
<style>
#geeks1{
height: 100px;
width: 200px;
background: teal;
display: block;
}
#geeks2{
height: 100px;
width: 200px;
background: cyan;
display: block;
}
#geeks3{
height: 100px;
width: 200px;
background: green;
display: block;
}
.gfg {
margin-left:20px;
font-size:42px;
font-weight:bold;
color:#009900;
}
.geeks {
font-size:25px;
margin-left:30px;
}
.main {
margin:50px;
text-align:center;
}
</style>
</head>
<body>
<div class = "gfg">GeeksforGeeks</div>
<div class = "geeks">display: block; property</div>
<div class = "main">
<div id="geeks1">Block 1 </div>
<div id="geeks2">Block 2</div>
<div id="geeks3">Block 3</div>
</div>
</body>
</html>
Producción:
En línea: esta propiedad es la propiedad predeterminada de las etiquetas de anclaje. Esto se usa para colocar el div en línea, es decir, de manera horizontal. La propiedad de visualización en línea ignora la altura y el ancho establecidos por el usuario.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS | Display property</title>
<style>
#main{
height: 200px;
width: 200px;
background: teal;
display: inline;
}
#main1{
height: 200px;
width: 200px;
background: cyan;
display: inline;
}
#main2{
height: 200px;
width: 200px;
background: green;
display: inline;
}
.gfg {
margin-left:20px;
font-size:42px;
font-weight:bold;
color:#009900;
}
.geeks {
font-size:25px;
margin-left:30px;
}
.main {
margin:50px;
}
</style>
</head>
<body>
<div class = "gfg">GeeksforGeeks</div>
<div class = "geeks">display: inline; property</div>
<div class = "main">
<div id="main"> BLOCK 1 </div>
<div id="main1"> BLOCK 2</div>
<div id="main2">BLOCK 3 </div>
</div>
</body>
</html>
Producción:
Inline-block: esta característica utiliza las dos propiedades mencionadas anteriormente, block e inline. 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.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS | Display property</title>
<style>
#main{
height: 100px;
width: 200px;
background: teal;
display: inline-block;
}
#main1{
height: 100px;
width: 200px;
background: cyan;
display: inline-block;
}
#main2{
height: 100px;
width: 200px;
background: green;
display: inline-block;
}
.gfg {
margin-left:200px;
font-size:42px;
font-weight:bold;
color:#009900;
}
.geeks {
font-size:25px;
margin-left:210px;
}
.main {
margin:50px;
}
</style>
</head>
<body>
<div class = "gfg">GeeksforGeeks</div>
<div class = "geeks">display: Inline-block; property</div>
<div class = "main">
<div id="main"> BLOCK 1 </div>
<div id="main1"> BLOCK 2</div>
<div id="main2">BLOCK 3 </div>
</div>
</body>
</html>
Producción:
Ninguno: esta propiedad oculta el div o el contenedor que usa esta propiedad. Usarlo en uno de los div hará que el trabajo sea claro.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS | Display property</title>
<style>
#main{
height: 100px;
width: 200px;
background: teal;
display: block;
}
#main1{
height: 100px;
width: 200px;
background: cyan;
display: none;
}
#main2{
height: 100px;
width: 200px;
background: green;
display: block;
}
.gfg {
margin-left:20px;
font-size:42px;
font-weight:bold;
color:#009900;
}
.geeks {
font-size:25px;
margin-left:20px;
}
.main {
margin:50px;
}
</style>
</head>
<body>
<div class = "gfg">GeeksforGeeks</div>
<div class = "geeks">display: none; property</div>
<div class = "main">
<div id="main"> BLOCK 1 </div>
<div id="main1"> BLOCK 2</div>
<div id="main2">BLOCK 3 </div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad Display se enumeran a continuación:
- Google Chrome 1.0
- Borde 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Ópera 7.0
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por RahulRanjan4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA