Curso Basico de CSS - 5. Modelo de Caja

Summary

En este capítulo del curso de CSS básico, Carlos Arturo nos enseña sobre el modelo de caja, una parte fundamental para la estructura de sitios web. Explica cómo los elementos HTML se representan como cajas rectangulares y cómo se pueden modificar sus tamaños, márgenes, rellenos y bordes. También aborda la diferencia entre elementos de tipo bloque y en línea, y cómo trabajar con ellos para diseñar de manera efectiva un sitio web. A través de ejemplos prácticos, muestra cómo aplicar estilos CSS para ajustar el ancho, alto, y otros atributos de las cajas, destacando la importancia del modelo de caja en la maquetación web.

Takeaways

• 😀 El modelo de caja es fundamental para la estructura de sitios web, ya sea complejos o no.
• 🔲 Los elementos del sitio web se representan como cajas rectangulares según el modelo de caja.
• 📏 Se pueden modificar el ancho, alto, márgenes internos (relleno), márgenes externos (margin) y los bordes de las cajas.
• 👀 Es posible cambiar la visualización de las cajas, incluyendo ocultarlas, mostrarlas y desplazarlas.
• 🎨 Los elementos de tipo bloque se estiran para llenar el espacio, mientras que los elementos de tipo línea solo abarcan el espacio que necesitan.
• 📐 Los elementos de tipo bloque tienen un ancho predeterminado del 100%, mientras que los elementos de tipo línea no tienen un ancho o alto fijo.
• 🌈 Se pueden aplicar estilos CSS a los elementos para modificar su apariencia y comportamiento en el modelo de caja.
• 📏 La propiedad 'width' permite definir el ancho de un elemento, y 'height' define su altura.
• 📐 Los márgenes ('margin') y el relleno ('padding') afectan el espacio entre los elementos y dentro de ellos, respectivamente.
• 🖌️ Los bordes ('border') se pueden personalizar en cuanto a su grosor, estilo y color para dar forma a las cajas.
• 🔄 La propiedad 'display' permite cambiar el comportamiento de los elementos, permitiéndoles aparecer en línea o en bloque según sea necesario.

Q & A

¿Quién es el presentador del curso de CSS básico en el guion proporcionado?

El presentador del curso de CSS básico es Carlos Arturo.

¿Cuál es el tema principal del capítulo del curso de CSS básico?

El tema principal del capítulo es el modelo de caja, que es fundamental para la estructura de sitios web complejos y no tan complejos.

¿Qué permite hacer el modelo de caja en CSS?

El modelo de caja permite establecer el diseño de los sitios web, representando a los elementos como cajas rectangulares y permitiendo modificar su tamaño y aspecto.

¿Qué elementos se pueden modificar en el modelo de caja según el guion?

Se pueden modificar el ancho y el alto, los márgenes internos (relleno), el margen externo (margin), y los bordes de los elementos.

¿Qué es un DIF y cómo se relaciona con el modelo de caja?

Un DIF es un rectángulo o cuadro que actúa como un contenedor en el modelo de caja, y se puede modificar su tamaño y otros aspectos.

¿Cómo se diferencian los elementos de tipo bloque y los elementos de tipo línea en el modelo de caja?

Los elementos de tipo bloque abarcan todo el espacio horizontal y se estiran lo más posible, mientras que los elementos de tipo línea solo abarcan el espacio que necesitan y no se estiran más allá de eso.

¿Qué propiedad de CSS se utiliza para establecer el ancho de un elemento y cómo se aplica en el guion?

La propiedad 'width' se utiliza para establecer el ancho de un elemento. En el guion, se le asigna un valor de 500 píxeles a un elemento y luego se modifica a 1000 píxeles y a 50% del ancho del documento.

¿Qué propiedades de CSS se mencionan para agregar márgenes a los elementos y cómo se diferencian?

Las propiedades 'margin' y 'padding' se mencionan para agregar espacio. 'Margin' agrega espacio externo entre el elemento y otros elementos, mientras que 'padding' agrega espacio interno entre el borde del elemento y su contenido.

