13_CSS.css

/* Modelo de caja y posicionamiento 

● Modelo de caja y propiedades.
● Posicionamiento y visualización.

Modelo de caja

El modelo de caja o “box model” es seguramente la característica más
importante del lenguaje de hojas de estilos CSS, ya que condiciona el
diseño de todas las páginas web. El Modelo de cajas es un mecanismo
mediante el que CSS hace que todos los elementos de las páginas se
representan mediante cajas rectangulares.
Las cajas de una página se crean automáticamente. Cada vez que se
inserta una etiqueta HTML, se crea una nueva caja rectangular que
encierra los contenidos de ese elemento.
Los navegadores crean y colocan las cajas de forma automática, pero
CSS permite modificar todas sus características.

Las cajas de las páginas no son visibles a simple vista porque 
inicialmente no muestran ningún color de fondo ni ningún borde.
Cada elemento incluido en el documento HTML genera una caja
que tiene varios atributos modificables. El comportamiento de
esa caja depende de su clasificación, es decir, si se trata
de un elemento de línea o de bloque.

La representación básica del Modelo de caja es la siguiente, donde podemos
observar varios conceptos importantes a diferenciar:

● El borde (border). Es el límite que separa el interior del exterior del elemento.
● El margen (margin). Es la parte exterior del elemento, por fuera del borde.
● El relleno (padding). Es la parte interior del elemento, entre el contenido y el borde.
● El contenido (content). Es la parte interior del elemento, excluyendo el relleno.

El relleno y el margen son transparentes, por lo que en el espacio
ocupado por el relleno se muestra el color o imagen de fondo (si están
definidos) y en el espacio ocupado por el margen se muestra el color o
imagen de fondo de su elemento padre (si están definidos). Si ningún
elemento padre tiene definido un color o imagen de fondo, se muestra el
color o imagen de fondo de la propia página (si están definidos).

Dimensiones y desbordamiento

Dimensiones (ancho y alto)

Proporcionamos tamaños específicos a los diferentes elementos de un
documento HTML asignando valores a las propiedades width (ancho) y height
(alto). En el caso de utilizar el valor auto en las propiedades anteriores (valor por
defecto), el navegador se encarga de calcular el ancho o alto necesario,
dependiendo del contenido del elemento. El tamaño automático dado a un
elemento depende del tipo de elemento que se trate (en bloque o en línea).

Si en lugar de utilizar la opción auto, simplemente no indicamos valores
para el ancho y el alto, el tamaño de la caja suele acomodarse al contenido
sin problemas. Pero cuando asignamos valores a estos atributos,
forzamos al elemento a tener un aspecto concreto, obteniendo
resultados inesperados si su contenido es más grande que el tamaño de la caja.

min-width, max-width, min-height y max-height

Una forma de mitigar el problema mencionado consiste en utilizar las propiedades
hermanas de width: min-width y max-width; y las propiedades hermanas de height:
min-height y max-height. Con estas propiedades, en lugar de establecer un tamaño
fijo, establecemos límites máximos y mínimos, donde el ancho o alto de la caja queda
comprendido entre esos valores.
*/

div{
    width: 800px;
    height: 800px;
    background: red;
    max-width: 500px;
   }

