sobre anclas web

Modelo de cajas
El modelo de cajas o “box model” es seguramente la característica más importante del lenguaje de hojas de
estilos CSS, ya que condiciona el diseño de todas las páginas web.

El "box model" es el comportamiento de CSS que hace que todos los elementos incluidos en
una página HTML se representen mediante cajas rectangulares. CSS permite controlar el aspecto de todas las
cajas.El diseño de cualquier página HTML está compuesto por cajas rectangulares.
CSS permite definir la altura y el ancho de cada caja, el margen existente entre cajas y el
espacio de relleno interior que muestra cada caja. Además, CSS permite controlar la forma en la que se
visualizan las cajas: se pueden ocultar, desplazar respecto de su posición original y fijarlas en una posición
específicadentro del documento.
Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva
caja rectangular que encierra los contenidos de ese elemento.
La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:

Cada etiqueta en html es una caja

Modelo de caja
Los navegadores crean y colocan lascajas de
forma automática, pero CSS permite modificar
todas sus características. Cada una de las cajas
está formada por seis partes, tal y como muestra
la imagen
Esquema utilizado con permiso de
http://www.hicksdesign.co.uk/boxmodel/)

Página 1

Ell modelo de caja es uno de los pilares de CSS e indica cómo los elementos se muestran e
interactúan entre sí.

La mayoría de cajas de laspáginas web no son visibles a simple vista, porque no muestran ningún color de
fondo ni ningún borde.

Elementos de la caja
Cada elemento en la página se considera una caja rectangular formada por el contenido,
padding, border, imagen de fondo, color de fondo y margin del elemento.
Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario
son lassiguientes:
: Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto
de una lista de elementos, etc.)
.: Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
.: Borde (border): línea que encierra completamente el contenido y su relleno.
.: Imagen de fondo (background image): imagen que se muestra por detrásdel contenido y el espacio de relleno.
.: Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
.: Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno o el margen se muestra
el color o imagen de fondo (si estándefinidos).
Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza.
No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas
transparentes, también se visualiza el color de fondo. Combinando imágenes transparentes y colores de fondo se
pueden lograr efectos gráficos muy interesantes.
Ancho deuna caja
La propiedad CSS que controla el ancho de los elementos se denomina width.
La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su
elemento padre, es decir, del elemento que lo contiene.
El valor inherit indica que la anchura del elemento se hereda de su elemento padre.
El valor auto, que es el que se utiliza si no seestablece de forma explícita un valor a esta propiedad, indica que el
navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio
disponible en la página

Alto
La propiedad CSS que controla la altura de los elementos se denomina height.
Al igual que sucede con width, la propiedad height no admite valores negativos.
Si se indica un porcentaje,...