¿Cómo afecta el borde (border) al tamaño de un elemento en el modelo de caja según lo explicado en el guion?

El borde agrega al tamaño total del elemento, ya que se añade a los lados del ancho y del alto del elemento, lo que hace que la caja crezca en tamaño.

¿Qué propiedad de CSS permite cambiar el comportamiento de un elemento de bloque a uno en línea y cómo se ejemplifica en el guion?

La propiedad 'display' permite cambiar el comportamiento de un elemento. En el guion, se muestra cómo se puede cambiar de 'block' a 'inline-block' para que los elementos se coloquen uno al lado del otro.

¿Cómo se puede seguir el trabajo de Carlos Arturo fuera del curso de CSS básico?

Se puede seguir el trabajo de Carlos Arturo suscribiéndose al canal, siguiendolo en Twitter en @falconmasters y visitando su sitio web www.falconmasters.com.

Outlines

00:00

📐 Introducción al Modelo de Caja en CSS

Carlos Arturo presenta el capítulo dedicado al modelo de caja, una parte fundamental para la estructura de sitios web. Explica que el modelo de caja permite representar elementos como cajas rectangulares y modificar su tamaño, relleno, margen y bordes. Se muestra una imagen que ilustra el concepto y se menciona la importancia de entender que todos los elementos web son rectangulares en su estructura, aunque visualmente puedan ser modificados para dar una apariencia diferente. Además, se menciona la diferencia entre elementos de bloque (que toman todo el espacio) y elementos de línea (que solo toman el espacio necesario), y cómo esto afecta la forma en que se manejan en el diseño web.

05:00

🎨 Modificación de Propiedades del Modelo de Caja

Se continúa la explicación del modelo de caja, profundizando en cómo modificar el ancho y la altura de los elementos, así como los márgenes y el relleno. Se muestra cómo el navegador agrega márgenes por defecto y cómo se pueden ajustar utilizando la propiedad 'margin'. También se aborda el concepto de 'padding', el espacio interno que rodea el contenido, y cómo afecta el tamaño total del elemento. Se menciona la importancia de tener en cuenta estos espacios al establecer tamaños, ya que pueden alterar la apariencia visual de la página. Además, se introduce la propiedad 'border' para agregar bordes a los elementos y cómo esto puede aumentar el tamaño de la caja.

10:01

🔄 Manejo Avanzado del Modelo de Caja y Posicionamiento

En este último párrafo, Carlos Arturo aborda técnicas más avanzadas del modelo de caja, como el uso de 'display' para cambiar el comportamiento de los elementos, permitiendo que elementos en bloque se muestren uno al lado del otro. Se muestra cómo se puede forzar a los elementos a ser en línea o en bloque y cómo esto afecta su disposición en la página. También se menciona el uso de 'inline-block' para que los elementos se coloquen uno al lado del otro y aún se puedan modificar sus propiedades de tamaño y márgenes. Finalmente, se concluye el capítulo con una invitación a seguir el canal y a visitar el sitio web de Carlos Arturo para más recursos sobre desarrollo y diseño web.

Keywords

💡Modelo de caja

El 'Modelo de caja' es un concepto fundamental en CSS que permite visualizar y manipular cómo se representan los elementos en una página web, considerándolos como cajas rectangulares. Es esencial para definir el tamaño, el relleno, los márgenes y los bordes de los elementos. En el video, se utiliza para explicar cómo se pueden modificar estas propiedades para dar forma y estructura a un sitio web.

💡Ancho (width)

El 'ancho' se refiere a la medida horizontal de un elemento en la página web. En el script, se menciona cómo se puede establecer el ancho de un 'div' utilizando la propiedad 'width' en CSS, y cómo esto afecta el diseño general del sitio, como se muestra al establecer un ancho de 500 píxeles o el 50% del ancho del documento.

💡Alto (height)

El 'alto' es la medida vertical de un elemento. En el video, se discute cómo se puede fijar el alto de un 'div' con la propiedad 'height', y se da un ejemplo de cómo un alto fijo de 300 píxeles puede causar problemas si no se tiene en cuenta el contenido del elemento y los paddings o márgenes adicionales.

💡Relleno (padding)

El 'relleno' es el espacio entre el contenido de un elemento y su borde. Se utiliza para separar visualmente el contenido del borde y entre sí los elementos adyacentes. En el script, se ejemplifica cómo agregar un padding de 30 píxeles a todos los lados de un 'div' afecta su apariencia y dimensión total.

💡Margen (margin)

El 'margen' es el espacio exterior que rodea un elemento, separándolo de otros elementos adyacentes. Se maneja con la propiedad 'margin' en CSS. En el video, se muestra cómo aplicar un margen de 20 píxeles en todas las direcciones a un 'div' para controlar su posición relativa a otros elementos.

💡Borde (border)

El 'borde' es una línea que rodea el contenido de un elemento, definiendo su perímetro. Se personaliza con la propiedad 'border' en CSS, pudiendo establecer su grosor, estilo y color. En el script, se menciona cómo se puede hacer un borde de 10 píxeles de grosor y color negro para un 'div', lo que afecta su tamaño visible.

💡Tipos de elementos

Los 'tipos de elementos' se refieren a cómo se comportan los elementos en el flujo del documento. En el video, se diferencian los elementos de tipo 'block', que ocupan todo el ancho disponible y se alinean verticalmente, y los de tipo 'inline', que solo ocupan el espacio necesario para su contenido. Este concepto es crucial para entender cómo se distribuyen los elementos en una página.

💡Posicionamiento (positioning)

El 'posicionamiento' en CSS se refiere a cómo se sitúan los elementos en relación con otros en la página. Aunque no se discute en profundidad en el script, se menciona como un tema que se explorará más adelante, y es fundamental para el diseño y la maquetación avanzada de un sitio web.

💡CSS

CSS (Hoja de Estilo en Cascada) es el lenguaje utilizado para describir la presentación de un documento escrito en un lenguaje de marcado, como el HTML. En el video, CSS se utiliza para aplicar estilos y dar forma a los elementos del sitio web, como se muestra al manipular las propiedades del modelo de caja.

💡Diseño web

El 'diseño web' es el proceso de crear la estructura, el layout y el estilo visual de un sitio web. En el script, el diseño web está implícito en la discusión sobre cómo utilizar el modelo de caja y las propiedades CSS para crear una página atractiva y funcional.

💡Tamaños dinámicos

Los 'tamaños dinámicos' se refieren a la capacidad de los elementos para ajustarse al contenido o al espacio disponible. En el video, se menciona cómo los elementos de tipo 'inline' no pueden tener un ancho o alto fijos, y cómo se pueden utilizar técnicas como 'inline-block' para que los elementos se comporten de manera diferente y se ajusten dinámicamente.

Highlights

Bienvenidos al curso de CSS básico.

Introducción al modelo de caja en CSS.

El modelo de caja permite establecer el diseño de sitios web.

Todos los elementos en la web se representan como cajas rectangulares.

Explicación sobre cómo modificar el ancho, alto, márgenes internos y externos de un DIV.

Diferencias entre elementos de tipo bloque y en línea.

Los elementos en línea solo ocupan el espacio necesario, mientras que los bloques ocupan el 100% del ancho disponible.

No se puede establecer ancho y alto en elementos en línea sin convertirlos a bloque.

Uso de la propiedad 'margin' para agregar márgenes externos.

Uso de la propiedad 'padding' para agregar márgenes internos.

Consideración del crecimiento del contenedor al agregar 'padding'.

Importancia de entender el impacto de 'padding' y 'margin' en las dimensiones de la caja.

Uso de la propiedad 'border' para agregar bordes a los elementos.

Demostración de la propiedad 'display' para cambiar la visualización de las cajas.

Conclusión sobre la importancia del modelo de caja en el diseño de sitios web con CSS.

Transcripts

[Música]

[Música]

Hola Qué tal amigos bienvenidos sean

este nuestro siguiente capítulo del

curso de css básico Mi nombre es Carlos

Arturo y bien pues en este capítulo

vamos a estar viendo una parte

fundamental para la estructura de sitios

web complejos y y bueno no tan complejos

también qu es el modelo de caja el

