Consejo rápido Utilizando el flujo normal de documentos

Los diseños pueden ser una de las cosas más difíciles de dominar cuando se trata de CSS, aunque son sin duda uno de los más importantes. En este Consejo rápido veremos el flujo normal de documentos y cómo puede ayudarlo con sus diseños..


Introducción

Antes de explicar qué significa el flujo normal de documentos, debo explicar los diferentes tipos de elementos html y cómo se muestran de forma predeterminada..

Vamos a concentrarnos en los dos tipos principales de elementos HTML, a saber, los elementos de "nivel de bloque" y "en línea". Desde el advenimiento de HTML5, tenemos una categorización de elementos más específica (fraseo, flujo y seccionamiento), aunque los navegadores aún se apoyan en las definiciones de bloque y en línea..

Los elementos en línea incluyen elementos como etiquetas de anclaje, imágenes y tramos. Estos elementos a menudo definen el texto y los datos, como convertir las palabras Haga clic aquí en un enlace. Por defecto, los elementos en línea se muestran ... bueno, en línea. Lo que significa que puede tener múltiples elementos en una línea, hasta que se alcance el ancho del elemento contenedor, en cuyo punto continúan en la siguiente línea.

 

Este es un ejemplo de varios elementos en línea. todo contenido dentro de un párrafo incluyendo un ancla un lapso y una etiqueta de énfasis. Cambia el tamaño del navegador y verás cómo un navegador maneja estos elementos en línea de manera predeterminada. Así es, todo se muestra en una línea y se envuelve cuando no hay más espacio.

Vea esta demostración de elemento en línea en acción.

Elementos de nivel de bloque sin embargo, como divs y párrafos, más nuevos miembros de HTML5 como artículo y sección, Tienen propiedades muy diferentes por defecto. Los elementos de nivel de bloque normalmente, pero no siempre, contendrán elementos en línea u otros elementos de nivel de bloque. Piense en ellos como el elemento "estructural" de los dos.

Los navegadores (por defecto) darán formato a los elementos a nivel de bloque con un salto de línea antes y después. En otras palabras, los elementos a nivel de bloque siempre comenzarán en una nueva línea (apilarse como bloques) a menos que tengan un estilo diferente.


Estilo

En todos los casos, podemos modificar la forma en que se muestra un elemento utilizando la propiedad de visualización de CSS:

 elemento display: bloque; / * o en línea, por ejemplo * /

Estas características de visualización también dictan qué más podemos diseñar. Por ejemplo, somos libres de determinar el ancho y la altura de un elemento a nivel de bloque, pero no así con los elementos en línea. El relleno y los márgenes se pueden aplicar a los elementos en línea, pero no influirán en las dimensiones del elemento contenedor. Echa un vistazo a este ejemplo para ver lo que quiero decir:


Los demás

Además de los bloques comunes y los atributos de visualización en línea, hay algunos ejemplos encontrados con menos frecuencia. Por ejemplo, ¿qué sucede si desea mostrar un elemento en línea, pero diseñarlo como un elemento de nivel de bloque? Introducir el bloque en linea valor. Los elementos de bloque en línea conservan propiedades como el ancho, la altura, el margen y el relleno, ya que se aplican a los elementos de nivel de bloque, al tiempo que mantienen las cualidades estructurales de un elemento en línea..

Inline-Block es una alternativa potencial a los elementos flotantes, pero ciertamente no está exenta de problemas en estas circunstancias.

Otro valor de visualización, que no se usa tan bien es lista de elementos, Que hace exactamente lo que dice en la lata. Cada elemento con el valor de elemento de lista aplicado se muestra verticalmente, como cabría esperar en una lista, pero también tienen viñetas junto a ellos. Esto es útil para listar datos, es decir, una lista de nombres, y es lógicamente cómo los elementos de la lista como estos:

 
  • Charles Mahogany Biggins
  • Tiggy Wiggins Hortensia
  • Foxy Bumpkins Numpty

se muestran de forma predeterminada.

Finalmente, el último valor de visualización que vale la pena mencionar es 'ninguno'. ¿Puedes adivinar lo que hace? Así es, cualquier elemento que tenga su propiedad de visualización configurada en "ninguno" simplemente no aparece en la página; es visualmente (junto con todos los elementos que contiene) eliminado del documento. El marcado de ese elemento aún se envía al navegador, pero no genera un cuadro y está oculto a la vista, ya que los lectores de pantalla tampoco lo captarán. No ocupa espacio alguno, por lo que otros elementos pueden ocupar su lugar..


Entonces, ¿qué es el flujo normal de documentos??

Es cómo se presenta una página cuando no se le hace nada con respecto al estilo estructural..

Con lo anterior en mente, ¿qué es exactamente el flujo normal de documentos? Es cómo se presenta una página cuando no le hace nada con respecto al estilo estructural. Los navegadores muestran el contenido en el orden en que se encuentra; Lo primero primero, procediendo contenido más abajo.

Cuando las personas comienzan a diseñar web, a menudo están ansiosas por abordar todo tipo de trucos sofisticados, sin aprender lo básico y lo básico. Si puede entender el flujo normal de documentos, sus diseños web serán mejores para él!


Ejercicio: El marcado

