Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Borrador
Esta página no está completa.

Llegados a este punto, hemos examinado los fundamentos básicos de CSS: cómo dar estilo al texto y cómo manipular las cajas que incluyen tu contenido. Llegó el momento de explorar cómo colocar tus cajas en el lugar que elijas con respecto a la ventana principal y el resto de cajas. Hemos cubierto ya los prerrequisitos necesarios, así que vamos a sumergirnos en la maquetación CSS, fijándonos en diferentes configuraciones de visualización, métodos de maquetación tradicionales que implican floats y posicionamiento, así como a nuevas herramientas de maquetación en voga, como flexbox.

Prerrequisitos

Antes de comenzar este módulo, ya deberías:

  1. Estar familiarizado con HTML, como se expone en el módulo Introduction to HTML.
  2. Sentirte cómodo con los fundamentos de CSS, que se discuten en   Introduction to CSS.
  3. Entender como diseñar cajas style boxes.

Nota: Si estás trabajando en un dispositivo donde no tengas la posibilidad de crear tus propios archivos, puedes probar la mayoría de los ejemplos de código en un programa online como JSBin o Thimble.

Guías

Estos artículos te proporcionarán instrucciones sobre las herramientas y técnicas básicas de maquetación disponibles en CSS.

Introducción a la maquetación CSS
En este artículo repasaremos algunas de las características de la maquetación con CSS que ya hemos tratado en módulos previos, como los diferentes valores de display ; e introduciremos algunos de los conceptos que estudiaremos a lo largo del módulo.
Floats
Inicialmente utilizado para imágenes flotantes dentro de bloques de texto, la propiedad float se ha convertido en una de las herramientas más utilizadas para crear maquetaciones de varias columnas en páginas web. Este articulo explica cómo.
Positioning
El posicionamiento te permite sacar elementos del flujo normal de maquetación del documento para hacer que se comporten de manera diferente, p.ej: colocando unos encima de otros, o fijándolos a un lugar de la ventana principal. Este artículo explica los diferentes valores para  position y cómo utilizarlos.
Practical positioning examples
Una vez cubiertas las nociones básicas de posicionamiento en el artículo anterior, vamos ahora a construir un par de ejemplos reales, para explicar las cosas que puedes hacer con el posicionamiento.
Flexbox
Flexbox  es una muy reciente tecnología que, soportada ya por numerosos navegadores, está lista para su uso generalizado. Flexbox proporciona las herramientas necesarias para crear rápidamente maquetaciones flexibles y complejas, así como otras funcionalidades que tradicionalmente eran de difícil implementación con CSS. Este artículo explica su funcionamiento básico.
Grids
Los sistemas de cuadrícula son otra funcionalidad muy utilizada para la maquetación CSS, que tiende a ser implementada mediante floats u otras funciones de maquetación. Visualizas tu maquetación como un número fijo de columnas donde vas incluyendo tu contenido. En este artículo exploraremos la idea básica detrás de un sistema de cuadrícula, y terminaremos experimentando con CSS Grid, una incipiente nueva característica que permite diseñar una cuadricula Web con gran facilidad.

Ejercicios

Los siguientes ejercicicios comprobarán tu habilidad para maquetar páginas web con CSS.

Creando una maquetación de varias columnas flexibles
Este ejercicio comprobará tu habilidad par crear una maquetación multicolumna, con alguna que otra característica interesante.
Creando un widget fijo de control
Este ejercicio pone a prueba tu entendimiento sobre el posicionamiento, proponiéndote crear un widget de control con posición fija, que permitirá al usuario acceder a los controles de una aplicación Web, independientemente de dónde se hubiera desplazado en la página.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: untilbit, pantuflo, chrisdavidmills
Última actualización por: untilbit,