UD01 | Hojas de estilo en la construcción de una página web

Modelo de caja

Introducción (medidas [width y height], margin, padding y border)

padding
Se presentan las principales propiedades CSS relacionadas con el modelo de caja del CSS:
padding

Propiedades básicas en el modelo de caja
Ejemplo:

p.parrafo-1{

    border-style: solid;
paddingpadding
    background-color:cadetblue;

    padding: 20px;padding

    margin: 40px;

    border-color: red;
padding
    width: 300px;

    height: 300px;

    /* Los elementos de bloque, como los párrafos,padding

    admiten las propiedades width y height */

}
padding padding
padding padding
Se presentan las propiedades width y height de CSS y su efecto sobre los elementos de bloque y en línea:

Propiedades width y height
Ejemplo:

span.en-linea{

    background-color: khaki;

    width: 300px;

    height: 300px;

    /* Las propiedades width y height no tienen

    efecto sobre los elementos en línea */ 

    margin: 30px;

    /* Los márgenes superior e inferior no tienen efecto

    sobre los elementos en línea */ 

    padding: 30px;

}
Se presentan las diferencias existentes al aplicar márgenes sobre elementos de bloque y elementos de línea:

Márgenes
Ejemplo:

        /* Estilo .bloque-1 */

    .bloque-1{

        /* Margin es una propiedad de tipo short-hand */

        margin: 100px;

        /* Un valor: mismo margen en todos los lados */



        margin: 100px 50px;

        /* Dos valores: 100px arriba y abajo y 50px a la

           derecha y a la izquierda */

        

        margin: 100px 50px 10px;

        /* Tres valores: 100px arriba, 50px a la derecha y a

           la izquierda y 10px abajo */

        

        margin: 100px 50px 10px 200px;

        /* Cuatro valores: 100px arriba, 50px a la derecha,

           10px abajo y 200px a la izquierda (los valores

           siguen el sentido de las agujas del reloj) */



        /* Pueden aplicarse márgenes individuales mediante

           las siguientes propiedades: 

            margin-top

            margin-right

            margin-bottom

            margin-left

        */

    }
Se presenta la forma de aplicar padding sobre elementos de bloque y elementos de línea:

Padding
Ejemplo:

.bloque-1{

    /* Padding es una propiedad de tipo short-hand */

    padding: 100px;

    /* Un valor: mismo padding en todos los lados */



    padding: 100px 50px;

    /* Dos valores: 100px arriba y abajo y 50px a la

       derecha y a la izquierda */

    

    padding: 100px 50px 10px;

    /* Tres valores: 100px arriba, 50px a la derecha y a la

       izquierda y 10px abajo */

    

    padding: 100px 50px 10px 200px;

    /* Cuatro valores: 100px arriba, 50px a la derecha,

       10px abajo y 200px a la izquierda (los valores

       siguen el sentido de las agujas del reloj)  */



    /* Pueden aplicarse padding individuales mediante las

       siguientes propiedades: 

        padding-top

        padding-right

        padding-bottom

        padding-left

    */

}
Se describen las propiedades que permiten asignar border a los elementos HTML:

Bordes
Ejemplo:

h1 {

    border: 10px solid red; /* Border es una propiedad shorthand */

    /* La regla anterior es equivalente a:

        border-width: 15px;

        border-style: solid;

        border-color: red;

    padding

        Estas tres propiedades son también shorthand

    */

}
Ejercicios de repaso de modelo de caja

Tamaño final de la caja

Se describe la propiedad boxsizing que determina el tamaño final de una caja:

Box-sizing
Ejemplo:

.caja-1 {

    width: 100px;

    border: 30px solid white;

    box-sizing: content-box;

    /* Ancho total: 130px */

}



.caja-2 { 

    width: 100px;

    border: 30px solid white;

    box-sizing: border-box;

    /* Ancho total: 100px */

}

Display básico

Se describen los valores básicos de la propiedad display:

Display básico
Ejemplo:

.parrafo-1 {

    display:inline;

    width: 150px;

    /* al ser un elemento inline no admite esta propiedad */



    margin-top: 300px;

    /* al ser un elemento inline no admite esta propiedad */

}



.span-1 {

    display:block;

    width: 150px;

    /* al ser un elemento de bloque sí admite esta propiedad */

    

    margin-top: 30px;

    /* al ser un elemento de bloque sí admite esta propiedad */

}



.span-2{

    display:inline-block;

    width: 250px;

    /* al ser un elemento de inline-block sí admite esta propiedad */

    

    margin-top: 80px;

    /* al ser un elemento de inline-block sí admite esta propiedad */



}

