Comprender cómo navegar por las propiedades HTML y CSS es la mejor manera de estimular sus habilidades de diseño web. Ya sea que sea un desarrollador nuevo o uno experimentado que está perfeccionando sus habilidades, es importante seguir algunas reglas y estructuras básicas de desarrollo web. Crear incluso el sitio web más básico puede ser muy difícil sin un buen conocimiento de HTML y CSS.
Por lo tanto, es importante comprender el valor de la propiedad de visualización. Todos los elementos de visualización en el navegador se comportan de forma predeterminada. En este artículo, cubriremos las diferentes formas de mostrar elementos en su navegador. Nos centraremos en la diferencia entre elementos de bloque y de nivel en línea. Sumerjámonos.
Elementos HTML y CSS a nivel de bloque y elementos en línea
los Ver propiedad define cómo se realiza su elemento HTML en la vista. Es importante saber cómo administrar el diseño de su sitio web.
Cada elemento HTML se trata como un cuadro. La propiedad de visualización determina cómo se mostrarán estos campos en la pantalla. Hay muchos elementos de propiedades de visualización. Los más notables son Unidad, incorporado, bloque incorporado, mesa, cable, rejay No.
Analicemos la propiedad de visualización de un elemento de bloque.
¿Qué son los elementos de bloque?
Un elemento de bloque es un elemento HTML que ocupa espacio horizontal de forma predeterminada. Se extiende al 100% de ancho y toma la altura de su contenido interno. De forma predeterminada, un elemento de bloque siempre comienza una nueva línea y fluye verticalmente. Con CSS puedes ajustar su ancho y alto. Eche un vistazo al ejemplo a continuación.
HTML:
<div> This is a block. </div>
<div> This is a block. </div>CSS:
body {
padding: 30px;
}div {
padding: 15px;
background: rgba(255,122,89);
margin: 10px;
color: white;
}
En este ejemplo, la oración está dentro de la etiqueta.
Bloqueo de pantallaes el valor predeterminado para lo siguiente:
<div>
<h1>-<h6>
<p>
<ul>
<ol>
<li>
<table>
<footer>
<form>
<header>
<hr>
<section>
<video>
Tenga en cuenta que para los elementos CSS de bloque margen a la derecha no tiene efecto. Sin embargo, aún puede ajustar el tamaño de los elementos del bloque usando CSS ancho, aumentar, margen superior, margen inferiory margen izquierdo.
¿Qué son los elementos de nivel en línea?
Un elemento en línea toma el ancho y alto de su contenido interno. Le permite colocar varios artículos en la misma línea. A diferencia de un elemento de bloque, los elementos incorporados no pueden tener un ancho establecido, márgenes superior o inferior.
HTML:
<span>inline</span>
<span>inline</span>
<span>inline</span>
<span>This is alone an inline</span>CSS:
body {
padding: 30px;
}
span {
padding: 10px;
background: rgba(255,122,89);
color: white;
}En el ejemplo anterior, el contenido está dentro de la etiqueta. . Etiqueta predeterminada se considera un elemento incorporado. Un elemento en línea siempre coincide con el tamaño de su contenido.
Pantalla: incorporadaes el valor predeterminado para lo siguiente:
<img>
<a>
<span>
<input>
<br>
<button>
<em>
<i>
<b>
<map>
<output>Tenga en cuenta que no puede cambiar el tamaño de un elemento incorporado, excepto que no puede cambiar el tamaño de su contenido.
Un elemento a nivel de bloque frente a un elemento a nivel incorporado
Hay varias diferencias entre un elemento de bloque y un elemento en línea. Para tu comodidad, hemos preparado un gráfico para que entiendas la diferencia. 
Cambiar propiedades de visualización
En CSS, puede cambiar el tipo de visualización predeterminado de un elemento utilizando una de las siguientes propiedades de CSS:
display: inline;
display: block;En general, no necesita cambiar las propiedades de la pantalla, pero si lo hace, aquí hay algunas razones por las que puede ser útil cambiar su pantalla:
- Menú con una lista horizontal: Las listas son elementos a nivel de bloque, pero si desea crear un menú horizontal como una barra de navegación, deberá convertir la lista en un elemento en línea para que cada elemento no comience en una nueva línea.
- Títulos en el texto: Si desea que el encabezado permanezca en la misma línea que el texto, puede cambiar el elemento de bloque predeterminado a un elemento en línea.
Sitios web bloqueados e incrustados
Diseñar un sitio web no tiene por qué ser difícil, especialmente si ha aprendido los conceptos básicos de HTML y CSS. Las propiedades de visualización en bloque y en línea que analizamos son algunas de las propiedades HTML y CSS más importantes para ayudarlo a desarrollar sus habilidades de programación. Tómese un tiempo para perfeccionar su HTML y CSS y creará páginas web atractivas antes de que se dé cuenta.