/* En este caso a pesar de estar indicando un tamaño de 800px, le
aplicamos un max-width de 500px, por lo que estamos
limitando el elemento a un tamaño de ancho de 500 píxeles
como máximo y nunca superará ese tamaño. 
   
Las propiedades de mínimos (min-width y min-height) por defecto tienen valor 0,
mientras que las propiedades de máximos (max-width y max-height) tienen por defecto
valor none. 


Zonas de un elemento

En CSS existen ciertas palabras clave para hacer referencia a una zona u
orientación concreta sobre un elemento. Son conceptos muy sencillos y lógicos:
● Top: Parte superior
● Left: Parte izquierda
● Right: Parte derecha
● Bottom: Parte inferior
● Center: La posición central entre los extremos horizontales y verticales


Desbordamiento

Puede ocurrir que apliquemos un tamaño de alto y ancho a un elemento HTML,
pero su contenido de texto sea tan grande que no quepa dentro de la caja.
En ese caso lo que ocurre es que el contenido se desborda. Podemos modificar
este comportamiento con la propiedad de CSS overflow o con alguna de sus
propiedades específicas overflow-x (para el eje horizontal) u overflow-y
(para el eje vertical).

Dichas propiedades pueden tomar varios valores, donde visible es el valor que
tiene por defecto, permitiendo el desbordamiento. Otras opciones son las
siguientes:

* El valor hidden oculta el contenido que sobresale.
* El valor scroll, con el que se colocan barras de scroll horizontales y verticales
* El valor auto, con el que se coloca una barra de desplazamiento necesaria.

Aclaración: overflow-x y overflow-y permiten ocultar una barra de desplazamiento
            (habitualmente la barra de desplazamiento horizontal).


Márgenes y relleno      

Márgenes (margin)

Se utilizan para crear espacio alrededor de los elementos, fuera de los bordes
definidos. Margin especifica el espacio que existe entre el borde de un
elemento y el borde de otros elementos adyacentes. Las propiedades son:

● margin-top
● margin-right
● margin-bottom
● margin-left

Se puede aplicar en conjunto o de forma concreta a cada una de las zonas del 
elemento. Podemos aplicar diferentes márgenes a cada zona de un elemento utilizando 
cada una de estas propiedades, o dejando al navegador que lo haga de forma 
automática indicando el valor auto.

Para centrar un elemento podemos aplicar un ancho fijo al contenedor. Por ejemplo: width: 
500px con margin: auto. El navegador, al conocer su tamaño, se encarga de repartirlo 
equitativamente entre los márgenes, dado que conoce el resto del tamaño de la ventana.

Nota: Si nos encontramos con un solapamiento de márgenes. Por defecto, si  tenemos dos elementos
adyacentes con, por ejemplo, margin: 20px cada uno, ese espacio de  margen se solapará 
y tendremos 20px en total, y no 40px (la suma de cada uno) como  podríamos pensar en un principio.

Relleno (padding)

Los rellenos (padding) son los espacios que hay entre los bordes del elemento 
en cuestión y el contenido (por la  parte interior).
Las opciones son:

● padding-top: 0
● padding-right: 0
● padding-bottom: 0
● padding-left: 0

Al igual que con los márgenes, los rellenos tienen varias propiedades para indicar 
cada zona. Como se puede ver en la tabla, por defecto no hay relleno (el relleno está en cero), 
aunque este puede modificarse tanto con las propiedades anteriores como la 
propiedad de atajo en el modelo de la caja.

CSS proporciona atajos para los márgenes y los rellenos:

                    10px; top/right/bottom/left

                    top/bottom             right/left               
margin o            10px                    20px;                    
padding
                    top                    left/right              bottom
                    10px                    20px;                  10px;

                    top                     right                  bottom          left       
                    10 px                    20px                  10px;           20px;
                    

Bordes

Borde (border)

Establece un límite entre la parte interior y la parte exterior de la caja. Se 
pueden especificar ancho, estilo y color. Las opciones son:

● border-top
● border-right
● border-bottom
● border-left

Las propiedades básicas y específicas de los bordes en CSS son las siguientes:

● border-color: black|color
● border-width:thin|medium|thick|size
● border-style:none|style

El estilo de borde más frecuente es solid (borde liso y continuo), y que además es la 
opción por defecto. Pueden utilizarse cualquiera de los estilos indicados en la tabla 
anterior e incluso combinarlos con otras propiedades.

● hidden: Oculto. Idéntico a none, salvo para conflictos con tablas.
● dotted: Borde basado en puntos.
● dashed: Borde basado en rayas (línea discontinua).
● solid: Borde sólido (línea continua).
● double: Borde doble (dos líneas continuas).
● groove: Borde biselado con luz desde arriba.
● ridge: Borde biselado con luz desde abajo. Opuesto a groove.
● inset: Borde con profundidad «hacia dentro».
● outset: Borde con profundidad «hacia fuera». Opuesto a inset

¿Cómo estilar bordes redondeados?:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius


Bordes múltiples

Sólo hemos utilizado un parámetro en cada propiedad, aplicando el mismo valor 
a cada borde de un elemento. Sin embargo, podemos especificar de uno a cuatro parámetros,
dependiendo de lo que queramos hacer:

Propiedad           Valor                               Significado

border-color       color                     1 parámetro. Aplica el mismo color a todos los bordes.
                   color color               2 parámetros. Aplica al borde top/bottom , y al left/rigth.
                   color   color   color     3 parámetros. Aplica al top, al left/right y al bottom.
                   color color color color   4 parámetros. Aplica al top, al right, bottom y left

Podemos hacer lo mismo con las propiedades border-width y border-style. 
Teniendo en cuenta esto, disponemos de una gran flexibilidad a la hora de especificar
esquemas de bordes más complejos. Por ej.:                                              
*/

