8. CSS: display, position

-

La propiedad "display" de CSS

Algunos de los valores que puede tomar "display" son:
  • inline
  • block
  • inline-block
  • none

"display: inline"

La propiedad "display: inline" transforma un elemento "de bloque" en un elemento "en linea".

Por defecto un elemento "de bloque" ocupa el 100% del ancho del contenedor. Por ejemplo, la etiqueta <h1> es "de bloque":

<h1>Es es un encabezado</h1> 

Si añadimos la propiedad "display: inline" al elemento <h1>, pasará a ser "en linea", o sea, ocupará sólo lo que ocupa su contenido.

<h1 style="display: inline">Es es un encabezado</h1> 
Como consecuencia, el enlace que antes aparecía debajo, ahora aparece a su lado.

"display: block"


La propiedad "display: block" tranforma un elemento "en linea" en uno "de bloque".

Por defecto, el espacio que ocupa un elemento "en linea", es el que ocupa su contenido. Por ejemplo, la etiqueta <a> es "en linea":

<a href="...">esto es un enlace</a>


Si añadimos la propiedad "display: block"  al elemento <a>, pasará a ser "de bloque", o sea, ocupará el 100% del contenedor.

<a style="display: block">esto es un enlace</a>


Debemos recordar, que cuando un elemento es "de bloque" las siguientes propiedades pueden modificarse.
  • width
  • height
  • margin-top y margin-bottom
  • padding-top y padding-bottom
En algunas ocasiones, aplicaremos "display: block" en el caso que tengamos que cambiar dichas propiedades.

"display: inline-block"


El valor "inline-block" se comporta como un elemento "en linea" y "de bloque" al mismo tiempo.
  • Decimos que se comporta como un elemento "en linea" porque ocupa sólo lo que ocupa su contenido.
  • Y decimos que se comporta como un elemento "de bloque" porque podremos modificar su width, height, margin-top, margin-bottom, padding-top y padding-bottom.

"display: none"

Si aplicamos "display: none" el elemento no se muestra.

Suele usarse en conjunción con JavaScript para ocultar o mostra elementos cuando se produce un evento, por ejemplo al pulsar un botón.

Para volver a mostrar un elemento oculto, podemos volver a asignar el valor "block", "inline", "inline-block", etc.

Propiedad: position

La propiedad "position" cambia la posición de un elemento.

Posibles valores:
  • relative:
  • absolute: el elemento se desplazara con respecto al elemento precedente más cercano que no tenga posición "static".
  • fixed: el elemento se desplazará con respecto marco del area de visualización del navegador.
  • static: valor por defecto. El elemento aparece en su posición por defecto.
Para desplazar el elemento, es también necesario establecer los valores del desplazamiento. Para ello, deberemos añadir las siguientes propiedades:
  • top: el elemento se desplaza hacia abajo.
  • right: el elemento se desplaza hacia la izquierda.
  • bottom: el elemento se desplaza hacia arriba.
  • left: el elemento se desplaza hacia la derecha.
Los valores de estas 4 propiedades pueden ser positivos o negativos. Ejemplo:

 top: 5px;
bottom: -10%
left: -100mm

Veamos cada uno detalle

"position: relative"

El elemento se desplazará con respecto a su posición natural. En el siguiente ejemplo desplazamos un parrafo a su derecha.

 

"position: absolute"

El elemento se desplazará con respecto al elemento precedente más cercano que no tenga posición "static".

Si no existe un elemento precendente que sea distinto de "static", el elemento se posiciona con respecto a la etiqueta <body>.

El elemento sale del flujo de elementos.

Se suele usar para posicionar elementos encima de otros.

En el siguiente ejemplo el elemento con posición no "static" es el div contenedor.



En el siguiente ejemplo no hay ningún elemento precedente con posición no static, así que el div azul se posiciona con respecto al "body".


"position: fixed"

El elemento se posiciona con respecto al marco del area de visualización del navegador. Si hacemos "scroll" veremos que el elemento ¡¡no se mueve nunca!!.



Ejercicios

a) Ocultar un elemento que se encuentre dentro del elemento <main> haciendo uso de un valor negativo en "top", "right", "bottom" o "left".

b) Hacer que un elemento aparezca siempre en la misma posición del area de visualización del navegador al hacer "scroll".

c) Poner una imagen encima de otra.

Comentarios

Publicar un comentario

Entradas populares de este blog

5. CSS: formatear un documento HTML

-
Imagen
Las hojas de estilos CSS permiten formatear los elementos HTML y/o cambiar el lugar en que estos se visualizan por defecto en el navegador. Al igual que HTML, CSS es un lenguaje que interpreta el navegador. El código CSS tiene este aspecto: Añadir CSS en un documento HTML Existen 3 métodos , para incluir hojas de estilos CSS a un documento HTML: Mediante el atributo style="..." . Mediante la etiqueta <style></style> Mediante archivos con extensión ".css" externos (RECOMENDADO) . Veamos a continuación cada una de ellas en detalle. Añadir CSS mediante el atributo style="..." Este método consiste en escribir las reglas CSS directamente en la etiqueta HTML a través del atributo style="..." . El siguiente enlace se visualizará de color rojo y tamaño de letra 8 píxeles. <a href="..." style="color: red; font-size: 8px" > Añadir CSS mediante la etiqueta <style></style> Ot...
Leer más

34. Java: final, static, constantes, colecciones

-
Imagen
El modificador "final" La palabra clave " final " se puede aplicar en: variables métodos clases 1. Variables : cuando se aplica " final " en variables , quiere decir que la variable sólo podrá ser inicializada una vez, es decir una vez asignado un valor, este no podrá ser cambiado, y si en algún sitio se intenta cambiarlo el compilador dará error . Ejemplo: En el cuerpo del enumerado anterior, se declaran dos atributos de tipo " final ". Es aconsejable añadir "final" a un atributo cuando sabemos que su valor no debería de ser modificado una vez inicializado , tal y como ocurre en este enumerado. Es decir, en este caso, las constates que se declaran dentro del enumerado, se inicializaran dentro del constructor TipoLugar(),  y ya no deberían de cambiarse , por tanto nos puede venir bien declarar esos dos atributos como final para evitar la posiblidad de que se puedan cambiar el valor de ambos atributos una vez inicializa...
Leer más

29. Android: tipos de layouts

-
Imagen
Uno de los elementos de los que estan compuestas la interfaces de usuario en Android son los " layouts ". Los "layout" son elementos invisibles de la interfaz de usuario. En realidad son como un contenedor que establece la manera en que se dispondrán los elementos que coloquemos en su interior. Por lo general, cada interfaz de usuario tendrá un "layout" que actuará como contenedor general de toda nuestra interfaz , es decir, englobando al resto de los elementos que la componen. Los tipos de "layouts" que podemos añadir a nuestras interfaces de usuario son los siguientes: LinearLayout TableLayout RelativeLayout AbsoluteLayout FrameLayout ConstraintLayout GridLayout Los veremos en detalle cada uno de ellos en este mismo artículo. El "layout" por defecto de la interfaz de usuario Como ya hemos visto anteriormente, cuando creamos un nuevo proyecto Android, se genera un archivo XML para la interfaz de usuario llamado ...
Leer más