modelo de caja nos permite establecer el

diseño de nuestros sitios web

prácticamente Por qué Porque este es el

modelo de caja es el encargado de que

los elementos se representen como cajas

rectangulares y que nosotros le podemos

dar tamaños e y Modificar el aspecto

como nosotros queramos yo aquí tengo una

imagen que he hecho en la cual

represento el modelo de caja bueno no no

completo pero una parte y el modelo de

caja es esto tenemos lo que es un DIF

que es este rectángulo este cuadro en

este caso un DIF es esto un conten

tenedor como ya sabrás dentro tengo una

etiqueta p que bueno simplemente es de

relleno y este es un DIF supongamos con

el Melo de caja nosotros podemos

modificar tanto el ancho como el Alto

Como los márgenes internos que se le

conocen como relleno el margen externo

que se le conoce como margin y también

los bordes que tiene pero no solo eso

también podemos modificar la

visualización de las cajas a esto me

refiero a que podemos tanto ocultar y

mostrar las cajas podemos desplazarlas

de lugar y Bueno podemos hacer muchas

cosas que son imprescindibles a la hora

de estar maquetando un sitio web a la

hora de estar acomodando todo y dándole

forma el módulo de caja prácticamente es

lo fundamental para crear sitios W con

css Así que bien pues vamos a ello yo

aquí tengo una estructura como ya podrás

haber visto la he cambiado un poco tengo

simplemente el titular tengo los dos

enlaces y tengo dos divs con un párrafo

dentro que es esta estructura que yo

tengo aquí eh yo aquí he agregado unos

estilos css simplemente para mostrarte

algo Antes de comenzar Y es que ahí está

Le he puesto un fondo a estos estilos le

he puesto un fondo tanto a los titulares

como a los los enlaces como a los

párrafos Y dips por qué le pongo esto de

fondo porque tienes que comprender algo

que es fundamental todos los elementos

del sitio web son rectangulares tú les

puedes modificar la forma Y hacer que

sean redondos pero en el fondo van a

seguir siendo rectangulares es la la

circunferencia tú simplemente la haces

visual para el usuario pero no para el

sitio web en en el fondo es decir en la

parte de atrás Entonces si nosotros

tenemos este fondo para cada elemento

como puedes ver algunos fondos se

extienden a lo largo de todo el

documento estos fondos son Porque estos

elementos son de tipo bloque existen

elementos de tipo bloque y de tipo línea

los elementos de tipo línea que son como

los enlaces si te fijas no abarcan todo

el documento que es todo el espacio

simplemente abarcan lo que

necesitan estos elementos de tipo en

línea como puedes ver si hay uno al lado

del otro pues se pone uno al lado del

otro no como en los elementos DIF que

aunque hay espacio no se ponen al lado

del otro esto porque son elementos

bloque un elemento bloque por defecto

tiene el 100% del espacio que pueda

contener se estira lo más que pueda y el

elemento en línea no solo se estira lo

que necesita para para tener espacio es

importante que sepas esto porque los

elementos en línea no les podemos dar un

ancho no les podemos dar un alto si les

Podemos agregar un margen y un padding

pero para poder darles un ancho y alto

tendríamos que modificarlos y hacer los

elementos en línea bloque que es otro

tipo de elemento Pero bueno ya vamos a

estar viendo esto ya Más adelante se

llaman las posicionamientos y también

con los display Pero bueno vamos a

comenzar con lo básico no vamos a

trabajar con los elementos en línea

simplemente con los divs para que veas

cómo se trabaja así que bien una vez que

te enseñé esto lo voy a borrar para

comenzar de nu de nuevo y vamos a ver

vamos a empezar a darle forma y a jugar

con los dips vamos a decirle que

queremos darle un ancho podemos darle un

ancho claro le podemos poner un wid que

la propiedad wid significa ancho y le

podemos decir queremos que sea de 500

píxeles Ahí está si actualizamos si te

fijas hay un pequeño cambio pero no

notamos realmente cómo es que sucedió

para esto le voy a agregar un

fondo con la propiedad background Voy a

agregar un color que es muy feo yo lo sé

