Implementación de los elementos en CSS en la definición de la apariencia de los elementos que integran las páginas web

Implementación de los elementos en CSS en la definición de la apariencia de los elementos que integran las páginas web

o Boxmodel:
El modelo de cajas o "boxmodel" 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 modelo de cajas es el comportamiento de CSS que hace que todos los elementos de laspáginas se representen mediante cajas rectangulares.
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.

o Anchura y altura:
La anchura y altura de un elemento no solamente se calculan teniendo en cuenta sus propiedades width yheight. El margen, el relleno y los bordesestablecidos a un elemento determinan la anchura y altura final del elemento. En el siguiente ejemplo se muestran los estilos CSS de un elemento:
Div {
Width: 300px;
Padding-left: 50px;
Padding-right: 50px;
Margin-left: 30px;
Margin-right: 30px;
Border: 10px solid black;
}
La anchura total con la que se muestra el elemento no son los 300 píxel indicados en la propiedad width, sino que tambiénse añaden todos sus márgenes, rellenos y bordes:

o Margen y relleno:
Empezaremos realizando una definición de conceptos:
a) Contenido de un elemento HTML es aquello que se pretende mostrar al visualizar ese elemento: puede ser un texto, una imagen o quizás otros elementos como un objeto reproductor de sonido o un mapa.
b) Borde: es el perímetro que engloba el contenido y el posible relleno(en inglés padding) entre el borde y el contenido.
c) Relleno (padding): es el espacio transparente que se puede dejar, opcionalmente, entre el contenido y el borde del elemento. El relleno no tiene color (pero permite ver el color de fondo).
d) Margen: es el espacio transparente que se puede dejar, opcionalmente, entre el borde del elemento y el borde de otras cajas adyacentes. El margen notiene color (pero permite ver el color de fondo).


o Bordes:
Es el perímetro que engloba el contenido y el posible relleno (en inglés padding) entre el borde y el contenido

o Fondo:
El box model es el fondo de la caja del elemento. El fondo puede ser un color simple o una imagen. El fondo solamente se visualiza en el área ocupada por el contenido y su relleno, ya que el color de los bordesse controla directamente desde los bordes y las zonas de los márgenes siempre son transparentes.
Para establecer un color o imagen de fondo en la página entera, se debe establecer un fondo al elemento.
o Posicionamiento y visualización:
Cuando los navegadores descargan el contenido HTML y CSS de las páginas web, aplican un procesamiento muy complejo antes de mostrar las páginas en la pantalladel usuario.
Para cumplir con el modelo de cajas presentado en el capítulo anterior, los navegadores crean una caja para representar a cada elemento de la página HTML. Los factores que se tienen en cuenta para generar cada caja son:
Las propiedades width y height de la caja (si están establecidas).
El tipo de cada elemento HTML (elemento de bloque o elemento en línea).
Posicionamiento de lacaja (normal, relativo, absoluto, fijo o flotante).
Las relaciones entre elementos (dónde se encuentra cada elemento, elementos descendientes, etc.)
Otro tipo de información, como por ejemplo el tamaño de las imágenes y el tamaño de la ventana del navegador.
o Tipos de elementos :
El estándar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en línea y elementos de bloque.Los elementos de bloque ("block elements" en inglés) siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Por su parte, los elementos en línea ("inline elements" en inglés) no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos.

o Posicionamiento normal:
El posicionamiento normal o estático es el...