div {
    border-color: red blue green;
    border-width: 2px 10px 5px;
    border-style: solid double solid;
   }

/* 
En el ejemplo utilizamos 3 parámetros, indicando un elemento con borde superior rojo 
sólido de 2 píxeles de grosor, con borde izquierdo y derecho doble azul de 10 píxeles de 
grosor y con un borde inferior verde sólido de 5 píxeles de grosor.

Con la propiedad border-width pasa exactamente lo mismo que con margin y padding, 
actuando en este caso en relación al grosor del borde de un elemento. Se pueden utilizar 
de 1 a 4 parámetros.

Bordes - Atajos

Con tantas propiedades, incluso para hacer algo sencillo necesitamos varias 
líneas de código. Pero podemos utilizar la propiedad de atajo border, con la que 
podemos hacer una síntesis sin necesidad de indicar múltiples propiedades 
individuales por separado, realizando el proceso de manera simplificada:

                border: size style color;
*/

 div {
    border: 1px solid #000000;
 }   

 /* Bordes especificos 

Una forma más intuitiva, es utilizar las propiedades de bordes específicos (por zonas) y 
aplicar estilos combinándolos junto a la herencia de CSS. Para utilizarlas bastaría con 
indicar la zona justo después de border-. Por ejemplo:
 */

div {
    border-bottom-width: 2px;
    border-bottom-style: dotted;
    border-bottom-color: black;
} 

div {
    border: 5px solid red;
    border-top-width: 15px; 
    border-top-color: orange;

}

/* De manera simplificada: 

            border-top/right/bottom/left: size style color; */
div{
    border: 5px solid blueviolet;
    border-top: 15px orange;
 
}


/* 
                                Box-sizing

En el modelo de caja CSS 'clásico', el borde y los márgenes internos y externos se 
añaden al tamaño del elemento definido con las propiedades width y height, 
motivo por el que necesitamos revertir este comportamientode por medio de la 
propiedad box-sizing, que indica cómo calcular el ancho y el alto total 
de un elemento y acepta los valores siguientes:

● box-sizing: content-box: Es el valor que cualquier caja tiene asignada por 
    defecto. Las propiedades width y height no incluyen el borde, el padding o el margin.
● box-sizing: border-box: Las propiedades width y height incluyen el contenido, 
                    padding y borde pero no el margin.
● box-sizing: initial: Reestablece esta propiedad a su valor por defecto 
● box-sizing: inherit: Hereda esta propiedad de su elemento padre.

La propiedad box-sizing, permite modificar este comportamiento y hacer que el borde
y el relleno estén incluídos en el interior del tamaño definido con las propiedades
width y height. En este caso se reducirá el espacio disponible para el contenido.

Posicionamiento

Los elementos en línea y en bloque nos permiten diseñar esquemas complejos, 
alineando y combinando elementos. El posicionamiento por defecto es el estático (static):
todos los elementos aparecen con un orden natural según donde estén colocados en el HTML.
No obstante, CSS permite al diseñador modificar la posición en la que se 
muestra cada caja. Además, existen otros modos alternativos de posicionamiento, que podemos
cambiar mediante la propiedad position, que nos permiten modificar la posición de los 
elementos y su contenido. Utilizando las propiedades que proporciona CSS para alterar 
la posición de las cajas es posible realizar efectos muy avanzados y diseñar estructuras
de páginas que de otra forma no serían posibles.

Si utilizamos un modo de posicionamiento diferente al estático (absolute, fixed, sticky o relative),
podemos emplear una serie de propiedades para modificar la posición de un elemento. En este sentido, 
las propiedades top, bottom, left y right sirven para mover un elemento desde la orientación que
su propio nombre indica al otro extremo. Esto es, si utilizamos left e indicamos 20px,
estaremos indicando mover desde la izquierda 20 píxeles hacia la derecha.

Entonces a la propiedad position de CSS especifica cómo un elemento es posicionado en el documento. 
Las propiedades top, right, bottom, y left determinan la ubicación final de los elementos.
A esta propiedad se le pueden indicar los valores siguientes:

● static: es el valor por defecto, un elemento con este valor no está posicionado con CSS.
El elemento se renderiza de acuerdo al flujo normal del documento. 

● relative: El elemento es posicionado de acuerdo al flujo normal del documento, y luego
es desplazado respecto a sí mismo, a partir de las propiedades top, right, bottom, and left
variamos la posición del elemento. Por ejemplo:*/

