mostrar la propiedad en CSS

CSS | propiedad de presentación: A continuación, vamos a aprender acerca de la propiedad pantalla con la sintaxis y ejemplos de CSS .

CSS | propiedad de presentación

El propiedad de presentación en CSS es usada class controlar el diseño y el flujo de un documento HTML. La mayoría de los elementos tienen un bloque for o valor de visualización en línea.

Sintaxis:

    Element
{
display:value;
}

Los siguientes son los valores importantes de propiedad de presentación ,

  • línea
  • bloque
  • ninguno
  • inline-block
  • contenidos
  • flex

Echemos un vistazo a estas propiedades más de cerca.

1) indicación del valor de la propiedad: “en línea”

Un elemento inline sólo ocupa tanto de anchura como sea necesario. Es horizontalmente con otros elementos del mismo tipo y no puede contener otros elementos no en línea.

Ejemplo de elementos en línea puede ser & lt; lapso & gt; , & lt; img & gt; , & lt; a & gt; etc.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.span {
display: inline;
background: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<span class="span">This is some <b>bolded</b> text!</span>
</body>
</html>

salida

display Property in CSS - 4

En el ejemplo anterior la propiedad inline se utiliza para visualizar todo el contenido de una sola línea con estilos aplicados.

2) la indicación del valor de la propiedad: “bloque”

El elemento de bloque ocupa la anchura máxima disponible de su elemento padre . El elemento de bloque comienza con una nueva línea y, en contraste con los elementos en línea, que no restringe el tipo de elementos que pueda contener.

Ejemplo de elementos de bloque puede ser & lt; div & gt; , & lt; p & gt; , & lt; h1 & gt; etc.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
display: block;
background: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>Hello world!</div>
<div>This is an example!</div>
</body>
</html>

salida

display Property in CSS - 5

En el ejemplo anterior se aplica propiedad de presentación bloque que se utiliza para mostrar el contenido en más de una línea.

3) indicación del valor de la propiedad: “ninguna”

Un elemento con el valor ninguno a su propiedad de presentación no se mostrará en absoluto .

El valor ninguno de la propiedad display se utiliza comúnmente junto con JavaScript para mostrar u ocultar los elementos.

Cuando un elemento ha sido ajustada a display: none , el sitio hace caso omiso de todos los demás default propiedad layout ese elemento específico.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
display: none;
background: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>Hello world!</div>
<div>This is an example!</div>
</body>
</html>

salida

display Property in CSS - 6

En el ejemplo anterior propiedad de presentación ninguno se aplica que oculta todas las propiedades aplicada al elemento específico.

4) de indicación del valor de la propiedad: “inline-block”

Este es un propiedad CSS que se utiliza para visualizar cualquier elemento como un inline-block . Este establecimiento utiliza tanto línea y bloque propiedad de CSS.

Esta propiedad con el valor de inline-block no es compatible con Internet Explorer 6 y 7.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
display: inline-block;
background: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>Hello world!</div>
<div>This is an example!</div>
</body>
</html>

salida

display Property in CSS - 7

El ejemplo anterior es para semejante propiedad bloque con propiedad inline que se utiliza para elementos de alineación horizontal.

5) indicación del valor de la propiedad: “contenido”

La propiedad contenido de la pantalla en CSS hace que el contenedor del elemento de desaparecer.

Esto hace que el div o p no genera ninguna caja, por lo que su fondo, la frontera y otras propiedades no se representan.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
display: contents;
background: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>Hello world!</div>
<div>Hello world!</div>
</body>
</html>

salida

display Property in CSS - 8

En el ejemplo sobre todo las propiedades del elemento div no se aparecieron en la salida class.

6) de indicación del valor de la propiedad: “flex”

El pantalla propiedad flex en CSS se utiliza para visualizar cualquier elemento específico como un contenedor de la flexión a nivel de bloque.

Todos los demás elementos se muestran como es, pero el elemento de propiedad flex se muestra como un nivel de bloque contenedor de flexión .

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
background: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div>Hello world!</div>
<p>Hello world!</p>
</body>
</html>

salida

display Property in CSS - 9

En el ejemplo anterior, la propiedad flex se aplica al elemento div por lo que se muestra como un recipiente flex nivel de bloque.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *