Esta expresión la debemos de poner al princiipio de los estilos:
 *{
    box-sizing: border-box;
}   



EDITAR ELEMENTOS PARA METER LOS ESTILOS:
   Para un elemento especifico, escribimos la ruta del objeto en el html partiendo desde el primer elemento en la
   jerarquia tras el body (usamos parametros como :nth-of-type(1,2,3,4, el que sea).
   Usamos > para dirigirnos a elementos dentro de otros. Y abrimos una llave {.
   Si solo escribimos el objeto(section, img, div, etc.), aplicara la configuracion
   a todos los elementos de ese tipo:
   EJEMPLOS:
   article:nth-of-type(4) > section > p{
   article:nth-of-type(1){
   article:nth-of-type(2) > section
   div{ (se aplica a todos los div)
   img{ (se aplica a todos los img)


    COMANDOS CSS:
    Background-color: cambia el color del fondo del elemento.
    Background-image: imagen de fondo. Opcion: url(ruta de la imagen)
    Border: coloca un borde alrededor del elemento
    (opciones: tamaño [2px] color [red] tipo de border [solid])
    Outline: como un border pero hace un borde dentro del elemento (bloque, caja...)
    Margin: establece un margen al elemento (ejemplo, 20px auto le pone un margen superior
    e inferior de 20px y un margen a la izquierda y a la derecha automatico)
    Display: flex = expresión necesaria poder distribuir los elementos dentro del bloque
    al que se lo aplicamos horizontalmente.
    flex: wrap = Distribuye horizontalmente los elementos pero si superan el 100% de la anchura
    del espacio disponible, traspasa la información a la siguiente línea.
    flex: nowrap = Mete a la fuerza a todos los elementos en una sola linea. Utilizar
    el flex wrap cuando tengamos que colocar elementos en varias lineas.
    justifiy-content = Manera de distribuir el espacio entre los elementos del flex:
    space-around pone espacio alrededor de los elementos, dejandolos centrados
    y space-evenly hace que el espacio sea el mismo entre el margen y el bloque y entre
    los propios bloques (   elemento   elemento   ) 
    flex-direction: row-reverse = coloca los elementos de la linea en un display flex
    de forma inversa a la que estan puestos en el html (si tenemos una imagen primero
    y un section despues, row-reverse coloca el section primero y la imagen ultima)
    width = anchura que ocupa el elemento.

    EXPLICACION DE COMO COLOCAR OBJETOS EN VARIAS LINEAS:
    Cuando tenemos una caja y se nos pide que en
    una linea este el titulo, en la siguiento una imagen y una seccion y que la tercera
    acabe con un parrafo, por ejemplo, establecemos un flex-wrap: wrap y
    vamos jugando con la anchura: titulo width 100% (ocupa toda la linea y manda 
    al section y la img a la siguiente) img 30% section 65% y la
    tercera linea la ocupa el parrafo con un width 100%.
    padding: establece un margen entre los elementos dento de una caja con display: flex
    
    PERSONALIZAR TEXTO:
    
    Font-size: (n)em = tamaño de texto
    Color: color = color de TEXTO
    align-text: center/justify/left/right = alinear TEXTO.
    letter-spacing: (n)px = espacio entre letras
    word-spacing = lo mismo qu eel anterior pero con palabras.
    text-shadow: (desplazamiento eje x)px (desplazamiento y)px (tamaño sombra)px color:
    = Añade sombra al texto


    EJEMPLO GRÁFICO DE LOS BLOQUES

    body (tiene el display-flex y flex-wrap: wrap)
        hijo1 (width: 48%) hijo2 (width: 48%)
        hijo2 (width: 100%, tiene flex-wrap: wrap)
            nieto1 (width: 100%)
            nieto2 (width: 30%) nieto3 (width: 68%)
            nieto4 (width: 100%)
        hijo3 (width: 100%)

    Hijo1,2,3... podrian ser article, div...
    Nieto1 podria ser un titulo (h1,2,3) o un parrafo dentro de hijo2
    Nieto2 podria ser una imagen
    Nieto3 podria ser un section dentro del article/div hijo2
    Nieto4 puede ser un parrafo (p) que contenga la ultima informacio que esta dentro del
    bloque de hijo2.
    Si quisieramos cambiar el orden de la linea nieto2 - nieto3 para que nieto3 aparezca
    a la izquierda: row-reverse escrito en los estilos de hijo2.