.contenedor {
    position: relative;
    left: 30px;
    top: 10px;
    border: 2px solid blue;
    background-color: lightblue;
    width: 300px;
    height: 100px;
   }
/*

● absolute: hace que un elemento se ubique considerando su contenedor posicionado más 
cercano. Si no encuentra ningún contenedor padre posicionado cercano, el elemento se colocará 
respecto a la ventana gráfica. El resto de  los elementos de la página ignoran la nueva posición 
del elemento, entonces el elemento es removido del flujo normal del documento, sin crearse espacio
alguno para el elemento en el esquema de la página. 

Al utilizar esta propiedad, los márgenes del elemento se comportan de manera diferente 
a como lo hacen en los elementos con posicionamiento estático o relativo. No colapsan: 
A diferencia de los elementos con posicionamiento estático o relativo,
donde los márgenes adyacentes pueden colapsarse en un único margen más grande, 
los márgenes de los elementos absolutamente posicionados se mantienen independientes.
Esto significa que el espacio alrededor del elemento se conserva tal como se define en las reglas CSS.

● fixed: El posicionamiento fijo es hermano del posicionamiento absoluto. Funciona igual, salvo que
hace que el elemento se muestre en una posición fija dependiendo de la región visual del navegador.
En este caso, la caja está posicionada con respecto a la ventana del navegador y se mantiene en el 
mismo lugar en la página, aunque el usuario haga scroll y se desplace hacia abajo.

● sticky: al realizar un scroll y después de alcanzar una posición de desplazamiento 
determinada, se 'pega' al borde elegido. El posicionamiento sticky puede considerarse un híbrido 
de los posicionamientos relativo y fijo. Un elemento con posicionamiento sticky es tratado 
como un elemento posicionado relativamente hasta que cruza un umbral especificado, en cuyo punto
se trata como fijo hasta que alcanza el límite de su padre. Por ejemplo...*/

#one {
    position: sticky;
    top: 10px;
  }

 /*...posicionaría el elemento con id uno relativamente hasta que el viewport sea desplazado 
 de manera tal que el elemento esté a menos de 10 píxeles del límite superior. Más allá de ese umbral,
el elemento sería fijado a 10 píxeles del límite superior. 

Un uso común para el posicionamiento sticky es para los encabezados en una lista alfabética.
El encabezado "B" aparecerá justo por debajo de los ítems que comienzan con "A" hasta que se hayan 
desplazado más allá de la pantalla. En vez de deslizarse fuera de la pantalla como el resto del contenido,
el encabezado "B" se mantendrá fijado al límite superior del viewport hasta que todos los ítems "B" 
se hayan desplazado fuera de la pantalla, en cuyo punto será cubierto por el encabezado "C",
y así sucesivamente. Se debe especificar un umbral con al menos uno de top, right, bottom, or left 
para que el posicionamiento sticky se comporte de forma esperada. Caso contrario, 
será indistinguible del posicionamiento relativo.

#Consideraciones de accesibilidad

Asegurarse de que los elementos posicionados con valor absolute o fixed no oscurezcan
el resto del contenido cuando la página sea ampliada para aumentar el tamaño del texto.

Performance y accesibilidad

Los elementos que se desplazan que contienen contenido fixed o sticky content pueden ocasionar
problemas de performance y accesibilidad. Mientras un usuario desplaza la página, el navegador 
debe realizar repaint del contenido sticky o fijo en una nueva locación. Dependiendo del contenido
que precisa ser repainted, la performance del navegador y la velocidad de procesamiento del dispositivo,
el navegador podría no ser capaz de realizar el repaint a 60 fps, ocasionando problemas de accesibilidad
para personas con sensibilidades y desprolijidad para todos. Una solución es agregar will-change: 
transform (en-US) a los elementos posicionados para renderizar el elemento en su propia capa,
mejorando la velocidad del repaint y por lo tanto mejorando performance y accesibilidad.

Más info: https://developer.mozilla.org/es/docs/Web/CSS/position

Profundidad (z-index)

Establece el nivel de profundidad de un elemento sobre los demás. De esta forma, podremos
superponer los elementos, quedando 'apilados'. Los elementos se posicionan de acuerdo al nivel
de profundidad, quedando 'encima' los que poseen un valor de index mayor. 
*/

