Css - Tema 2

Cascading Style Sheets
Tema 2: El modelo de cajas
© Abril, 2015
Prof. Renny Batista

El modelo de caja CSS
 Todos los elementos HTML pueden ser considerados como
cajas. En CSS, el término "modelo de caja" se utiliza
cuando se habla de diseño y maquetación.
 El modelo de caja CSS es esencialmente una caja que se
envuelve alrededor de los elementos HTML, y se compone
de: márgenes, bordes, el relleno y el contenido real.
 El modelo de caja nos permite agregar un borde
alrededor de los elementos, y para definir el espacio
entre los elementos.
Abril, 2015 2

 La imagen siguiente muestra el modelo de caja:
 Explicación de las diferentes partes:
– Content - El contenido de la caja, en la que aparecen el texto y
las imágenes
– Padding - Limpia un área alrededor del contenido. El relleno es
transparente
– Border - Un borde que va alrededor del relleno y contenido
– Margin - Limpia una zona fuera de la frontera. El margen es
transparente
Abril, 2015 3

div {
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
Abril, 2015 4

El modelo de caja CSS: Ancho y alto
 Con el fin de establecer el ancho y la altura de un
elemento correctamente en todos los navegadores,
es necesario saber cómo funciona el modelo de
caja.
 Nota Importante: Al configurar las propiedades de
width y height de un elemento con CSS, solo debe
establecer la anchura y la altura del área del
contenido. Para calcular el tamaño “completo” de
un elemento, también debe agregar relleno, bordes
y márgenes.
Abril, 2015 5

 Aplicamos un estilo a un elemento <div> para que tenga una
anchura total de 350 píxeles:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
 Vamos a hacer los cálculos:
320px (anchura)
+ 20px (izquierda + derecha relleno)
+ 10px (izquierda + derecha frontera)
+ 0px (izquierda + margen derecho)
= 350px:
Abril, 2015 6

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<img src="klematis4_big.jpg" width="350" height="263"
alt="Klematis">
<div>The picture above is 350px wide. The total width of this
element is also 350px.</div>
</body>
</html>
Abril, 2015 7

 La anchura total de un elemento debe calcularse así:
Ancho total del elemento = width + left padding +
right padding + left border + right border + left margin
+ right margin
 La altura total de un elemento debe calcularse así:
Altura total del elemento = height + top padding +
bottom padding + top border + bottom border + top
margin + bottom margin
Abril, 2015 8

El modelo de caja CSS: Border
 Los bordes se pueden usar para muchas cosas, por
ejemplo, como elemento decorativo o para subrayar la
separación entre dos cosas. CSS te ofrece opciones sin fin
a la hora de usar bordes en tus páginas.
 Vamos a examinar las siguientes propiedades CSS:
– border-width
– border-color
– border-style:
Abril, 2015 9

 La anchura del borde se define por medio de la
propiedad border-width, que dispone de los valores thin,
medium y thick, o de un valor numérico indicado en
píxeles. La siguiente imagen ilustra cómo funciona el
border-width.
 La propiedad border-color define el color del borde. Los
valores de esta propiedad son los valores de color
normales, por ejemplo, "#123456" (en notación Hex),
"rgb(123,123,123)" (en notación RGB) o "yellow" (por
nombre del color).
Abril, 2015 10

 Se puede elegir entre diferentes estilos de borde border-
style. A continuación se muestran varios estilos. Todos los
ejemplos se muestran con el valor del color a “gold" y el
valor de la anchura a "thick", pero se pueden mostrar, por
supuesto, en otros colores y grosores. Si no queremos
mostrar ningún borde, se puede usar los valores none o
hidden.
Abril, 2015 11

El modelo de caja CSS: Margin
 El margen despeja un área alrededor de un elemento
(fuera del borde). El margen no posee un color de fondo,
y es completamente transparente.
 El margen superior, inferior, derecho e izquierdo se puede
cambiar de forma independiente utilizando propiedades
separadas. Se puede utilizar una propiedad margin
abreviada, para cambiar todos los márgenes a la vez.
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
p {
margin: 100px 50px;
}
Abril, 2015 12

El modelo de caja CSS: Padding
 El relleno (padding) despeja un área alrededor del
contenido (dentro del borde). El relleno se ve afectado
por el color de fondo del elemento.
 El relleno superior, inferior, derecho e izquierdo se puede
cambiar de forma independiente utilizando propiedades
separadas. Se puede utilizar una propiedad padding
abreviada, para cambiar todos los rellenos a la vez.
p {
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
p {
padding: 25px 50px;
}
Abril, 2015 13

El modelo de caja CSS: Posicionamiento
 Las propiedades de posicionamiento CSS le permiten
ubicar un elemento. También puede colocar un
elemento detrás de otro, y especificar qué debe suceder
cuando el contenido de un elemento es demasiado
grande.
 Los elementos pueden ser colocados utilizando las
propiedades superior, inferior, izquierda y derecha. Sin
embargo, estas propiedades no funcionarán a menos
que la propiedad position se establece en primer lugar.
También funcionan de manera diferente en función del
método de posicionamiento.
 Hay cuatro métodos de posicionamiento diferentes.
Abril, 2015 14

 Posicionamiento estático
– Elementos HTML se colocan estáticos por defecto. Un
elemento posicionado estático está siempre
posicionado de acuerdo con el flujo normal de la
página.
– Los elementos posicionados estáticos no se ven
afectadas por las propiedades superior, inferior,
izquierda y derecha.
Abril, 2015 15

 Posicionamiento fijo
– Un elemento con una posición fija se coloca en
relación con la ventana del navegador, y no se
moverá incluso si la ventana se desplaza:
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
– Elementos posicionados fijos se elimina del flujo normal.
El documento y otros elementos se comportan como si
no existe el elemento posicionado fijo.
– Los elementos posicionados fijos pueden superponerse
a otros elementos.
Abril, 2015 16

 Posicionamiento relativo
– Un elemento posicionado relativo se coloca en relación a su
posición normal:
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
– El contenido de los elementos con posición relativa se puede
mover y se superponen otros elementos, pero el espacio
reservado para el elemento aún se conserva en el flujo normal.
– Elementos con posición relativa menudo se usan como bloques
de contenedores para elementos con posición absoluta.
Abril, 2015 17

 Posicionamiento absoluto
– Un elemento en posición absoluta se sitúa en relación con el
primer elemento padre que tenga una posición distinta a
estática. Si no se encuentra dicho elemento, el bloque
contenedor es <html>:
h2 {
position: absolute;
left: 100px;
top: 150px;
}
– Elementos con posición absoluta se quitan del flujo normal. El
documento y otros elementos se comportan como si no existe
el elemento con posición absoluta.
– Los elementos posicionados absolutamente pueden
superponerse a otros elementos.
Abril, 2015 18

 La superposición de elementos
– Cuando los elementos están posicionados fuera del flujo
normal, que pueden superponerse a otros elementos.
– La propiedad z-index especifica el orden de apilamiento de
un elemento (qué elemento se debe colocar delante o
detrás, los otros).
– Un elemento puede tener una orden de pila positivo o
negativo:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Abril, 2015 19

El modelo de caja CSS: Float
 Con float un elemento puede ser empujado a la izquierda
o la derecha, permitiendo que otros elementos se ajusten
alrededor ella.
 float se utiliza a menudo con imágenes, pero también es
útil cuando se trabaja con diseños.
Abril, 2015 20

El modelo de caja CSS: Cómo "flota" un elemento?
 Los elementos están flotando horizontalmente, esto
significa que un elemento sólo puede flotar izquierda o la
derecha, no hacia arriba o hacia abajo.
 Un elemento flotante se moverá tan a la izquierda o la
derecha como pueda. Por lo general, esto significa hasta
llegar a la izquierda o la derecha del elemento
contenedor.
 Los elementos después del elemento flotante fluyen a su
alrededor.
 Los elementos antes del elemento flotante no se verán
afectados.
Abril, 2015 21

 Si una imagen se hace flotar a la derecha, el texto
siguiente fluye a su alrededor, a la izquierda:
img {
float: right;
}
 Elementos flotantes uno la lado del otro: Si coloca varios
elementos flotantes, uno tras otro, van a flotar junto al otro,
si hay espacio.
.thumbnail {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}
Abril, 2015 22

 Desactivar el float - Usando clear
– Los elementos después del elemento flotante fluyen a su
alrededor. Para evitar esto, utilice la propiedad clear.
– La propiedad clear especifica que no se permiten los
lados de un elemento distintos elementos flotantes.
.text_line {
clear: both;
}
Abril, 2015 23

Abril, 2015 24
Propiedad Descripción Valores
clear Especifica cuales lados de un
elemento donde no se permitan otros
elementos flotantes
left
right
both
none
inherit
float Especifica si una caja debe flotar left
right
none
inherit

El modelo de caja CSS: alineando
 Alineando los elementos de bloque
– Un elemento de bloque es un elemento que ocupa
todo el ancho disponible, y tiene un salto de línea antes
y después de ella.
– Ejemplos de elementos de bloque: <h1>, <p>, <div>.
 Alinear centrado mediante la propiedad margin
– Los elementos de bloque pueden ser centrado
ajustando los márgenes izquierdo y derecho en "auto".
– Nota: El uso de margin: auto; no funciona en IE8 y en
versiones anterior a menos que se declare un DOCTYPE!.
Abril, 2015 25

 Alineando los elementos de bloque
– Un elemento de bloque es un elemento que ocupa
todo el ancho disponible, y tiene un salto de línea antes
y después de ella.
– Ejemplos de elementos de bloque: <h1>, <p>, <div>.
 Alinear centrado mediante la propiedad margin
– Los elementos de bloque pueden ser centrado
ajustando los márgenes izquierdo y derecho en "auto".
– Nota: El uso de margin: auto; no funciona en IE8 y en
versiones anterior a menos que se declare un DOCTYPE!.
Abril, 2015 26

 Ajustar los márgenes izquierdo y derecho a auto especifica
que se deben dividir el margen disponible por igual. El
resultado es un elemento de centrado:
 Nota: La alineación centrada no tiene efecto si la
propiedad width está al 100%.
.center {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: #b0e0e6;
}
Abril, 2015 27

 Alineando a la Izquierda y Derecha usando la propiedad
position
 Un método para alinear elementos es utilizar el
posicionamiento absoluto.
 Nota: los elementos posicionados absolutos se eliminan del
flujo normal, y pueden solapar elementos.
.right {
position: absolute;
right: 0px;
width: 300px;
}
Abril, 2015 28

 Problemas de compatibilidad
– Al alinear los elementos de este tipo, siempre es una
buena idea predefinir el margen y el relleno para el
elemento <body>. Esto es para evitar diferencias
visuales en diferentes navegadores.
– Hay un problema con IE8 y versiones anteriores, cuando
se utiliza la propiedad position. Si un elemento
contenedor (en nuestro caso <div class = "container">)
tiene un ancho especificado, y falta la declaración
DOCTYPE!, IE8 y versiones anteriores le sumará un
margen de 17px en el lado derecho. Esto parece ser el
espacio reservado para una barra de desplazamiento.
Siempre coloque la declaración DOCTYPE al utilizar la
propiedad position.
Abril, 2015 29

 Problemas de compatibilidad
– Al alinear los elementos de este tipo, siempre es una
buena idea predefinir el margen y el relleno para el
elemento <body>. Esto es para evitar diferencias
visuales en diferentes navegadores.
– Hay un problema con IE8 y versiones anteriores, cuando
se utiliza la propiedad position. Si un elemento
contenedor (en nuestro caso <div class = "container">)
tiene un ancho especificado, y falta la declaración
DOCTYPE!, IE8 y versiones anteriores le sumará un
margen de 17px en el lado derecho. Esto parece ser el
espacio reservado para una barra de desplazamiento.
Siempre coloque la declaración DOCTYPE al utilizar la
propiedad position.
Abril, 2015 30

body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
}
Abril, 2015 31

Bibliografías
Abril, 2015 32
Tutorial CSS. http://es.html.net/tutorials/css/
W3Schools a web developers site. http://www.w3schools.com
LibrosWeb.es. Introducción a CSS. http://librosweb.es/libro/css/

Css - Tema 2

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Css - Tema 2 (20)

Más de Renny Batista (6)

Último (6)

Css - Tema 2