EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Modelo de cajas margenes relleno bordes
            Modelo de cajas: márgenes, relleno y bordes
            12/10/2019
            Formatos de las fuentes
            Formatos de las fuentes en CSS y utilización de repositorios
            12/10/2019

            Posición y comportamiento de contenedores en CSS

            Posición y comportamiento de contenedores en CSS

            Posición y comportamiento de contenedores en CSS

            Tabla de contenidos

            • 14. Posición y comportamiento de contenedores en CSS
            • 14.1. Display
            • 14.2. Position
            • 14.3. Float
            • 14.4. Clear
            • 14.5. Z-index
            • 14.6. Box-sizing
            • 14.7. Visibility

            14. Posición y comportamiento de contenedores en CSS

            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.

            Tabla 14.1: Posición y comportamiento de las cajas o contenedores
            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

            14.1. Display

            Valores: none | inline | block | inline-block

            • none: los elementos se ocultan y no se muestra el espacio reservado.
            • inline: los elementos se muestran en la misma línea (respetando el flujo) y no se aceptan las propiedades width, height ni márgenes verticales.
            • block: los elementos se muestran en líneas independientes y se aceptan las propiedades width, height y márgenes verticales.
            • inline-block: su comportamiento es una mezcla entre los dos anteriores, los elementos se muestran en la misma línea (respetando el flujo) y se aceptan las propiedades width, height y márgenes verticales.

            Ejemplo 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

            14.2. Position

            Valores: static | relative | absolute | fixed

            • static: los elementos se posicionan de acuerdo al flujo normal de la página. Es la posición natural de los elementos. No son afectados por las propiedades top, bottom, left y right.
            • relative: los elementos se posicionan de forma relativa a su posición normal.
            • fixed: los elementos se posicionan de forma relativa a la ventana del navegador. Su posición permanece fija aunque se desplace la ventana.
            • absolute: los elementos se posicionan de forma relativa al primer elemento padre que tenga una posición distinta a static.
            • sticky: los elementos son posicionados de forma relativa hasta que su bloque contenedor alcanza un límite establecido.

            Ejemplo 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

            Ejemplo 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

            Ejemplo 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

            Ejemplo 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

            Ejemplo 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

            14.3. Float

            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.

            Ejemplo 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

            14.4. Clear

            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.

            Ejemplo 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

            14.5. Z-index

            Valores: auto | número entero

            Mediante el atributo z-index podemos organizar cada uno de los elementos del contenido de una página web.

            Propiedad Z-index

            Ejemplo 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

            14.6. Box-sizing

            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.

            Ejemplo 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

            14.7. Visibility

            La propiedad visibility indica si un elemento es visible o permanece oculto (ocupando el mismo espacio).

            Valores: visible | hidden

            Ejemplo 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

            Comprueba tu aprendizaje

            ¿Cómo podemos indicar que no se represente un elemento en el navegador?

            ¡Bien! ¡Has fallado!

            ¿Con qué propiedad se organizan los elementos de una web?

            ¡Bien! ¡Has fallado!

            ¿Con qué propiedad ocultamos un elemento reservando el espacio que ocupa?

            ¡Bien! ¡Has fallado!

            La propiedad clear se usa para...

            ¡Bien! ¡Has fallado!

            ¿Qué propiedad nos permite posicionar un elemento por encima o por debajo de otro?

            ¡Bien! ¡Has fallado!

            CSS. Posición y comportaminto de contenedores Test
            ¡Muy bien!
            Sigue practicando
            Compartir

            UD3. CSS básico

            • 1. ¿Qué es CSS?
            • 2. ¿Cómo aplicar estilos CSS?
            • 3. Selectores
            • 4. Unidades de medida
            • 5. Colores y fondo
            • 6. Propiedades de texto
            • 7. Propiedades de las fuentes
            • 8. Propiedades de las listas
            • 9. Propiedades de las tablas
            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 11. Prefijos CSS de los navegadores
            • 12. Buenas prácticas CSS
            • 13. Modelo de cajas: márgenes, relleno y bordes
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Formatos de las fuentes en CSS y utilización de repositorios
            • 16. Estilos en formularios CSS
            • 17. Herramientas útiles, test de verificación y referencias
            • 18. Resumen CSS
            • 19. Prácticas CSS
            • 20. Test de conocimientos CSS
            • 21. Propiedades Personalizadas CSS

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results