.box{
    position: absolute;
    width:100px;
    height:140px;
    border: 2px solid black;
    opacity: 90%;
   }

   .z1 {
        background-color: lightcoral;
        left: 0px;
        top: 0px;
        z-index: 20;
   }

    .z2 {
        background-color: lightblue;
        left: 30px;
        top: 30px;
        z-index: 10;
    }

    .z3 {
        background-color: lightgreen;
        left: 60px;
        top: 60px;
        z-index: 0;
    }   

/*

Propiedad visibility y display

La propiedad de visibilidad especifica si un elemento es visible o no. Con esta propiedad, 
puedo ocultar y eliminar un elemento del diseño del documento, aunque los elementos ocultos
ocupan espacio en la página.

visibility: visible|hidden|collapse|initial|inherit;

Cada etiqueta HTML tiene un tipo de representación visual en un navegador, lo 
que habitualmente se suele denominar el tipo de caja. En principio, se parte de 
dos tipos básicos: inline y block. Entonces, la propiedad display, por su parte, especifica
el comportamiento de visualización de un elemento. Por ejemplo, especifica si un elemento 
debe ser tratado como un elemento en bloque o en línea.

display: value;

Cada elemento tiene un valor de display por defecto. Recordemos que los 
navegadores le dan a los elementos valores por defecto block e inline:

● block: el elemento empieza en una nueva línea (div, h1-h6, header, etc)
● inline: puede contener algo de texto dentro de un párrafo sin interrumpir el 
flujo del párrafo. 
● none: es utilizado para ocultar elementos sin eliminarlos, no deja un espacio 
donde el elemento se encontraba, como si no existiera.
● inline-block: Los elementos inline-block fluyen con el texto y demás 
elementos como si fueran elementos en línea y además respetan el ancho, el 
alto y los márgenes verticales. Entonces el elemento genera una caja de elemento 
de bloque que fluye con el contenido circundante como si fuera una caja en línea 
(comportándose como un elemento reemplazado).

La tabla siguiente muestra una lista de los valores de la propiedad:

block ~ Se apila en vertical. Ocupa todo el ancho disponible de su etiqueta contenedora.
inline ~ Se coloca en horizontal. Se adapta al ancho de su contenido. Ignora width y height.
inline-block ~ Una combinación de las dos anteriores. Se comporta como inline pero no ignora width y height.

flex ~ Utiliza el modelo de cajas adaptables de Flexbox. Muy bueno para diseños adaptables.
inline-flex ~ La versión en línea (ocupa solo su contenido) del modelo de cajas flexibles de Flexbox.
grid ~ Utiliza cuadrículas o rejillas con el modelo de cajas Grid CSS.
inline-grid ~ La versión en línea (ocupa solo su contenido) del modelo de cajas Grid CSS.

list-item ~ Actúa como un ítem de una lista. Es el comportamiento de etiquetas como <li>.
table ~ Actúa como una tabla. Es el comportamiento de etiquetas como <table>.
table-cell ~ Actúa como la celda de una tabla. Es el comportamiento de <th> o <td>.
table-row ~ Actúa como la fila de una tabla. Es el comportamiento de <tr>

Ocultar elementos

Utilizar visibility: hidden es muy interesante si queremos que un elemento y su 
contenido se vuelva invisible, pero siga ocupando su espacio y así evitar que los 
elementos adyacentes se desplacen, lo que suele ser un comportamiento no 
deseado en algunas ocasiones cuando se aplica display: none.

Otra opción interesante es utilizar la propiedad opacity junto a transiciones o 
animaciones, desplazarse desde el valor 0 al 1 o viceversa. De esta forma 
conseguimos una animación de aparición o desvanecimiento.

 +info: https://lenguajecss.com/css/maquetacion-y-colocacion/propiedad-display/
*/