CSS: BOX MODEL

BOX MODEL
Contenido:
 Box Model
 Elementos inline y block
 Margin, padding, border, box-sizing
 Display, overflow, float
 BOX MODEL
¿Qué es el box model?
Box model = Modelo la caja
El conjunto de algoritmos por los cuales el
navegador dibuja una caja en pantalla con
todas sus propiedades.
¿Qué es una caja?
Es un rectángulo definido por todo
elemento al renderizarse la página.
 BOX MODEL
ELEMENTOS INLINE Y BLOCK
• VIEWPORT
Es todo el espacio disponible en pantalla.
• BLOCK
Los elementos block ( de bloque) se dibujan de lado a lado de la
pantalla. Ocupa todo el espacio horizontal disponible del viewport.
• INLINE
Los elementos inline (de línea) se dibujan uno al lado de otro.
 BOX MODEL
Elementos de una caja
1. INTERNOS
content (content-box): El contenido
padding (padding-box): Espacio entre el contenido y el límite de la caja
border (border-box): Línea que se dibuja alrededor de la caja
1. EXTERNOS
margin: Separación entre una caja y las adyacentes
 BOX MODEL
Elementos de una caja
 BOX MODEL
¿Como se definen las dimensiones de una caja?
Normalmente, las dimensiones son:
dimensiones declaradas + padding total + borde total
(content box + padding box + border box)

Si las dimensiones no están declaradas, lo normal es:

ancho
total del contenedor (bloque)
total del contenido (inline)

alto
definido por su contenido
 BOX MODEL
DIMENSIONES EN PORCENTAJES
1. Siempre se calculan respecto al ancho del contenedor.
2. Es imposible definir alturas en porcentajes (con ciertas excepciones, como
con alto definido en el padre).
 PADDING BOX
Padding
Es la separación entre el contenido y el limite de la caja
padding-top: 20px; (1)
También se puede escribir con un
padding-right: 10px; (2) shorthand
padding-bottom: 20px; (3) padding: 1em (1,2,3,4);
padding-left: 10px; (4) padding : 1em(1,3) 2em(2,4);
Tips: padding : 1em(1) 2em(2,4) 3em(3);
1. Los paddings no colapsan padding : 1em(1) 2em(2) 3em(3) 4em(4);
2. No hay paddings negativos
3. Los paddings con porcentajes pueden usarse para crear cajas con una
proporción.
 MARGIN BOX
El espacio entre una caja y las adyacentes. Son cuatro tipos de márgenes:
margin-top: (1)
margin-right: (2)
margin-bottom: (3)
margin-left: (4)
También se puede escribir con un shorthand
margin: 1em (1,2,3,4);
margin: 1em(1,3) 2em(2,4);
margin: 1em(1) 2em(2,4) 3em(3);
margin: 1em(1) 2em(2) 3em(3) 4em(4);
 MARGIN BOX
Tips:
1. Comienza desde arriba
2. Avanza en sentido de las agujas del reloj
3. Si un elemento no tiene valor toma el de su opuesto
4. Puedes usar margenes negativos para mover elementos.
5. Puedes usar margin-left: auto; y margin-right: auto para centrar elementos
de bloque con ancho definido.
 COLLAPSADO DE MARGENES
COLAPSADO DE MARGENES VERTICALES (ADYACENTES)
* Cuando hay márgenes verticales que se superponen el mayor siempre
absorbe al menor.
COLAPSADO DE MARGENES VERTICALES 2 (PADRE HIJO)
* El margen vertical del hijo se escapa del padre. Para solucionarlo (en el
padre):
1. padding
2. overflow: hidden;
3. float: right|left; (no recomendado)
 BORDER BOX
Border
El borde es el trazo que rodea a la caja. Existen 4 "parametros" para definir un
borde:
color
width (grosor)
style (tipo)
posicion (top, left,...)
Sobre la posicion se pueden usar los mismos principios usados en margin y
padding (comenzar arriba, moverse en sentido horario, etc).
 BORDER BOX
Entonces: Existen shortand para cada posicion:
border-color: green; border-top: width style color
border-style: solid dashed; border-bottom: width style color
border-width: 3px 5px 2px; border-left: width style color
border-right: width style color
Valores de border-style:
Solid Dashed
Dotted Double El shorthand border se aplica a los
Ridge Inset cuatro lados:
outset border: width style color;
 BORDER BOX
border-radius
El border-radius redondea las esquinas de la caja.

El shorthand border-radius funciona igual que el de el margin para las

posiciones. Con la diferencia de que se empieza a contar en la esquina superior
izquierda.
border-radius: 10px 30px 10px 30px;
 BORDER BOX
border-radius
El valor de x es el radio en horizontal
El valor de y es el radio en vertical
Si se indica un solo valor es para x e y.

Si se quiere definir el radio en x e y en el shorthand se debe separar con un

slash (/). Así:
border-radius: valoresX / valoresY;
border-radius: 200px / 50px;
 DISPLAY
DISPLAY
Es una propiedad que define como se comportará una caja. De forma
predeterminada existen dos tipos de elementos:
block-level
inline-level
Los elementos inline:
1. No aceptan width y height
2. Aceptan margen y padding pero no altera el flujo (los verticales, los
horizontales si lo alteran)
 DISPLAY
Valores de DISPLAY:
display: display:
inline (default) table
block Imita el layout de una tabla
inline-block
A un mismo elemento le da las table-row
propiedades de un elemento inline y table-cell
de un elemento block. table-caption
table-header-group
CSS3: table-footer-group
flex
grid none
 OVERFLOW
OVERFLOW
La propiedad overflow determina la visbilidad del contenido que desborde del
contenedor.

overflow: Novedades en CSS3

visible (default) overflow-x
hidden overflow-y
oculta el contenido desbordado
auto Además se pueden pasar dos
crea scroll de ser necesario valores a overflow:
scroll
crea scroll siempre overflow: valorX valorY;
 FLOAT
FLOAT float:
Float saca a un elemento del flujo y lo envia a la right
derecha o a la izquierda. left
none
El elemento siguiente lo envolverá de ser posible.
El contenedor de un elemento flotado deja de contenerlo. Para solucionarlo:
1. overflow: hidden; La propiedad clear se usa para que un
2. display: table; elemento no reciba elementos
flotados a sus lados.
3. clearfix con un div vacio (no recomendado) clear:
left
4. clearfix con pseudoelementos (recomendada) right
both