CSS - visualización

Descripción

La propiedad de visualización afecta la presentación más básica de un elemento, clasificando efectivamente el elemento como un cierto tipo de elemento. La representación del elemento puede depender en gran medida de su tipo de visualización, y ciertas propiedades solo funcionarán en elementos que tengan valores de visualización específicos.

Valores posibles

inline- Este valor hace que un elemento genere una caja de nivel en línea; por ejemplo, los elementos HTML STRONG, CODE o EM (entre otros). El elemento generará uno o más cuadros en línea cuando se muestre.
block- Este valor hace que un elemento genere una caja a nivel de bloque; por ejemplo los elementos HTML P, H1 o PRE (entre otros). El elemento generará un cuadro de bloque cuando se muestre.
list-item- Este valor hace que un elemento genere un cuadro de bloque y un cuadro en línea de elementos de lista. En HTML, el elemento LI es el único ejemplo de dicho elemento.
run-in- En determinadas condiciones, este valor provocará la inserción del elemento. al comienzo del siguiente elemento. Si un elemento A está configurado para mostrar: ejecución y es seguido por un elemento B a nivel de bloque, entonces A se convierte en el primer cuadro de nivel en línea de B. Si el elemento que sigue a A no es a nivel de bloque, entonces A se convierte en un caja a nivel de bloque.
compact - En determinadas condiciones, este valor hará que el elemento se coloque a un lado del siguiente elemento.
marker- Este valor establecerá el contenido generado como un marcador; por lo tanto, debe usarse solo junto con los pseudoelementos: before y: after cuando se establecen en elementos a nivel de bloque.
table- Este valor hace que un elemento genere un cuadro de tabla a nivel de bloque. Esto es análogo al elemento HTML TABLE.
inline-table- Este valor hace que un elemento genere un cuadro de tabla de nivel en línea. Si bien no existe un análogo en HTML, se puede imaginar como una tabla HTML tradicional que puede aparecer en medio de una línea de texto.
table-cell- Este valor declara que el elemento es una celda de tabla. Esto es análogo al elemento HTML TD.
table-row- Este valor declara que el elemento es una fila de celdas de tabla. Esto es análogo al elemento HTML TR.
table-row-group- Este valor declara que el elemento es un grupo de filas de la tabla. Esto es análogo al elemento HTML TBODY.
table-column- Este valor declara que el elemento es una columna de celdas de tabla. Esto es análogo al elemento HTML COL.
table-column-group- Este valor declara que el elemento es un grupo de columnas de la tabla. Esto es análogo al elemento HTML COLGROUP.
table-header-group- Este valor declara que el elemento es un grupo de celdas que siempre está visible en la parte superior de la tabla, colocado antes de cualquier fila o grupo de filas pero después de los títulos de la tabla alineados en la parte superior. Esto es análogo al elemento HTML THEAD.
table-footer-group- Este valor declara que el elemento es un grupo de celdas que siempre está visible en la parte inferior de la tabla, colocado después de cualquier fila o grupo de filas pero antes de los títulos de la tabla alineados en la parte inferior. Esto es análogo al elemento HTML TFOOT.
table-caption- Este valor declara que el elemento es un título para una tabla. Esto es análogo al elemento HTML CAPTION.
none - El elemento no generará cuadros en absoluto y, por lo tanto, no se mostrará ni afectará el diseño del documento.

Se aplica a

Todos los elementos HTML.

Sintaxis DOM

object.style.cueAfter = url("music.wav");

Ejemplo

Aquí está el ejemplo:

<p style = "display:inline;">
   This paragraph will inline with the next paragraph
</p>

<p style = "display:inline;">
   and will make a single line.
</p>

<br />
<br />

<div style = "display:block;">
   This paragraph will be separate from the next paragraph
</div>

<div style = "display:block;">
   and this is second paragraph.
</div>

Esto producirá el siguiente resultado:

 This paragraph will inline with the next paragraph 
 and will make a single line. 





      
        This paragraph will be separate from the next paragraph 
      

      
        and this is second paragraph.

↰ Previous page