css - tema 2
TRANSCRIPT
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
El modelo de caja CSS
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
El modelo de caja CSS
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
El modelo de caja CSS
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
El modelo de caja CSS
<!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
El modelo de caja CSS
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
El modelo de caja CSS: Border
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
El modelo de caja CSS: Border
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
El modelo de caja CSS: Posicionamiento
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
El modelo de caja CSS: Posicionamiento
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
El modelo de caja CSS: Posicionamiento
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
El modelo de caja CSS: Posicionamiento
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
El modelo de caja CSS: Posicionamiento
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
El modelo de caja CSS: Cómo "flota" un elemento?
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
El modelo de caja CSS: Cómo "flota" un elemento?
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
El modelo de caja CSS: Cómo "flota" un elemento?
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
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 26
El modelo de caja CSS: alineando
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
El modelo de caja CSS: alineando
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;
background-color: #b0e0e6;
}
Abril, 2015 28
El modelo de caja CSS: alineando
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
El modelo de caja CSS: alineando
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
El modelo de caja CSS: alineando
body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; }
Abril, 2015 31