CSS
Control de diseño
Buscar..
Sintaxis
- pantalla: ninguna | en línea | bloque lista-item | inline-list-item | bloque en linea | mesa en linea | mesa | mesa-celda | tabla-columna | tabla-columna-grupo | grupo de pies de mesa | table-header-group | tabla-fila | tabla-fila-grupo | flexionar inline-flex | rejilla inline-grid | run-in | rubí | base de rubí | texto de rubí | rubí-base-contenedor | ruby-text-container | contenido;
Parámetros
| Valor | Efecto |
|---|---|
none | Oculta el elemento y evita que ocupe espacio. |
block | Elemento de bloque, ocupa el 100% del ancho disponible, rompe después del elemento. |
inline | Elemento en línea, no ocupa ancho, no hay ruptura después del elemento. |
inline-block | Tomando propiedades especiales de los elementos en línea y de bloque, no hay ruptura, pero puede tener ancho. |
inline-flex | Muestra un elemento como un contenedor flexible en el nivel en línea. |
inline-table | El elemento se muestra como una tabla de nivel en línea. |
grid | Se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de cuadrícula. |
flex | Se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo flexbox. |
inherit | Hereda el valor del elemento padre. |
initial | Restablezca el valor al valor predeterminado tomado de los comportamientos descritos en las especificaciones HTML o de la hoja de estilo predeterminada del usuario / navegador. |
table | Se comporta como el elemento de table HTML. |
table-cell | Deja que el elemento se comporte como un elemento <td> |
table-column | Deja que el elemento se comporte como un elemento <col> |
table-row | Deja que el elemento se comporte como un elemento <tr> |
list-item | Deje que el elemento se comporte como un elemento <li> . |
La propiedad de visualización
La propiedad CSS de display es fundamental para controlar el diseño y el flujo de un documento HTML. La mayoría de los elementos tienen un valor de display predeterminado de block o en inline (aunque algunos elementos tienen otros valores predeterminados).
En línea
Un elemento en inline ocupa solo el ancho necesario. Se apila horizontalmente con otros elementos del mismo tipo y puede que no contenga otros elementos no en línea.
<span>This is some <b>bolded</b> text!</span>
Como se demostró anteriormente, dos elementos en inline , <span> y <b> , están en línea (de ahí el nombre) y no interrumpen el flujo del texto.
Bloquear
Un elemento de block ocupa el ancho máximo disponible de su elemento principal. Comienza con una nueva línea y, a diferencia de los elementos en inline , no restringe el tipo de elementos que puede contener.
<div>Hello world!</div><div>This is an example!</div>
El elemento div está a nivel de bloque por defecto, y como se muestra arriba, los dos elementos de block están apilados verticalmente y, a diferencia de los elementos en inline , el flujo del texto se interrumpe.
Bloque en linea
El valor del inline-block nos da lo mejor de ambos mundos: combina el elemento con el flujo del texto y nos permite usar padding , margin , height y propiedades similares que no tienen efecto visible en los elementos en inline .
Los elementos con este valor de visualización actúan como si fueran texto regular y, como resultado, se ven afectados por las reglas que controlan el flujo de texto, como text-align . Por defecto, también se reducen al tamaño más pequeño posible para acomodar su contenido.
<!--Inline: unordered list-->
<style>
li {
display : inline;
background : lightblue;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>
<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>
<!--block: unordered list-->
<style>
li {
display : block;
background : lightblue;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>
<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>
<!--Inline-block: unordered list-->
<style>
li {
display : inline-block;
background : lightblue;
padding:10px;
border-width:2px;
border-color:black;
border-style:solid;
}
</style>
<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>
ninguna
Un elemento al que se le asigna el valor none a su propiedad de visualización no se mostrará en absoluto.
Por ejemplo, vamos a crear un elemento div que tenga un ID de myDiv :
<div id="myDiv"></div>
Esto ahora se puede marcar como no mostrado por la siguiente regla CSS:
#myDiv {
display: none;
}
Cuando un elemento se ha configurado para display:none; el navegador ignora todas las demás propiedades de diseño para ese elemento específico ( position y float ). No se representará ningún cuadro para ese elemento y su existencia en html no afecta la posición de los siguientes elementos.
Tenga en cuenta que esto es diferente de establecer la propiedad de visibility en hidden . Configuración de visibility: hidden; para un elemento no se mostraría el elemento en la página, pero el elemento todavía ocuparía el espacio en el proceso de renderizado como si fuera visible. Por lo tanto, esto afectará a cómo se muestran los siguientes elementos en la página.
El valor none para la propiedad de visualización se usa comúnmente junto con JavaScript para mostrar u ocultar elementos a voluntad, eliminando la necesidad de eliminarlos y volver a crearlos.
Para obtener la estructura de la tabla de edad utilizando div
Esta es la estructura de tabla HTML normal
<style>
table {
width: 100%;
}
</style>
<table>
<tr>
<td>
I'm a table
</td>
</tr>
</table>
Puedes hacer la misma implementación como esta
<style>
.table-div {
display: table;
}
.table-row-div {
display: table-row;
}
.table-cell-div {
display: table-cell;
}
</style>
<div class="table-div>
<div class="table-row-div>
<div class="table-cell-div>
I behave like a table now
</div>
</div>
</div>