pero no me acuerdo de otro es el color

naranja y como puedes ver ya tiene un

ancho de 500 píxeles que es lo que le

agregamos si le agregamos 1000 pues

tendría 1000 píxeles y así con cada uno

de ellos que bueno aquí le he puesto 100

píxeles es 1000 píxeles Ahí está si

actualizamos tiene los 1000 píxeles que

nosotros queremos y ya no tiene el 100%

del documento que le dijimos podemos

trabajar también con porcentajes como lo

dijimos pues por ejemplo con porcentajes

vamos decirle 50%

y va a marcar la mitad del documento ahí

está la mitad del documento y bien ya

trabajamos con esto pero qué más podemos

hacer podemos Modificar el ancho también

podemos modificar la altura esto es con

heate con he tambén le podemos modificar

podemos decirle que sea 300 píxeles Ahí

está si actualizamos son 300 píxeles de

alto y normalmente no se suele usar la

la propiedad hate es decir se ponen

hates automáticos es decir que crezca

conforme el contenido si nosotros le

ponemos No sé tres píxeles de alto si te

fijas va a haber un problema y es que se

ve muy chiquita incluso parece como si

fuera un borde le voy a agregar más por

ejemplo unos ocho píxeles para que

puedas notar si te fijas el fondo no no

abarca lo que es el el contenido

completo y bueno Esto no está bien así

que vamos a regresarla a 300 píxeles Me

parece bien para que puedas ver ahí está

Vamos a ponerle en 200 y vamos vamos a

ver otras propiedades porque estas no

son las únicas como sabes hay márgenes y

rellenos en este caso el navegador por

defecto agrega márgenes a todo a lo loco

eh No le hagas caso a estos márgenes que

hay pero si nosotros quisiéramos agregar

un margen entre este DIF y el de abajo

pues lo podemos hacer para los márgenes

externos se utiliza una propiedad

llamada margin esta propiedad margin lo

que nos permite es decirle Cuántos

márgenes queremos en en píxeles medidas

etcétera le podemos decir queremos 20

píxeles hacia todos los lados si le

ponemos simplemente 20 píxeles va a

tener margen arriba abajo y a los lados

de 20 píxeles si actualizamos si te

fijas hay un margen de 20 arriba de 20

abajo de 20 y a los dados también aunque

no se pueda ver si le ponemos eh Por

ejemplo 20 y le

ponemos aquí no se va a ver le voy a

poner 50 píxeles si le ponemos dos

medidas esta primer medida representa el

margen hacia arriba y hacia abajo y

estos 50 representan el margen hacia los

lados Así que si actualizamos si te

fijas hay un margen a los lados de 50

píxeles y arriba y abajo de 20

píxeles Así es como nosotros lo

manejamos

eem también Existen los padding y el

padding es el margen interior si te

fijas aquí agregamos un margen hacia

fuera para desplazar todo el contenido

pero qué pasa si este contenido le

queremos agregar un margen Pues para eso

existe el padding y el padding es se

maneja Exactamente igual si le le

ponemos una medida como por ejemplo 30

píxeles va a agregar un margen interno

en cada uno de los lados si actualizamos

si te fijas Obviamente el contenedor

crece ahorita te explico por qué pero

ahora tiene 30 píxeles hacia los lados

30 hacia arriba y abajo Ahí está y acá

también solo que no se ve si le quitamos

la propiedad hate vas a poder visualizar

mejor ahí está cómo tienes los el

contenido separado arriba y abajo y

hacia los lados si le quitamos el wid

también se lo ponemos automático Bueno

aquí Se va se va a hacer más grande al

100% bueno lo vamos a dejar de esta

manera simplemente y pero ahí están los

márgenes estos paddings también se

utilizan mucho el contenido crece claro

nosotros por ejemplo si le ponemos un

padding de 30 hacia cada uno de los

lados contamos 30 de abajo y 30 de

arriba son 60 O sea que si le ponemos

supongamos un height una altura de

supongamos 200 píxeles Ahí está 200

píxeles con el padding nosotros

tendríamos una medida real de

260 píxeles que nosotros no sabemos