Vamos a empezar a hacer una galería de fotos simple con CSS muy básico. Rápidamente hice un archivo html para comenzar, después de todo, nos concentramos principalmente en el estilo. Copia el código de abajo en tu editor de texto y te explicaré lo que hay allí.

    Flujo normal de documentos     

Introducción al flujo normal de documentos.

Bienvenido a mi galería de fotos!

Soy el hombre sin nombre, Zapp Brannigan! Bender, ser Dios no es fácil. Si haces demasiado, las personas dependen de ti y, si no haces nada, pierden la esperanza. Tienes que usar un toque ligero. Como un petardo, o un carterista. Oye, adivina a qué estás accesorios. Leela, Bender, nos vamos a asaltar las tumbas. También Zoidberg. ¡Oh querido! Ella está atrapada en un bucle infinito, ¡y él es un idiota! Bueno eso es amor para ti.

¿Puedo usar la pistola? ¡Oh no! ¡El profesor me pegará! Pero si Zoidberg lo 'arregla'… entonces tal vez regalos! ¡Freír! ¡Deja de hacer lo correcto, idiota! ¿Quién es lo suficientemente valiente como para volar en algo que todos seguimos llamando una esfera de la muerte? No he sentido mucho de nada desde que murió mi conejillo de indias.

Hay un bloque css vacío en la parte superior. Aquí es donde comenzaremos a diseñar. Debajo hay un enlace condicional al script HTML5 Shiv que ayudará a Internet Explorer a reconocer y mostrar correctamente los elementos HTML5. Debajo de eso, la etiqueta de cuerpo obligatorio. Dentro de la etiqueta del cuerpo está el contenedor para toda la página, y también uno para la galería de fotos. He usado placekitten para obtener imágenes de marcador de posición y Fillerama para el texto de relleno. Así que eso es todo.

Bien, ahora solo para demostrar cómo funciona el flujo de documentos normal, eche un vistazo a la página que acaba de crear. Justo como es de esperar, ¿verdad? Las imágenes se muestran en una línea, hasta que se llena el ancho del elemento padre, en este caso la figura (establecida en el 100% de la ventana gráfica, pero probablemente con algunos márgenes por defecto). Y aunque todavía no puede verlo, todos los elementos de nivel de bloque, como el div, la figura y el artículo, están en su propia línea..

Este es el flujo normal de documentos en acción. Ahora, simplemente redimensiona el navegador por un segundo. Sí, es fluido! Bueno tal vez no completamente como hemos llegado a entender, las imágenes conservan sus dimensiones independientemente de la ventana gráfica. Aún así, sus diseños siempre serán fluidos por defecto.


Ejercicio: El CSS básico

Solo para demostrar que no estoy hablando de elementos a nivel de bloque, agreguémosles algunos colores de fondo. En su bloque de código CSS en la parte superior del archivo HTML, agregue esto:

 .contenedor fondo: # f2f2f2;  articulo fondo: # 8B0000; 

Ahora, después de agregar algunos colores de fondo, echa un vistazo al resultado. Debe ser evidente en cuanto a cómo se muestran los elementos a nivel de bloque.


Ejercicio: El diseño CSS

El estilo a continuación solo contiene las propiedades CSS del modelo de caja (ancho, margen, relleno, etc.), sin embargo, muestra cómo muy poco CSS puede crear diseños sólidos..

Reemplaza el CSS que ya tienes, para esto:

 .contenedor ancho: 65%; margen: 0 auto; fondo: # f2f2f2;  figure img padding-left: 10px;  h1 font-family: Verdana, Ginebra, Arial, Helvetica, sans-serif; color: # 8B0000; relleno-izquierda: 10px;  articulo fondo: # 8B0000; color: # f2f2f2; relleno: 10px; 

En este CSS hemos designado el ancho del contenedor al 65%. También podríamos haber utilizado un valor de píxel fijo, pero los porcentajes conservan la naturaleza fluida del documento y demuestran el flujo del documento de manera más efectiva. También hemos centrado la página utilizando margen: 0 auto.

El resto es todo sobre estética. He agregado un poco de relleno para darle a todo un respiro, especificé las fuentes y los colores de las fuentes, eso es todo.

Guarda ese documento y visualízalo en tu navegador..

Siempre que estoy trabajando en un proyecto, siempre considero cómo se vería en Flujo de documentos normal. Esto me permite pensar en cómo puedo mejorarlo con la menor cantidad de CSS posible..


Conclusión

Usando los principios que hemos aprendido hoy, intente construir sus propios ejemplos. Encontrarás que (estructuralmente) puedes lograr mucho antes de entrar en los aspectos técnicos de flotadores y posicionamiento.


Recursos adicionales

  • Elementos en línea en la red de desarrolladores de Mozilla
  • Elementos de nivel de bloque en la red de desarrolladores de Mozilla
  • Modelo de formato visual por W3C
  • La declaración de visualización en QuirksMode
  • Pantalla CSS: bloque en línea: por qué oscila y por qué chupa por Robert Nyman
  • ¿Cuál es el trato con la pantalla: Inline-Block? por Josh Johnson
  • No use display: none para ocultar visualmente el contenido destinado a lectores de pantalla en 456 Berea St.