Etiquetas en bloque y en línea. Elementos de bloque en línea. Modelo de formato visual CSS
Los elementos en línea son aquellos elementos del documento que son parte directa de una línea. Los elementos en línea incluyen etiquetas.
, ,
,
,
etc., así como elementos cuya propiedad de visualización está establecida en inline . Se utilizan principalmente para cambiar la apariencia del texto o resaltarlo de forma lógica.
Por analogía con los elementos de bloque, enumeraré sus rasgos característicos.
- Es aceptable colocar texto u otros elementos en línea dentro de elementos en línea. Está prohibido insertar elementos de bloque dentro de elementos en línea.
- El efecto de colapso del margen no funciona.
- Las propiedades relacionadas con las dimensiones (ancho, alto) no son aplicables.
- El ancho es igual al contenido más los valores de relleno, margen y borde.
- Varios elementos en línea seguidos se colocan en una línea y se transfieren a otra línea si es necesario.
- Se puede alinear verticalmente usando la propiedad de alineación vertical.
Los elementos en línea son convenientes para cambiar la apariencia y el estilo del texto, en particular caracteres y palabras individuales. Para este fin se suele utilizar una etiqueta universal. , que por sí solo no modifica el contenido de ninguna manera, pero se combina fácilmente con estilos a través de clases o identificadores. Debido a esto, al utilizar esta etiqueta puede controlar fácilmente la apariencia y posición de fragmentos individuales de texto o imágenes.
Para el diseño, los elementos en línea se utilizan con menos frecuencia que los elementos en bloque. Esto se debe principalmente al hecho de que no se permiten contenedores dentro de elementos en línea.
Y etiquetas similares generalizadas. Sin embargo, los elementos en bloque y en línea se complementan bien porque le permiten cambiar la apariencia de las páginas web en todos los niveles. El ejemplo 3.16 muestra el uso de la etiqueta. para resaltar palabras individuales.
Ejemplo 3.16. Aplicar una etiqueta
Acuéstate boca abajo en el suelo.. Junta los pies doblando las rodillas y girándolas hacia los lados. Manos detrás de tu cabeza. Tire de la cabeza hacia arriba y hacia adelante con las manos hasta que se complete la contracción. músculos abdominales. Mantenga durante dos segundos. Ejecutar ocho repeticiones.
El resultado del ejemplo se muestra a continuación (Figura 3.25).
Arroz. 3.25. Texto con estilo
En este ejemplo, la etiqueta y los estilos se utilizan para resaltar fragmentos de texto de diversas formas. En particular, el resaltado se produce debido al color de fondo, el marco alrededor del texto y el cambio de su color. Tenga en cuenta que como resultado del ajuste del texto, el marco que lo rodea también se movió a otra línea. En muchos casos, esto no se ve muy bien, por lo que puedes desactivar el ajuste de texto mediante espacios en blanco: nowrap.
Para texto que no está rodeado por una etiqueta de línea como Se crea un elemento en línea anónimo. Para el ejemplo anterior, el diagrama de elementos será el siguiente (Fig. 3.26).
Arroz. 3.26. Elementos anónimos en línea
El texto dentro de la etiqueta está marcado en gris en la figura. y las líneas de puntos son elementos anónimos en línea. Para tales elementos, el estilo no se puede establecer directamente; se hereda del padre.
Convertir a elemento en línea
Los elementos en línea se pueden convertir en elementos de bloque usando la propiedad de visualización y su valor de bloque. La acción inversa también es posible a través del valor en línea (ejemplo 3.17).
Ejemplo 3.17. propiedad de visualización
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Nota
Con base en diversos criterios, los principales de los cuales son indicadores de la viabilidad y efectividad de los esfuerzos realizados, podemos decir inequívocamente lo siguiente. Es decir, que lograr los resultados deseados requiere de un enfoque flexible basado en la experiencia y una comprensión profunda del significado de lo anterior.
El resultado del ejemplo se muestra en la Fig. 3.27.
Arroz. 3.27. Reemplazar un elemento de bloque con un elemento en línea
En este ejemplo, la etiqueta de bloque
Aparece en una página web como un elemento en línea. Esto es necesario para que el ancho del fondo y el marco sea igual al ancho del texto mismo, incluidos los márgenes. Como sabes, el ancho de los elementos del bloque no depende del ancho del contenido, por eso tenemos que representar la etiqueta.
Como elemento en línea. En principio, una solución similar sería utilizar en su lugar
Etiqueta .
Tenga en cuenta que convertir un elemento a en línea no le otorga el derecho de romper la secuencia de anidamiento de etiquetas y elementos de bloque de anidamiento dentro de los en línea.
Vlad Merzhevich
Un elemento de bloque es un elemento que aparece como un rectángulo en una página web. Un elemento de este tipo ocupa todo el ancho disponible, la altura del elemento está determinada por su contenido y siempre comienza en una nueva línea. Los elementos del bloque incluyen contenedores.
,
Y etc.
Se permite anidar un elemento de bloque dentro de otro, así como colocar elementos en línea dentro de ellos ( , Por ejemplo). Está prohibido agregar elementos de bloque dentro de elementos integrados (ejemplo 1).
Ejemplo 1: uso de elementos de bloque
Lorem ipsum dolor sit amet...
Ut wisi enim ad minim veniam
En este ejemplo, el párrafo (etiqueta
) se inserta dentro del contenedor
. Por cierto, sería un error hacer lo contrario - añadir en un contenedor
(ut wisi
), desde la etiqueta no se aplica a elementos de bloque.
Anidar etiquetas de bloque dentro de elementos en línea es más común para los principiantes que aún no comprenden la diferencia entre ellos. Además, los navegadores han aprendido a detectar este tipo de errores y a mostrar el código de forma más o menos correcta. Sin embargo, le recomendamos que cumpla con las especificaciones en este asunto para poder mostrar la página web sin errores.
Ancho del elemento de bloque
De forma predeterminada, el ancho del bloque se calcula automáticamente y ocupa todo el espacio disponible. Aquí es necesario aclarar qué se entiende por esto. Por ejemplo, si la etiqueta
Si hay uno en el código del documento, ocupa todo el ancho libre de la ventana del navegador y el ancho del bloque será igual al 100%. Vale la pena poner una etiqueta. dentro de otra, a medida que el ancho de la etiqueta interna comienza a calcularse en relación con su padre, es decir, contenedor externo.
Algunos navegadores interpretan el concepto de ancho de manera bastante vaga, aunque la especificación CSS establece claramente que el ancho es la suma de los siguientes parámetros: el ancho del bloque en sí (ancho), sangrías (margen), campos (relleno) y bordes (borde). . El ejemplo 2 muestra cómo crear una capa que contenga todos estos componentes.
Ejemplo 2: ancho de capa
Ancho
Lorem ipsum dolor sit amet...
Como resultado de este ejemplo, obtendremos una capa con un ancho de 342 píxeles. En la Fig. 1 muestra de qué se compone el ancho de la capa.
Figura 1. Ancho del elemento de bloque
En el caso cuandono se especifica en el código, Internet Explorer toma el valor de la propiedad de ancho como el ancho de todo el bloque.
Veamos otro ejemplo relacionado con el ancho. De forma predeterminada, el ancho de la capa está configurado en automático, esto permite que la capa encaje en la ventana del navegador sin tener en cuenta los valores de los campos establecidos. Si cambia el ancho al 100%, inevitablemente aparecerá una barra de desplazamiento horizontal cuando agregue valores de relleno, margen o borde.
Existen varios enfoques para obtener un resultado universal. El ejemplo 3 demuestra la creación de tres capas, cuyo ancho se determina como porcentaje.
Ejemplo 3. Ancho de capa en porcentaje
Ancho
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
El resultado del ejemplo se muestra en la Fig. 2.
Arroz. 2. Mostrar anchos de capa en el navegador.
El ancho de la primera capa en este ejemplo (capa1) se establece en 100%, lo que da como resultado que se muestre una barra de desplazamiento horizontal. Para la segunda capa (capa2), el ancho también se establece en 100%, pero los márgenes están definidos para el párrafo interior (etiqueta
). Debido a esto, el ancho de la capa será el mismo en todos los navegadores. La tercera capa (layer3) no tiene la propiedad de ancho aplicada en absoluto, por lo que está definida de forma predeterminada: auto. En este caso, la capa ocupará todo el ancho de la ventana del navegador sin franjas horizontales.
La forma de establecer el ancho depende del diseño utilizado y de la elección del desarrollador, pero en cualquier caso es necesario tener en cuenta las características de los elementos del bloque y crear un código universal.
Altura
La situación con la altura de los elementos del bloque es similar a la anchura. El navegador toma el valor de la propiedad de altura como la altura de la capa y le agrega valores de margen, relleno y borde. Si la altura de la capa no se establece explícitamente, se calcula automáticamente en función del volumen del contenido.
Digamos que una capa está configurada con una altura de píxel y el contenido de la capa es claramente mayor que la altura especificada (Ejemplo 4).
Ejemplo 4: altura de capa
Altura
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
El resultado de este ejemplo se muestra en la Fig. 3.
Arroz. 3. Altura del bloque en diferentes navegadores
Se puede ver que el navegador deja la altura sin cambios, por lo que el texto no cabe en el bloque y se superpone a la capa.
Color de fondo
La forma más sencilla de establecer el color de fondo de un elemento es mediante la propiedad de fondo genérica. En este caso, el área determinada por los valores de ancho, alto y relleno se rellena con el fondo (Fig. 4).
Arroz. 4. El área de la capa que se rellena con el color de fondo.
Por tanto, el margen no participa en la formación del área coloreada.
Fronteras
Debido a la diferencia en los enfoques de los navegadores a la hora de formar elementos de bloque, también existe una diferencia en la visualización de los bordes. El navegador Internet Explorer 7 dibuja el marco dentro del bloque y Firefox dibuja el marco fuera. Pero si utilizamos un relleno de fondo, veremos una imagen completamente opuesta (Fig. 5). Y todo porque Firefox (Opera) establece el color de fondo a lo largo del borde exterior del borde e Internet Explorer lo establece a lo largo del borde interior. A partir de la versión 8.0, Internet Explorer ha cambiado el estilo de visualización del marco; se dibuja dentro de un bloque, como en Firefox.
A. Internet Explorer 7
b. Firefox, Internet Explorer 8+
Arroz. 5. Mostrar el marco en los navegadores.
El ejemplo 5 muestra cómo crear código para obtener dicho límite.
Ejemplo 5: marco punteado
Marco
Lorem ipsum dolor sit amet...
Las diferencias en la forma en que los navegadores dibujan los bordes sólo se notan en fondos de colores y líneas de puntos. Para un marco sólido, la apariencia de la capa en los navegadores será casi la misma.
Resumen
Los elementos de bloque actúan como material de construcción principal al diseñar páginas web. Estos elementos se caracterizan por empezar siempre en una nueva línea y ocupar todo el ancho disponible del área en la que se encuentran.
La especificación CSS define que la altura y el ancho de un elemento están determinados no solo por los valores de alto y ancho, sino también por los valores de márgenes, relleno y bordes. Los navegadores a este respecto se dividen en dos partes: algunos apoyan la especificación en este asunto, mientras que otros la ignoran y actúan a su manera. Esto crea dificultades para los desarrolladores que quieren crear páginas web universales. Sólo podemos recomendarle que utilice las propiedades de ancho y alto de forma limitada, ya que de forma predeterminada el navegador utiliza el argumento auto, que fuerza que las dimensiones del elemento se ajusten automáticamente.
HTML ( Lenguaje de marcado de hipertexto) históricamente los elementos se clasificaban como elementos "a nivel de bloque" o como elementos "en línea". Los elementos inline son aquellos que sólo ocupan el espacio delimitado por las etiquetas que definen el elemento, en lugar de interrumpir el flujo del contenido. En este artículo, examinaremos los elementos HTML en línea y en qué se diferencian de los elementos a nivel de bloque.
Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario.
En línea vs. elementos a nivel de bloque: una demostración
Esto se demuestra más fácilmente con un ejemplo sencillo. Primero, algo de CSS simple que usaremos:
Resaltar (color de fondo:#ee3; )
En línea
Veamos el siguiente ejemplo que demuestra un elemento en línea:
La siguiente lapso es un elemento en línea; su trasfondo ha sido coloreado para mostrar tanto el principio como el final de la influencia del elemento en línea.
El siguiente párrafo es un elemento a nivel de bloque;
su fondo ha sido coloreado para mostrar tanto el principio como el final de la influencia del elemento a nivel de bloque.
También se utiliza el CSS (que no se muestra en el modo de lectura estándar):
Cuerpo (margen: 0; relleno: 4px; borde: 1px sólido #333;) .highlight (color de fondo:#ee3;)
Renderizado usando el mismo CSS que antes, obtenemos:
¿Ver la diferencia? El
Element cambia totalmente la disposición del texto, dividiéndolo en tres segmentos: el texto anterior al
Entonces el
"s texto, y finalmente el texto que sigue al
Cambiar niveles de elementos
Puedes cambiar el presentación visual de un elemento usando la propiedad de visualización CSS. Por ejemplo, al cambiar el valor de visualización de "inline" a "block", puede indicarle al navegador que represente el elemento en línea en un cuadro de bloque en lugar de un cuadro en línea, y viceversa. Sin embargo, hacer esto no cambiará la categoría y el modelo de contenido del elemento. Por ejemplo, incluso si la visualización del elemento span se cambia a "block", todavía no permitirá anidar un elemento div dentro de él.
Diferencias conceptuales
En resumen, aquí son los Diferencias conceptuales básicas entre elementos en línea y a nivel de bloque:
Modelo de contenido Generalmente, los elementos en línea pueden contener solo datos y otros elementos en línea. No se pueden colocar elementos de bloque dentro de elementos en línea. Formato De forma predeterminada, los elementos en línea no fuerzan el inicio de una nueva línea en el flujo del documento. Los elementos de bloque, por otro lado, normalmente provocan que se produzca un salto de línea (aunque, como de costumbre, , esto se puede cambiar usando CSS).
Lista de elementos "en línea"
Los siguientes elementos están en línea de forma predeterminada (aunque los elementos de bloque y en línea ya no están definidos en HTML 5, use
Hay dos tipos de elementos en HTML: elementos de bloque y elementos en línea. A continuación aprenderá las características de estos elementos y las diferencias entre ellos, así como las formas de controlarlos mediante reglas CSS.
Elementos de bloque
Los elementos de bloque son la base que se utiliza para diseñar páginas web. Dicho elemento es un rectángulo que, de forma predeterminada, ocupa todo el ancho disponible de la página (a menos que se especifique lo contrario en CSS), y la longitud del elemento depende de su contenido. Un elemento de este tipo siempre comienza en una nueva línea, es decir, se encuentra debajo del elemento anterior. Un elemento de bloque puede contener otros elementos de bloque y en línea.
Ejemplos de elementos de bloque:
, ,
, , etc.
Elementos en línea
A diferencia de un elemento de bloque, un elemento en línea no se ajusta nueva línea, pero se ubica en la misma línea que el elemento anterior. Estos elementos generalmente se encuentran dentro de elementos de bloque y su ancho depende únicamente del contenido y la configuración de CSS. Otra diferencia entre un elemento en línea y un elemento de bloque es que solo puede contener contenido y otros elementos en línea. Los elementos de bloque no se pueden anidar dentro de elementos en línea.
Ejemplos de elementos en línea: , , , , ![]()
etc.
Nota: En HTML5, el orden en el que se anidan las etiquetas no juega ese papel. Los elementos ya no se dividen simplemente en bloque y en línea, sino que se agrupan según su significado y propósito, representando categorías de contenido.
Propiedad de visualización CSS: cambiar el tipo de elemento
Con la ayuda de extremadamente útil. propiedades de visualización En CSS puedes hacer que un elemento de bloque parezca un elemento en línea y viceversa. Para que un elemento de bloque se comporte como un elemento en línea (es decir, que no se traduzca a una nueva línea), es necesario escribir una regla para él:
Pantalla: en línea;
Si desea mostrar un elemento en línea como un elemento de bloque (de modo que haya un salto de línea antes y después del elemento), escriba lo siguiente:
Bloqueo de pantalla;
Acción (display:inline) y (display:block)
También puedes crear un "híbrido": un elemento de bloque con comportamiento como un elemento en minúscula. En este caso, todo el contenido de dichos elementos de bloque se mostrará como de costumbre, pero los bloques se comportarán como elementos en línea, alineándose en una línea tras otra y envolviéndose en una nueva línea solo cuando sea necesario. El margen de colapso en tales casos deja de funcionar. Para convertir un elemento en un elemento de bloque en línea, escriba:
Pantalla: bloque en línea;
Acción (pantalla: bloque en línea)
Más adelante en el tutorial: Propiedad de borde CSS. Aprenderá cómo agregar bordes a los elementos de la página web y qué personalizaciones puede aplicarles usando hojas de estilo en cascada.
En el primer artículo sobre HTML, di una lista de etiquetas que, en mi opinión, un diseñador de diseño necesita conocer. Las etiquetas restantes son, de hecho, redundantes o incluso superfluas, en mi opinión. En este artículo me gustaría hablar de conceptos básicos de html y sobre las etiquetas html, head, title, body, así como div y span. Estas etiquetas, en mi opinión... buena base para empezar a aprender html.
Desafortunadamente, navegadores modernos Son muy leales a los desarrolladores web. Intentan interpretar todo lo que les dan. Etiquetas no cerradas, etiquetas en diferentes registros, etiquetas poco claras, etiquetas colocadas donde no deberían estar, etc. Por ejemplo, personalmente vi un sitio donde el contenedor principal estaba ubicado dentro del cuerpo y la etiqueta del título estaba incluso fuera del contenedor principal. Al mismo tiempo, ¡el sitio parecía normal desde fuera!
Realmente espero que algún día los estándares se vuelvan más estrictos y las páginas mal diseñadas no se muestren correctamente. Es cierto que esto requiere que todos los navegadores procesen html y CSS de la misma manera... Bueno, me dejé llevar.
Como es habitual en estos casos, primero describimos el plan de lección:
- Reglas generales
- Estructura del documento
Reglas generales
Para empezar, vale la pena decir que HTML es un lenguaje bastante leal. existe versión html, cuyo estándar se ha endurecido: xhtml. Intento mantener este estándar. Específicamente, este estándar supone que todas las etiquetas están en minúsculas y cerradas. Incluso los solteros. Cómo se mostrará a continuación. Todos los atributos están escritos en minúsculas y sus valores están encerrados entre doble comillas y tener una designación de la cantidad en la que se mide su valor. Cumpliremos con estas reglas.
Las normas prevén una determinada disposición de determinados elementos. Si un elemento que debería estar ubicado en algún lugar se ubica en un lugar diferente, esto se considera un error. En general, dicho documento no debe procesarse o debe procesarse con un error. Pero los navegadores evitan a los desarrolladores descuidados. Más precisamente, sus usuarios que visitan sitios desarrollados por desarrolladores descuidados.
Ahora sobre las etiquetas. Las etiquetas pueden estar emparejadas o individuales. Las etiquetas emparejadas también se dividen en etiquetas de bloque y en línea. A un par de etiquetas a veces se le llama contenedor.
Como puedes adivinar, las etiquetas emparejadas tienen un par y las etiquetas individuales son independientes. Un par de etiquetas se forma a partir de una etiqueta de apertura y de cierre. Etiquetas individuales se abren y cierran al mismo tiempo.
Contenedor de ejemplo (etiquetas emparejadas):
contenido del contenedor
Ejemplo de etiqueta única
texto de una línea
este texto ya está en otra línea
El ejemplo del contenedor utilizó la construcción.Este es un comentario. Todo lo que está encerrado dentro de dos flechas no es analizado por el navegador y no se muestra en la pantalla. Estos comentarios a veces son muy convenientes de usar al diseñar momentos confusos o para separar partes lógicas del diseño en el código.
Etiquetas en bloque y en línea
La diferencia entre etiquetas de bloque y en línea es que un elemento de bloque tiende a llenar todo el ancho de la pantalla. (a menos que se especifique explícitamente su ancho), e inline ocupa exactamente tanto espacio como su contenido. Además, todo lo que sigue elemento de bloque, se mostrará en una nueva línea, y lo que sigue a la línea en línea se mostrará directamente después de ella. El contenedor div está a nivel de bloque de forma predeterminada y la etiqueta span está en línea. (Sin embargo, este comportamiento se puede cambiar fácilmente usando CSS). Ilustremos el comportamiento de estas etiquetas.
Texto 1. Este texto ocupa todo el ancho de la página.
Este texto ya va DEBAJO del primer texto y también ocupa toda la página.
enteramente. Pero texto rojo, un prisionero
en la etiqueta span, no ajusta el texto que le sigue en una nueva línea y ocupa
exactamente tanto espacio como sea necesario.
Las etiquetas deben seguir lógicamente una tras otra, manteniendo la jerarquía. Al incluir una etiqueta dentro de otra, debe asegurarse de que se respete el orden de las etiquetas de cierre.
Equivocado:
texto
Bien:
texto
Hay una cosa más que quiero mencionar: las etiquetas pueden tener atributos. Un atributo especifica un comportamiento específico o complementa una etiqueta de alguna manera. El atributo se escribe directamente en la etiqueta, separado por un espacio de su nombre, en el formato: ATTRIBUTE_NAME="VALOR[medida]". ATTRIBUT_NAME y VALUE, creo que está claro cuáles son. Una medida es una designación de unidades de medida. Si no existe una unidad de medida, entonces no es necesario inventar una.
Ejemplo de uso de un atributo
Aquí estamos configurando el atributo de altura para el div contenedor. (En realidad, esto se hace mejor usando CSS, pero en en este caso, escribí esto para mostrar cómo se vería). Los atributos sólo se pueden asignar en etiquetas de apertura. El número de espacios no importa. Puede poner espacios entre el nombre de la etiqueta y el atributo, entre el nombre del atributo y el signo igual, y entre el signo igual y las comillas. ¡Puedes poner espacios entre comillas, pero no entre la cantidad y sus unidades de medida! Las comillas no tienen que ser dobles; puedes usar “comillas simples”, pero sólo en pares. La opción "comillas" no funcionará. En este caso, la comilla simple, así como todo lo que sigue, se interpretará como parte del valor del atributo.
Creo que eso es todo lo que quería decir, básicamente. ¡Vamos a por ello!
Estructura del documento
Lo que se describirá a continuación entra precisamente en la categoría de cumplimiento obligatorio. Así que no creas que si “se muestra así”, entonces es normal. No es normal.
Cada documento debe estar etiquetado. Estas etiquetas, como puede ver, están emparejadas. Así que no olvide abrir dicha etiqueta al principio del documento y cerrarla al final. En teoría, todo lo que viene después de la etiqueta de cierre.
ut wisi
), desde la etiqueta no se aplica a elementos de bloque.Anidar etiquetas de bloque dentro de elementos en línea es más común para los principiantes que aún no comprenden la diferencia entre ellos. Además, los navegadores han aprendido a detectar este tipo de errores y a mostrar el código de forma más o menos correcta. Sin embargo, le recomendamos que cumpla con las especificaciones en este asunto para poder mostrar la página web sin errores.
Ancho del elemento de bloque
De forma predeterminada, el ancho del bloque se calcula automáticamente y ocupa todo el espacio disponible. Aquí es necesario aclarar qué se entiende por esto. Por ejemplo, si la etiqueta
Algunos navegadores interpretan el concepto de ancho de manera bastante vaga, aunque la especificación CSS establece claramente que el ancho es la suma de los siguientes parámetros: el ancho del bloque en sí (ancho), sangrías (margen), campos (relleno) y bordes (borde). . El ejemplo 2 muestra cómo crear una capa que contenga todos estos componentes.
Ejemplo 2: ancho de capa
Como resultado de este ejemplo, obtendremos una capa con un ancho de 342 píxeles. En la Fig. 1 muestra de qué se compone el ancho de la capa.
Figura 1. Ancho del elemento de bloque
En el caso cuandono se especifica en el código, Internet Explorer toma el valor de la propiedad de ancho como el ancho de todo el bloque.
Veamos otro ejemplo relacionado con el ancho. De forma predeterminada, el ancho de la capa está configurado en automático, esto permite que la capa encaje en la ventana del navegador sin tener en cuenta los valores de los campos establecidos. Si cambia el ancho al 100%, inevitablemente aparecerá una barra de desplazamiento horizontal cuando agregue valores de relleno, margen o borde.
Existen varios enfoques para obtener un resultado universal. El ejemplo 3 demuestra la creación de tres capas, cuyo ancho se determina como porcentaje.
Ejemplo 3. Ancho de capa en porcentaje
Lorem ipsum dolor sit amet...
El resultado del ejemplo se muestra en la Fig. 2.
Arroz. 2. Mostrar anchos de capa en el navegador.
El ancho de la primera capa en este ejemplo (capa1) se establece en 100%, lo que da como resultado que se muestre una barra de desplazamiento horizontal. Para la segunda capa (capa2), el ancho también se establece en 100%, pero los márgenes están definidos para el párrafo interior (etiqueta
). Debido a esto, el ancho de la capa será el mismo en todos los navegadores. La tercera capa (layer3) no tiene la propiedad de ancho aplicada en absoluto, por lo que está definida de forma predeterminada: auto. En este caso, la capa ocupará todo el ancho de la ventana del navegador sin franjas horizontales.
La forma de establecer el ancho depende del diseño utilizado y de la elección del desarrollador, pero en cualquier caso es necesario tener en cuenta las características de los elementos del bloque y crear un código universal.
Altura
La situación con la altura de los elementos del bloque es similar a la anchura. El navegador toma el valor de la propiedad de altura como la altura de la capa y le agrega valores de margen, relleno y borde. Si la altura de la capa no se establece explícitamente, se calcula automáticamente en función del volumen del contenido.
Digamos que una capa está configurada con una altura de píxel y el contenido de la capa es claramente mayor que la altura especificada (Ejemplo 4).
Ejemplo 4: altura de capa
El resultado de este ejemplo se muestra en la Fig. 3.
Arroz. 3. Altura del bloque en diferentes navegadores
Se puede ver que el navegador deja la altura sin cambios, por lo que el texto no cabe en el bloque y se superpone a la capa.
Color de fondo
La forma más sencilla de establecer el color de fondo de un elemento es mediante la propiedad de fondo genérica. En este caso, el área determinada por los valores de ancho, alto y relleno se rellena con el fondo (Fig. 4).
Arroz. 4. El área de la capa que se rellena con el color de fondo.
Por tanto, el margen no participa en la formación del área coloreada.
Fronteras
Debido a la diferencia en los enfoques de los navegadores a la hora de formar elementos de bloque, también existe una diferencia en la visualización de los bordes. El navegador Internet Explorer 7 dibuja el marco dentro del bloque y Firefox dibuja el marco fuera. Pero si utilizamos un relleno de fondo, veremos una imagen completamente opuesta (Fig. 5). Y todo porque Firefox (Opera) establece el color de fondo a lo largo del borde exterior del borde e Internet Explorer lo establece a lo largo del borde interior. A partir de la versión 8.0, Internet Explorer ha cambiado el estilo de visualización del marco; se dibuja dentro de un bloque, como en Firefox.
A. Internet Explorer 7
b. Firefox, Internet Explorer 8+
Arroz. 5. Mostrar el marco en los navegadores.
El ejemplo 5 muestra cómo crear código para obtener dicho límite.
Ejemplo 5: marco punteado
Las diferencias en la forma en que los navegadores dibujan los bordes sólo se notan en fondos de colores y líneas de puntos. Para un marco sólido, la apariencia de la capa en los navegadores será casi la misma.
Resumen
Los elementos de bloque actúan como material de construcción principal al diseñar páginas web. Estos elementos se caracterizan por empezar siempre en una nueva línea y ocupar todo el ancho disponible del área en la que se encuentran.
La especificación CSS define que la altura y el ancho de un elemento están determinados no solo por los valores de alto y ancho, sino también por los valores de márgenes, relleno y bordes. Los navegadores a este respecto se dividen en dos partes: algunos apoyan la especificación en este asunto, mientras que otros la ignoran y actúan a su manera. Esto crea dificultades para los desarrolladores que quieren crear páginas web universales. Sólo podemos recomendarle que utilice las propiedades de ancho y alto de forma limitada, ya que de forma predeterminada el navegador utiliza el argumento auto, que fuerza que las dimensiones del elemento se ajusten automáticamente.
HTML ( Lenguaje de marcado de hipertexto) históricamente los elementos se clasificaban como elementos "a nivel de bloque" o como elementos "en línea". Los elementos inline son aquellos que sólo ocupan el espacio delimitado por las etiquetas que definen el elemento, en lugar de interrumpir el flujo del contenido. En este artículo, examinaremos los elementos HTML en línea y en qué se diferencian de los elementos a nivel de bloque.
Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario.
En línea vs. elementos a nivel de bloque: una demostración
Esto se demuestra más fácilmente con un ejemplo sencillo. Primero, algo de CSS simple que usaremos:
Resaltar (color de fondo:#ee3; )
En línea
Veamos el siguiente ejemplo que demuestra un elemento en línea:
elemento a nivel de bloque;
su fondo ha sido coloreado para mostrar tanto el principio como el final de la influencia del elemento a nivel de bloque.También se utiliza el CSS (que no se muestra en el modo de lectura estándar):
Cuerpo (margen: 0; relleno: 4px; borde: 1px sólido #333;) .highlight (color de fondo:#ee3;)
Renderizado usando el mismo CSS que antes, obtenemos:
¿Ver la diferencia? El
Element cambia totalmente la disposición del texto, dividiéndolo en tres segmentos: el texto anterior al
Entonces el
"s texto, y finalmente el texto que sigue al
Cambiar niveles de elementos
Puedes cambiar el presentación visual de un elemento usando la propiedad de visualización CSS. Por ejemplo, al cambiar el valor de visualización de "inline" a "block", puede indicarle al navegador que represente el elemento en línea en un cuadro de bloque en lugar de un cuadro en línea, y viceversa. Sin embargo, hacer esto no cambiará la categoría y el modelo de contenido del elemento. Por ejemplo, incluso si la visualización del elemento span se cambia a "block", todavía no permitirá anidar un elemento div dentro de él.
Diferencias conceptuales
En resumen, aquí son los Diferencias conceptuales básicas entre elementos en línea y a nivel de bloque:
Modelo de contenido Generalmente, los elementos en línea pueden contener solo datos y otros elementos en línea. No se pueden colocar elementos de bloque dentro de elementos en línea. Formato De forma predeterminada, los elementos en línea no fuerzan el inicio de una nueva línea en el flujo del documento. Los elementos de bloque, por otro lado, normalmente provocan que se produzca un salto de línea (aunque, como de costumbre, , esto se puede cambiar usando CSS).
Lista de elementos "en línea"
Los siguientes elementos están en línea de forma predeterminada (aunque los elementos de bloque y en línea ya no están definidos en HTML 5, use
Hay dos tipos de elementos en HTML: elementos de bloque y elementos en línea. A continuación aprenderá las características de estos elementos y las diferencias entre ellos, así como las formas de controlarlos mediante reglas CSS.
Elementos de bloque
Los elementos de bloque son la base que se utiliza para diseñar páginas web. Dicho elemento es un rectángulo que, de forma predeterminada, ocupa todo el ancho disponible de la página (a menos que se especifique lo contrario en CSS), y la longitud del elemento depende de su contenido. Un elemento de este tipo siempre comienza en una nueva línea, es decir, se encuentra debajo del elemento anterior. Un elemento de bloque puede contener otros elementos de bloque y en línea.
Ejemplos de elementos de bloque:
,
- ,
- Reglas generales
- Estructura del documento
- ,
etc.
Elementos en línea
A diferencia de un elemento de bloque, un elemento en línea no se ajusta nueva línea, pero se ubica en la misma línea que el elemento anterior. Estos elementos generalmente se encuentran dentro de elementos de bloque y su ancho depende únicamente del contenido y la configuración de CSS. Otra diferencia entre un elemento en línea y un elemento de bloque es que solo puede contener contenido y otros elementos en línea. Los elementos de bloque no se pueden anidar dentro de elementos en línea.
Ejemplos de elementos en línea: , , , , etc.
Nota: En HTML5, el orden en el que se anidan las etiquetas no juega ese papel. Los elementos ya no se dividen simplemente en bloque y en línea, sino que se agrupan según su significado y propósito, representando categorías de contenido.
Propiedad de visualización CSS: cambiar el tipo de elemento
Con la ayuda de extremadamente útil. propiedades de visualización En CSS puedes hacer que un elemento de bloque parezca un elemento en línea y viceversa. Para que un elemento de bloque se comporte como un elemento en línea (es decir, que no se traduzca a una nueva línea), es necesario escribir una regla para él:
Pantalla: en línea;
Si desea mostrar un elemento en línea como un elemento de bloque (de modo que haya un salto de línea antes y después del elemento), escriba lo siguiente:
Bloqueo de pantalla;
Acción (display:inline) y (display:block)
También puedes crear un "híbrido": un elemento de bloque con comportamiento como un elemento en minúscula. En este caso, todo el contenido de dichos elementos de bloque se mostrará como de costumbre, pero los bloques se comportarán como elementos en línea, alineándose en una línea tras otra y envolviéndose en una nueva línea solo cuando sea necesario. El margen de colapso en tales casos deja de funcionar. Para convertir un elemento en un elemento de bloque en línea, escriba:
Pantalla: bloque en línea;
Acción (pantalla: bloque en línea)
Más adelante en el tutorial: Propiedad de borde CSS. Aprenderá cómo agregar bordes a los elementos de la página web y qué personalizaciones puede aplicarles usando hojas de estilo en cascada.
En el primer artículo sobre HTML, di una lista de etiquetas que, en mi opinión, un diseñador de diseño necesita conocer. Las etiquetas restantes son, de hecho, redundantes o incluso superfluas, en mi opinión. En este artículo me gustaría hablar de conceptos básicos de html y sobre las etiquetas html, head, title, body, así como div y span. Estas etiquetas, en mi opinión... buena base para empezar a aprender html.
Desafortunadamente, navegadores modernos Son muy leales a los desarrolladores web. Intentan interpretar todo lo que les dan. Etiquetas no cerradas, etiquetas en diferentes registros, etiquetas poco claras, etiquetas colocadas donde no deberían estar, etc. Por ejemplo, personalmente vi un sitio donde el contenedor principal estaba ubicado dentro del cuerpo y la etiqueta del título estaba incluso fuera del contenedor principal. Al mismo tiempo, ¡el sitio parecía normal desde fuera!
Realmente espero que algún día los estándares se vuelvan más estrictos y las páginas mal diseñadas no se muestren correctamente. Es cierto que esto requiere que todos los navegadores procesen html y CSS de la misma manera... Bueno, me dejé llevar.
Como es habitual en estos casos, primero describimos el plan de lección:
Reglas generales
Para empezar, vale la pena decir que HTML es un lenguaje bastante leal. existe versión html, cuyo estándar se ha endurecido: xhtml. Intento mantener este estándar. Específicamente, este estándar supone que todas las etiquetas están en minúsculas y cerradas. Incluso los solteros. Cómo se mostrará a continuación. Todos los atributos están escritos en minúsculas y sus valores están encerrados entre doble comillas y tener una designación de la cantidad en la que se mide su valor. Cumpliremos con estas reglas.
Las normas prevén una determinada disposición de determinados elementos. Si un elemento que debería estar ubicado en algún lugar se ubica en un lugar diferente, esto se considera un error. En general, dicho documento no debe procesarse o debe procesarse con un error. Pero los navegadores evitan a los desarrolladores descuidados. Más precisamente, sus usuarios que visitan sitios desarrollados por desarrolladores descuidados.
Ahora sobre las etiquetas. Las etiquetas pueden estar emparejadas o individuales. Las etiquetas emparejadas también se dividen en etiquetas de bloque y en línea. A un par de etiquetas a veces se le llama contenedor.
Como puedes adivinar, las etiquetas emparejadas tienen un par y las etiquetas individuales son independientes. Un par de etiquetas se forma a partir de una etiqueta de apertura y de cierre. Etiquetas individuales se abren y cierran al mismo tiempo.
Contenedor de ejemplo (etiquetas emparejadas):
contenido del contenedor
Ejemplo de etiqueta única
texto de una línea
este texto ya está en otra línea
El ejemplo del contenedor utilizó la construcción.Este es un comentario. Todo lo que está encerrado dentro de dos flechas no es analizado por el navegador y no se muestra en la pantalla. Estos comentarios a veces son muy convenientes de usar al diseñar momentos confusos o para separar partes lógicas del diseño en el código.
Etiquetas en bloque y en línea
La diferencia entre etiquetas de bloque y en línea es que un elemento de bloque tiende a llenar todo el ancho de la pantalla. (a menos que se especifique explícitamente su ancho), e inline ocupa exactamente tanto espacio como su contenido. Además, todo lo que sigue elemento de bloque, se mostrará en una nueva línea, y lo que sigue a la línea en línea se mostrará directamente después de ella. El contenedor div está a nivel de bloque de forma predeterminada y la etiqueta span está en línea. (Sin embargo, este comportamiento se puede cambiar fácilmente usando CSS). Ilustremos el comportamiento de estas etiquetas.
Texto 1. Este texto ocupa todo el ancho de la página.
Este texto ya va DEBAJO del primer texto y también ocupa toda la página.
enteramente. Pero texto rojo, un prisionero
en la etiqueta span, no ajusta el texto que le sigue en una nueva línea y ocupa
exactamente tanto espacio como sea necesario.
Las etiquetas deben seguir lógicamente una tras otra, manteniendo la jerarquía. Al incluir una etiqueta dentro de otra, debe asegurarse de que se respete el orden de las etiquetas de cierre.
Equivocado:
Bien:
Hay una cosa más que quiero mencionar: las etiquetas pueden tener atributos. Un atributo especifica un comportamiento específico o complementa una etiqueta de alguna manera. El atributo se escribe directamente en la etiqueta, separado por un espacio de su nombre, en el formato: ATTRIBUTE_NAME="VALOR[medida]". ATTRIBUT_NAME y VALUE, creo que está claro cuáles son. Una medida es una designación de unidades de medida. Si no existe una unidad de medida, entonces no es necesario inventar una.
Aquí estamos configurando el atributo de altura para el div contenedor. (En realidad, esto se hace mejor usando CSS, pero en en este caso, escribí esto para mostrar cómo se vería). Los atributos sólo se pueden asignar en etiquetas de apertura. El número de espacios no importa. Puede poner espacios entre el nombre de la etiqueta y el atributo, entre el nombre del atributo y el signo igual, y entre el signo igual y las comillas. ¡Puedes poner espacios entre comillas, pero no entre la cantidad y sus unidades de medida! Las comillas no tienen que ser dobles; puedes usar “comillas simples”, pero sólo en pares. La opción "comillas" no funcionará. En este caso, la comilla simple, así como todo lo que sigue, se interpretará como parte del valor del atributo.
Creo que eso es todo lo que quería decir, básicamente. ¡Vamos a por ello!
Estructura del documento
Lo que se describirá a continuación entra precisamente en la categoría de cumplimiento obligatorio. Así que no creas que si “se muestra así”, entonces es normal. No es normal.
Cada documento debe estar etiquetado. Estas etiquetas, como puede ver, están emparejadas. Así que no olvide abrir dicha etiqueta al principio del documento y cerrarla al final. En teoría, todo lo que viene después de la etiqueta de cierre.