Desbordamientos

Se describen los principales valores de la propiedad overflow

Overflow visible
Ejemplo:

.caja-1 {

    overflow: visible;

    /* Muestra el contenido desbordado. Visible es el valor

       por defecto; sería equivalente a no poner nada. */

}

Overflow hidden
Ejemplo:

.caja-2 {

    overflow: hidden;

    /* Oculta el contenido desbordado. */

}

Overflow scroll
Ejemplo:

.caja-3 {

    overflow: scroll;

    /* Muestra las barras de desplazamientop incluso si no

       son necesarias. */

}

Overflow auto
Ejemplo:

.caja-5 {

    overflow-y: auto;

    /* Muestra la barra de desplazamiento vertical solo si

       es necesaria. */

}

Problemas entre padres e hijos

Se describe el problema que afecta al modelo de caja cuendo se aplican márgenes al primer hijo de la caja. Se aportan varias soluciones:

Problema de los márgenes hijos | Solución 1
Ejemplo:



header{

    width: 100%;

    height: 100px;

    background-color: brown;

    color: white;

    /* Solución 1 */

        padding:20px;

}



h1{

    text-align: center;

    /* Solución 1 */

        margin-top: 0;

}

Problema de los márgenes hijos | Solución 2
Ejemplo:



header{

    width: 100%;

    height: 100px;

    background-color: brown;

    color: white;

    /* solución 2 */

        overflow: hidden;

}



h1{

    text-align: center;

}

Problema de los márgenes hijos | Solución 3
Ejemplo:



header{

    width: 100%;

    height: 100px;

    background-color: brown;

    color: white;

    /* solución 3 */

        padding-top: 0.1px;

}



h1{

    text-align: center;

}

Problema de los márgenes hijos | Solución 4
Ejemplo:



header{

    width: 100%;

    height: 100px;

    background-color: brown;

    color: white;

    /* solución 4 */

        border-top: 0.1px solid brown;

}



h1{

    text-align: center;

}

Colapsamiento de márgenes verticales

Se describe el efecto de los márgenes colapsados entre dos cajas:

Márgenes colapsados
Ejemplo:

<p class="caja-1">Soy la caja 1<br>Mi margen inferior colapsa

con el superior de la caja 2.</p>



<p class="caja-2">Soy la caja 2<br>Mi margen superior colapsa

con el inferior de la caja 1.</p>



<!-- La separación entre las dos cajas equivale al mayor de

los márgenes existente entre ellas -->

Outline

Se describe el uso de outline:

Los bordes desplazan al resto de cajas
Ejemplo:

.caja-1{

    border: 50px solid white;

    /* La propiedad border desplaza al resto de cajas */

}

Outline no desplaza el resto de cajas
Ejemplo:

.caja-2{

    outline: 70px solid yellow;

    /* La propiedad outline no desplaza al resto de cajas */

}

Radios de bordes y outline
Ejemplo:

.caja-3{

    border: 1em solid white;

    border-radius: 1em;

    outline: 1em solid blue;

    /* no existe la propiedad outline-radius */

}

Propiedad outline-offset
Ejemplo:

.caja-4{

    border: 1em solid white;

    outline: 1em solid blue;



    /* Outline con valores positivos separa el outline */

    outline-offset: 1em;

}

Propiedad outline-offset con valores nagativos
Ejemplo:

.caja-5{

    border: 0.3em solid white;

    outline: 0.3em solid blue;



    /* Outline con valores negativos Retrae el outline */

    outline-offset: -1em; 

}

Boxshadow

Se describe el uso de box-shadow:

Desplazamiento de la sombra en X e Y
Ejemplo:

.caja-1{

    box-shadow: 10px 10px;

    /* box-shadow, al igual que outline, no empuja a las cajas */

}

Desenfoque
Ejemplo:

.caja-2{

    box-shadow: 10px 10px 10px;

}

Tamaño de la sombra
Ejemplo:

.caja-3{

    box-shadow: 10px 10px 10px 20px;

}

Color de la sombra
Ejemplo:

.caja-4

    color: blue;

    box-shadow: 10px 10px 10px 20px green;

}

/* Por de fecto la sombra tienen el color del texto del elemento */

Sombras interiores (inset)
Ejemplo:

.caja-5{

    box-shadow: inset 10px 10px 10px 20px green;

}

Varias sombras
Ejemplo:

.caja-6{

    box-shadow: 5px 5px white, 10px 10px blue;

}