En el proceso de creación de una web es imprescindible organizar elementos como imágenes, textos o tablas. Para ello, necesitaremos conocer los elementos de ordenación y las propiedades que nos ayudan a organizar todos los componentes. Las propiedades más importantes se definen en la siguiente tabla y se explican a continuación.
Propiedad | Descripción | Valores |
---|---|---|
display |
Comportamiento del contenedor | inline | block | inline-block | none |
position |
Esquema de posicionamiento | static | relative | absolute | fixed | sticky |
top
right
bottom
left |
Desplazamiento de la caja respecto al borde superior, derecho, inferior o izquierdo | longitud | porcentaje | auto |
float |
Posicionamiento flotante | left | right | none |
clear |
Control de cajas adyacentes a las float | none | left | right | both |
z-index |
Nivel de la capa | auto | número entero |
box-sizing |
Control de bordes y relleno en el comportamiento del contenedor | content-box | border-box |
visibility |
Muestra u oculta un elemento ocupando el espacio | visible | hidden |
Valores: none | inline | block | inline-block
display
Aplica los siguientes estilos sobre diferentes elementos y comprueba el resultado.
.a { display: none; } .b { display: inline; width: 100px; height: 50px;} .c { display: block; } .d { display: inline-block; width: 100px; height: 50px;}
0
Valores: static | relative | absolute | fixed
position: static
Aplica los siguientes estilos sobre diferentes elementos y comprueba que los elementos mantienen su posición natural. Como puedes comprobar, las propiedades top, bottom, left y right no están permitidas con «position: static».
.a { position: static; } .b { position: static; } .c { position: static; }
0
position: relative
Aplica el siguiente estilo sobre un elemento y comprueba que con las propiedades left: 20px y top: 10px el elemento se desplaza 20px hacia la derecha y 10 px hacia abajo desde su posición por defecto (sin eliminar el hueco de su posición por defecto).
.bloque2 { position: relative; left: 20px; top: 10px; }
0
position: fixed
Tal y como puedes comprobar en el siguiente ejemplo, los elementos con position: fixed
toman como referencia la ventana del navegador y permanecen fijos.
.bloque2 { position: fixed; top: 130px; left: 100px; }
0
position: absolute
Establece el siguiente estilo sobre dos contenedores y comprueba cómo el elemento «.b» deja de seguir la posición del flujo normal de la página, sin crearse espacio alguno para el elemento, y se posiciona de forma relativa al primer elemento padre que tiene una posición distinta a static, en este caso el elemento «.a». Si no hubiese ningún elemento padre con propiedad distinta a static, se ubicaría de forma relativa al contenedor inicial. Haz la prueba cambiando el valor de position a «static» en el elemento a. Como puedes ver, su posición final está definida por los valores de top
, right
, bottom
, y left
.
.a { position: relative; /*cambia este valor a static para ver la diferencia*/ width: 300px; height: 300px; border: 2px dotted purple; } .b { position: absolute; background-color: #EEEEEE; top: 60px; right: 0px; width: 200px; height: 80px; border: 3px solid green; }
0
position: sticky
La posición sticky se usa cuando queremos que un elemento tenga una posición relativa hasta un punto y que luego cambie a una posición fija, usando solo CSS sin necesidad de código JavaScript. Por ejemplo si tenemos un banner de publicidad flotante en el sidebar y nos interesa que una vez aparezca al hacer scroll se mantenga fijo y visible.
Otro ejemplo puede ser el que se muestra acontinuación y que nos sirve para posicionar los encabezados en una lista alfabética.
0
Valores: left | right | none
Cuando a un elemento HTML se le aplica un estilo con la propiedad float, el elemento sale del flujo normal y aparece posicionado a la izquierda o a la derecha de su contenedor, donde el resto de elementos de la página se posicionarán alrededor.
float
Aplica los siguientes estilos sobre diferentes contenedores y comprueba el resultado.
.a { float: left; } .b { float: right; } .c { float: right; } .d { float: none; clear: both; }
0
Valores: none | left | right | both
La propiedad clear
establece si un elemento debe estar al lado de los elementos flotantes que lo preceden o si debe situarse bajo de ellos. Se suele utilizar para restaurar el flujo normal del documento y así los elementos dejan de flotar hacia la izquierda, la derecha o ambos lados.
clear
Crea un contenedor y aplícale la propiedad float con el valor left. Sitúa un texto bajo del contenedor creado utilizando la propiedad clear.
p{ clear: both; }
dark
Valores: auto | número entero
Mediante el atributo z-index
podemos organizar cada uno de los elementos del contenido de una página web.
z-index
Aplica los siguientes estilos sobre diferentes contenedores que se encuentren superpuestos y comprueba el resultado.
.a { z-index: 3;} .b { z-index: 1;} .c { z-index: 2;}
0
Por defecto en el modelo de cajas de CSS, el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algún borde (border) o relleno (padding), este es entonces añadido al ancho y alto del tamaño de la caja o contenedor. Esto significa que cuando se define el ancho y alto, se tiene que ajustar el valor para permitir cualquier borde o relleno que se pueda añadir.
Valores: content-box | border-box
content-box
es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno será añadido al ancho final desplegado.border-box
toma en cuenta cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluirán cualquier borde o relleno que se añada, y la caja de contenido se encogerá para absorber ese ancho extra. Esta propiedad es especialmente útil para redimensionar cualquier elemento.box-sizing
Crea un contenedor que ocupe el 100% del ancho de la pantalla. Posiciona tres imágenes en línea y define que cada imagen ocupe el 33,333%. Observa que el conjunto ocupa el 100% de la pantalla.
Si a continuación dotamos a las imágenes de un padding o relleno, el conjunto ocupará más del 100%. En este punto podríamos establecer un “box-sizing: border-box“ para incluir en el conjunto el relleno definido. Acuérdate de añadir los prefijos para los navegadores:
-webkit-box-sizing: border-box; box-sizing: border-box;
Como puedes ver en el código, se han añadido los prefijos para navegadores necesarios para esta nueva propiedad.
0
La propiedad visibility
indica si un elemento es visible o permanece oculto (ocupando el mismo espacio).
Valores: visible | hidden
visibility
Aplica las siguientes propiedades sobre un elemento y observa las diferencias. Como puedes ver, la diferencia principal es que display: none
no reserva el espacio del elemento mientras que visibility: hidden
sí.
.a {display:none;} .b {visibility: hidden;}
0