Diseño web

Trabajo Lenguajes de Programación

Comienza Ya. Es Gratis
ó regístrate con tu dirección de correo electrónico
Diseño web por Mind Map: Diseño web

1. Cajas

1.1. Rodean al elemento para determinar su área

1.1.1. Display

1.1.1.1. Es una propiedad que determina si el elemento es Block, Inline o None

1.1.1.2. Block

1.1.1.2.1. Cada elemento se muestra en una diferente línea y tiene tamaño personalizado

1.1.1.3. Inline

1.1.1.3.1. El tamaño del elemento depende del contenido de este, los elementos se muestran en la misma línea

1.1.1.4. None

1.1.1.4.1. Elimina el elemento

1.1.1.5. inline-block

1.1.1.5.1. Tiene tamaño personalizado y los elementos se agrupan en la misma línea

2. Modelo de Caja Flexible

2.1. El modelo de caja tradicional, no es del todo eficiente al momento de dividir el espacio en el contenedor, es por eso que se creó el modelo de caja flexible

2.1.1. Contenedor Flexible

2.1.1.1. Consiste en medir el espacio del contenedor y dividirse entre los demás elementos con los que comparte espacio, así, los elementos pueden ser distribuidos sin necesidad de hacerlos flotar

2.1.1.1.1. display: flex

2.1.1.1.2. display: inline-flex

2.1.1.1.3. NOTA

2.1.2. Elementos Flexibles

2.1.2.1. flex-grow

2.1.2.1.1. Determina la proporción en la que el elemento se va a expandir o encoger

2.1.2.2. flex-shrink

2.1.2.2.1. Declara la proporción en la cuál el elemento se va a reducir

2.1.2.3. flex-basis

2.1.2.3.1. Declara el tamaño inicial del elemento

2.1.2.4. flex

2.1.2.4.1. Configura los valores de grow,shrink y basis al mismo tiempo

2.1.3. Organizando Elementos Flexibles

2.1.3.1. Su forma de organización son: main-start (Inicio en el eje principal), main-end (final del eje principal), cross-start(Inicio del eje transversal) y cross-end (final del eje transversal)

2.1.3.1.1. Determina la altura máxima

2.1.3.1.2. Normalmente el eje principal es la orientación horizontal y el eje transversal el eje vertical

2.1.3.2. flex-direction

2.1.3.2.1. Define el orden y la orientación de las cajas en un contenedor flexible: row, row-reverse, column y column-reverse

2.1.3.3. justify-content

2.1.3.3.1. Determina la distribución del espacio libre: flex-start, flex-end, center, space-between y space-around

2.1.3.4. align-items

2.1.3.4.1. Alinea las cajas en el eje transversal: auto, flex-start, flex-end,center,baseline y stretch

2.1.3.5. align-self

2.1.3.5.1. Alinea a una caja individual en el eje transversal: auto, flex-start, flex-end,center,baseline y stretch

2.1.3.6. flex-warp

2.1.3.6.1. da permiso o no de crear múltiples líneas de cajas: warp, nowarp y warp-reverse

2.1.3.7. align-content

2.1.3.7.1. Alinea las líneas de cajas en el eje vertical: felx-start, flex-end, center, space-between, space-around y stretch

3. Modelo de caja Tradicional

3.1. Contenido Flotante

3.1.1. Float

3.1.1.1. Hace que los elementos floten a la izquierda o a la derecha (Float: left/ Float: Right)

3.1.1.2. Si el elemento con la propiedad Float es más alto que el resto desbordará del contenedor y crea desorden

3.1.1.2.1. Overflow

3.1.1.2.2. Fuerza al contenedor a ajustarse al tamaño del contenido o...

3.1.1.2.3. Cajas Flotantes

3.1.1.2.4. Posicionamiento Absoluto

3.1.1.2.5. Columnas