Benemérita Universidad Autónoma de

Puebla

Facultad Ciencias de la Computación

Desarrollo de aplicaciones web

Actividad 3

Morales Romero Alma Josselyn 201836173

alma.moralesrom@alumno.buap.mx

Otoño 2021
Modelo de caja en CSS
El modelo de caja CSS es un módulo CSS que define cajas rectangulares,
incluyendo sus rellenos y márgenes, que son generadas para los elementos y que
se disponen de acuerdo con el modelo de formato visual.
Cada elemento que encontramos dentro de un documento HTML se encuentra
contenido en una caja rectangular, la cual cuenta con una serie de propiedades que
afectaran el cómo se muestran los elementos.
Al trabajar con un modelo de caja, debemos tener en cuenta que existen dos
propiedades principales para definirla, height y width, que definirán el ancho y alto
de nuestra caja.
Adicionalmente a estas, tenemos el Margin, Padding y Border que nos brindaran
mayor control al momento de organizar los elementos.
El modelo de caja puede llegar a ser un poco confuso, ya que inicialmente definimos
un alto y ancho específico para nuestra caja, pero gracias
al padding, border y margin este tamaño varía.
Algo que es importante mencionar es que el navegador por defecto agrega un
margin y padding a los elementos para mejorar su claridad y legibilidad. Estos
valores por defecto variarán dependiendo del navegador que estemos utilizando;
además, nos es posible borrar estos estilos por defecto para evitarnos problemas y
tener más control al momento de organizar mejor nuestros elementos.
Propiedad padding. Nos permitirá definir un espacio vacío alrededor de un
elemento. Asimismo, el cero no va acompañado de unidad de medida, eso es
porque en CSS no es necesario indicar unidad de medida cuando usamos el cero.
El margin y el padding son completamente transparentes y no se le puede aplicar
valores de color. Las propiedades margin y padding pueden aceptar de uno a cuatro
valores.
Si declaramos un solo valor para Margin y Padding, este se establecerá ese valor
para cada lado de la caja. Si declaramos 2 valores para Margin y Padding, se
establecerá el primero para Top y Bottom y el segundo para Left y Right. Con 3
valores estableceremos el Top, Right y Bottom de nuestro Padding y Margin, al no
establecer el valor de Left este tomara el mismo que el de Right. Finalmente
estableciendo 4 valores le asignamos un tamaño a cada lado del margin y padding.
Es importante mencionar que la asignación de valores va en sentido horario
comenzando por el Top y finalizando en el Left
Entre el Margin y el Padding encontramos al Border el cual requiere de 3 valores
(width, style y color) para poder ser visualizado correctamente.
Finalmente veremos el Box-Sizing propiedad que es usada para modificar las
propiedades del Box Model visto anteriormente, brindándonos aún más control
sobre nuestra caja.
box-sizing acepta principalmente 3 valores: content-box, padding-box y border-box,
cada uno de estos modifica el cómo se calcula el tamaño de nuestra caja
Content-Box
Es el valor por defecto que tiene el Box Model, sus características es que es aditivo,
es decir, si agregamos un tamaño al margin, padding y border estos se sumaran
al width y height establecidos, agrandando el tamaño real de nuestra caja.
Box-sizing: content-box
Paddding-box
Incluye el tamaño del padding dentro del tamaño establecido para la caja, es decir
que el padding no sumara pixeles al tamaño de la caja, sino que el tamaño de la
caja se reducirá para que al agregarle el padding la caja mantenga el tamaño
establecido inicialmente, dejando fuera a border y margin.
Box-sizing: padding-box
Border-box
Al igual que el anterior disminuirá su tamaño agregando al padding y border para
que el tamaño establecido de la caja se mantenga, dejando fuera al margin.
Box-sizing: border-box
Propiedades
Propiedades que controlan el flujo del contenido en una caja.
• box-decoration-break (en-US)
• box-sizing
• overflow
• overflow-x (en-US)
• overflow-y
Propiedades que controlan el tamaño de una caja.
• height
• width
• max-height
• max-width (en-US)
• min-height
• min-width
Propiedades que controlan los márgenes de una caja.
• margin
• margin-bottom
• margin-left (en-US)
• margin-right
• margin-top (en-US)
Propiedades que controlan los rellenos de una caja
• padding
• padding-bottom
• padding-left (en-US)
• padding-right (en-US)
• padding-top
Otras propiedades
• box-shadow
• visibility