Visualización de CSS (Visualización)

La propiedad display especifica el tipo de cuadro generado por el elemento, generalmente se utilizan los valores correspondientes a display como block, none, inline.

Propiedad de visualización de CSS

La especificación de CSS define el valor predeterminado de display para todos los elementos, por ejemplo, el elemento <div> se presenta como un bloque, mientras que el elemento <span> se muestra como嵌入式.

Cambiar el valor predeterminado de display

El valor predeterminado de display para cubrir un elemento es un significado importante de la propiedad display. Por ejemplo, cambiar un elemento en línea a un elemento de nivel de bloque o cambiar un elemento de nivel de bloque a un elemento en línea.

La siguiente sección describe los valores de presentación de CSS más utilizados.

Mostrar bloque (Block)

El valor block de la propiedad display obliga al comportamiento del elemento a ser similar ade bloqueelemento, por ejemplo<div>o<p>elemento. Las siguientes reglas de estilo en el ejemplo:<span>y <a>El elemento se muestra como un elemento de bloque:

span {
　　　　display: block;
}
a {
　　　　display: block;
}

Mostrar en línea (inline)

El valor inline de la propiedad display hace que el comportamiento del elemento sea como sien línea-nivelelemento, por ejemplo<span>o<a>elemento. Las siguientes reglas de estilo en el ejemplo:<p>y <li>El elemento se muestra como un elemento en línea de nivel:

p {
　　　　display: inline;
}
ul li {
　　　　display: inline;
}

Mostrar bloques en línea (inline-block)

El valor inline de la propiedad display-El valor block genera una caja rectangular para el elemento, que fluirá junto con el contenido circundante, es decir, en la misma línea que el contenido adyacente. Las siguientes reglas de estilo:<div>y <span>El elemento se muestra como un bloque en línea:

div {
　　　　display: inline-block;
}
span {
　　　　display: inline-block;
}

No mostrar (none)

Cuando el valor de propiedad display es none, el elemento no genera ninguna caja y no se muestra en la página. Los elementos hijos también no generan ninguna caja, incluso si su propiedad de presentación está configurada en no. El documento presentado parece que el elemento no existe en el árbol del documento.

h1　{
　　　　display: none;
}
p {
　　　　display: none;
}