nosotros tuvimos que hacer el cálculo

pero es importante saber eso porque hay

ocasiones en las que algo sale mal y no

te das cuenta de que si tú querías una

medida de 200 y le agregaste un padding

o un margin ya ya rompiste tu estructura

y ya no mide lo que tú querías Es

importante saber eso esto eh el madding

el padding y el margin Así es Y también

Podemos agregar lo que es el Border

Border que es el borde como su nombre lo

hice le podemos decir la medida que

nosotros queremos 10 píxeles le podemos

decir si es sólido en este caso hay más

formas no recuerdo bien Cuáles hay por

ejemplo está solid doted y otras vamos a

decirle que sea color negro y si

actualizamos ya tenemos un borde sólido

si te fijas la caja crece aún más porque

agrega otros 10 píxeles arriba y abajo a

lo que es el alto y también en los

anchos existe sólido existe dotted

dotted que Agrega una línea punte aguda

punteada no es punte aguda Son puntos e

cuál más no recuerdo bien Cuál es Ah se

utiliza prácticamente siempre solid y si

no tú puedes investigar las demás que

hay Esta es la que yo utilizo siempre no

utilizo otra más y ahí está es

importante que tengas en cuenta esto lo

de los tamaños eh Perdón que te lo haga

te lo recalque tanto pero sí es

importante que sepas que no siempre vas

a tener una medida estática es decir si

tú le pones una medida de 200 píxeles no

va a medir 200 de alto si tú tienes un

padding o un margen Entonces es

importante tener en cuenta eso en este

caso si queríamos la medida de 200 Qué

pasa que tenemos 30 hacia arriba y abajo

pues le quitamos 30 sería de 140 140 má

los 60 que son 30 * 2 nos darían los 200

píxeles Ahí está obviamente hay que

restarle ahora los 10 de borde que

serían otros 20 Ahí está actualizamos y

ahora sí nuestra caja ya mide 200 como

puedes ver y así es como se trabaja el

modelo de caja Puedes hacer cosas

todavía más más avanzadas como por

ejemplo poner una al lado del otro

incluso cuando son en block para esto lo

haces con display con display en este

caso por defecto estas cajas si te te

fijas estas cajas por defecto ya son en

bloque pero las podemos forzar a que

sean en línea le ponemos display in Line

por defecto son bloque así se escribe

block le podemos poner que sean in Line

si son en línea una se va a poner al

lado y el otro que bueno aquí no nos

rompe toda la estructura porque no le

pusimos un un ancho si le ponemos un

ancho de no sé 300

píxeles

no quiere Bueno vamos a probar con

inline y block Ahí está con en línea

bloque estamos usando la propiedad de

bloque y de en línea lo que pasa es que

ahorita se me olvidó comentarte esto el

error que surgió es que los elementos en

línea como te dije no pueden modificarse

tanto el ancho como el alto no se puede

modificar ni siquiera los margins

entonces tiene que ser a fuerzas con

inline gu

block para que sea un elemento en línea

se ponga uno al lado del otra pero

pueden ser un bloque que se pueda

expandir si actualizamos ahí tenemos

yaora sí nuestros dos bloques y uno se

pone al lado del otro si te fijas estos

dos también eran elementos en línea y

como estos son en línea bloque también

se ponen a los lados de este y así es

como se trabaja con esta parte eh Ya

sabes está tanto block como está inline

block como está inline así es como se

utiliza tienes que forzarlos a veces a

que sean como tú quieras y bueno Pues

eso sería todo prácticamente por el

modelo de caja Puedes hacer todavía más

cosas Pero bueno Solo lo veremos con el

tiempo conforme vayamos practicando es

importante eso así que bien amigos pues

eso ha sido todo por este pequeño

capítulo ya sabes que mi nombre es

Carlos Arturo y nos vemos hasta la

próxima si te ha gustado el video por

favor No olvides suscribirte al Canal

así como también seguirme en Twitter en

@ falconmasters por último te invito a

que pases por mi sitio

www.falconmasters.com en donde

encontrarás tutoriales y recursos sobre

desarrollo y diseño web y