Scribd
Cargar
27 vistas1 página

Introducción al Modelo de Caja CSS

El documento introduce el modelo de caja de CSS, donde cada elemento HTML está encerrado en una caja invisible que interactúa con otras cajas. Cada caja tiene cuatro partes: contenido, relleno, borde y margen. El contenido muestra el texto, el relleno lo rodea, el borde define los límites y el margen crea espacio entre cajas. El modelo de caja permite posicionar elementos de forma flexible.

Cargado por

Pilar pe
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como ODT, PDF, TXT o lee en línea desde Scribd
27 vistas1 página

Introducción al Modelo de Caja CSS

El documento introduce el modelo de caja de CSS, donde cada elemento HTML está encerrado en una caja invisible que interactúa con otras cajas. Cada caja tiene cuatro partes: contenido, relleno, borde y margen. El contenido muestra el texto, el relleno lo rodea, el borde define los límites y el margen crea espacio entre cajas. El modelo de caja permite posicionar elementos de forma flexible.

Cargado por

Pilar pe
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como ODT, PDF, TXT o lee en línea desde Scribd

3.

EL MODELO DE CAJA
3.1 Introducción al modelo de caja
Hasta la adopción de la versión 2 del CSS por parte de los navegadores la maquetación se hacía
utilizando tablas e incorporando pequeñas imágenes en blanco para ajustar los elementos de la
tabla, y utilizando muchos espacios en blanco ( ). Este uso de tablas y espacios en blanco
como elementos de presentación del documento, permite una maquetación que se ve igual en todos
los navegadores, pero que comporta importantes deficiencias:
• El mantenimiento, edición y actualización visual del documento se hacen muy difíciles por la
complejidad de la maqueta visual.
• El peso del documento se incrementa con el uso de tablas, y las páginas cargan lentamente.
• Queda degradada la accesibilidad.
• Las páginas maquetadas en tablas resultan menos accesibles des de dispositivos móviles.

A partir del CSS 2, se incorporan un conjunto de propiedades que permiten el posicionamiento de


todos los elementos HTML en cualquier parte del documento.
Cada elemento HTML del documento está encerrado dentro de una caja invisible que interactúa con
el resto de elementos del mismo documento que también se encuentran encerrados en sus
respectivas cajas.
Cada caja tiene un contenido y opcionalmente un área que lo rodea, que puede constar de un área de
relleno, un borde y un margen. El elemento ocupa un espacio determinado y puede tener un relleno
(padding) que hace su caja mayor. Todo ello está rodeado por el borde (border) y a su alrededor
se puede establecer un margen (margin) que separe la caja del resto de cajas de los otros elementos.

Propiedades que representan las cuatro partes de una caja:


Contenido (content)
Representa el espacio que ocupa el elemento contenido entre las etiquetas
HTML y es el que, por defecto, aparece en pantalla.
Relleno (padding)
Es lo que rodea al contenido de la caja. Si el valor de éste es igual a cero,
coincidirá con el límite o margen de la caja.
Borde (border)
Representa el límite de la caja, que envuelve el contenido del elemento.
Normalmente el borde se muestra como una simple línea, pero en realidad es
un área que puede tener cualquier grosor. Si el límite del borde es igual a
cero, tendrá el mismo valor que el padding.
Margen (margin)
Representa el área transparente que envuelve los límites o bordes de la caja.
Si el valor del límite del margen o límite externo es cero, este ocupará el
mismo espacio que el límite del borde.
U.2: CSS3
21
Cada área de la caja se puede dividir en cuatro partes: arriba (top), abajo
(bottom), izquierda (left) y derecha (right).
Por ejemplo:
El orden en el cual se especifican estos valores en una línea es el siguiente:
También se puede resumir:

También podría gustarte