Introducci贸n al curso

1

Presentaci贸n y bienvenida al curso de Frontend Developer

2

HTML y CSS: definici贸n y usos

3

驴Qu茅 son y para qu茅 nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatom铆a de un Elemento HTML: Atributos, Anidamiento y Elementos vac铆os

7

Anatom铆a de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML m谩s importantes

9

La importancia del c贸digo sem谩ntico

10

Tipos de errores en HTML, debugging y servicio de validaci贸n de etiquetas

11

Reto 1: Organiza el siguiente bloque de c贸digo de forma sem谩ntica

Conceptos iniciales de CSS

12

Anatom铆a de una declaraci贸n CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS m谩s usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

驴Qu茅 son y para qu茅 nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de c贸digo

Construcci贸n de componentes

22

驴Qu茅 es un componente? Analicemos nuestros dise帽os

23

Estructura con HTML y BEM de un men煤 desplegable

24

Estilizando nuestro men煤 desplegable con CSS

25

Creaci贸n de un buscador

26

Creaci贸n de un carousel de im谩genes con CSS: Estructura principal

27

Creaci贸n de un carousel de im谩genes con CSS: Detalle de cada item

Maquetaci贸n y dise帽o responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetaci贸n de la pantalla de login: Estructura HTML

31

Maquetaci贸n de la pantalla de login: Estilizaci贸n con CSS

32

Estilizaci贸n de inputs y footer en la pantalla de login

33

Media queries

34

Maquetaci贸n de la pantalla principal

35

Reto 3: Maquetaci贸n de la pantalla de Not Found

Preprocesadores

36

驴Qu茅 es un preprocesador, cu谩les existen y cu谩les son sus diferencias?

37

Instalaci贸n de SASS y configuraci贸n inicial

38

Hablemos de variables, herencia, anidamiento, operadores y m谩s

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra p谩gina de inicio

Conclusi贸n

41

Conclusi贸n del curso y paso siguiente

Bonus

42

Visualizaci贸n de un bot贸n usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Modelo de caja

14/43
Recursos

Todos los elementos de HTML tienen un modelo de caja y esta compuesto por cuatro elementos: contenido, padding, border, margin.

Aportes 292

Preguntas 20

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Las propiedades de margin, padding, se asignan en direcci贸n a las manecillas del reloj, como bien dicen en la clase. En caso de no poner todos los valores鈥

No olvidemos el outline, que tambi茅n hace parte del modelo de caja.

box model

Es una buena practica, dejar espacios entre el selector y la declaracion en CSS, por ejemplo

p {
	color: red; 
}

鉂
p{
	color: red;
}

tambien es buena practica, al establecer un valor a 0 no colocarle a unidad de medida.

p {
	padding: 0; 鉁
	padding: 0px; 鉂
}

Una buena practica es normalizar nuestro proyecto (eliminar los m谩rgenes que vienen por defecto, entre otras cosas)

  • Es bueno aprender a hacerlo pero agregando este archivo nos facilita todo ese proceso.
    https://necolas.github.io/normalize.css/
  • Al Agregar el link en nuestro index o archivo.html debe ir primero que el link de la hoja de estilos principal para que no se vea afectado lo que estemos haciendo o definiendo.

A mi me encanta utilizar el generador de colores de material porque eso te pinta d贸nde lo deber铆as de utilizar:
https://material.io/resources/color/

Quisiera agregar esta recomendaci贸n:
A la hora de elegir el valor para el margin o padding la mejor opci贸n es elegir valores que sean m煤ltiplos de 4, ya que con esto aseguramos la mejor representaci贸n mediante la alineaci贸n de p铆xeles completos.
Tambi茅n adjunto la p谩gina de donde obtuve est谩 informaci贸n y que me pareci贸 interesante.
Enlace a la p谩gina aqu铆

  • Contenido: Es donde va el texto e im谩genes.
  • Padding: Es un relleno alrededor del contenido y este relleno es transparente por default.
  • Border: Es el borde de la caja.
  • Margin: Es el espacio fuera de nuestra caja.

Aqu铆 tienen m谩s opciones para buscar colores:

Coolors
Paletton
canva

Si ven que en el modelo de caja del navegador cambia solo las dimensiones del contenido y no el margen, border, 鈥, es por que no est谩n apuntando al elemento. Tienen que 鈥渃lickear鈥 al elemento en el inspector

box-sizing: border-box;

con esta l铆nea de c贸digo hacemos que respete el tama帽o que nosotros le colocamos a los elementos

La teor铆a del color es un grupo de reglas b谩sicas en la mezcla de colores para conseguir el efecto deseado combin谩ndolos.

Ac谩 un sitio donde pueden encontrar muchas combinaciones para un color:
https://colorhunt.co/

Si se preguntan porque la caja del minuto 6:36 se ve m谩s grande que la del minuto 3:30 (cuando la profe dijo que son iguales despu茅s de poner el box-sizing como border-box), el problema es que border-box suma el ancho del contenido + el ancho del padding (40, 20 de cada lado) + el ancho del border (tambien de cada lado, pero como es 0, es 0+0), entonces la caja del minuto 6:36 termina teniendo 40px de ancho, a comparacion de la primera caja del minuto 3:30 que tiene 20px (porque el contenido es de 20px, y el contenido no se suma de ambos lados, ya que est谩 en el centro).

Les dejo unas clases para que entiendan mejor el problema, basicamente reduje el padding a 10px en la caja-3, para que tenga el mismo tama帽o que la caja del minuto 3:30.


        .caja-1 {
            width: 20px;
            height: 20px;
            padding: 0px;
            border: 0px solid #000;
            box-sizing: content-box;
            background-color: blue;
        }

        .caja-2 {
            width: 20px;
            height: 20px;
            padding: 20px;
            border: 0px solid #000;
            box-sizing: border-box;
            background-color: green;
        }

        .caja-3 {
            width: 20px;
            height: 20px;
            padding: 10px;
            border: 0px solid #000;
            box-sizing: border-box;
            background-color: red;
        }

        .caja-4 {
            width: 20px;
            height: 20px;
            padding: 5px;
            border: 5px solid #000;
            box-sizing: border-box;
            background-color: yellow;
        }

Prueben esos estilos en su html, y creen los 4 divs, con sus respectivas clases!.

Con la propiedad 鈥樷欌榖ox-sizing: border-box;鈥欌欌 mantenemos el tama帽o del ancho y alto de nuestra caja interna delcontenido.

Enlace a la paleta de colores del v铆deo.

https://colorhunt.co/

Para complementar el aprendizaje vi este v铆deo que me ayudo much铆simo a entender el modelo de caja.

https://www.youtube.com/watch?v=SKkKLi1wAos

Les comparto esta guia me parecio maravillosa:
https://devcode.la/tutoriales/modelo-caja-css/

聽聽聽聽聽聽.caja2聽{
聽聽聽聽聽聽聽聽聽聽background-color:聽red; (Color de fondo)
聽聽聽聽聽聽聽聽聽聽width:聽auto; (Ancho)
聽聽聽聽聽聽聽聽聽聽height:聽50px; (Alto)
聽聽聽聽聽聽聽聽聽聽padding:聽15px; (limite del contenido)
聽聽聽聽聽聽聽聽聽聽border:聽20px聽solid聽black; (Borde del contenido)
聽聽聽聽聽聽聽聽聽聽margin:聽10px; (Margen alrededor de la caja)
聽聽聽聽聽聽聽聽聽聽font-size:聽30px; (Tamano de la fuente)
聽聽聽聽聽聽}

La diferencia entre background y background-color es que background es un atajo (shorthand) es decir, puede recibir varios valores, mientras que con background-color hacemos referencia a una propiedad especifica para poder establecer un color.

.ejemplo {
	width: 500px;
	height: 500px;
	/* esto hace referencia a que se establesca una imagen de fondo pero que al mismo esta no se repita y este centrada*/
	background: url("url imagen") no-repeat center;
}

.ejemplo-2 {
	width: 200px;
	height: 200px;
	/* de esta otra manera solo se podra especificar el valor del color deseado */
	background-color: red;
}

background - css | MDN

Otra buena practica que no se explico bien aca, es reiniciar los estilos que el navegador trae por defecto de la siguiente manera.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

De esta manera estaremos 100% seguros de haberle quitado todos los estilos por defecto que aplica el navegador a nuestro HTML.

modelo de caja CSS

Modelo de caja
Todos los elementos HTML tienen un modelo de caja y este modelo esta conformado por 4 elementos:
鈥 Contenido: Se trata del contenido HTML del elemento, pueden ser palabras, im谩genes entre otros contenido.
鈥 Padding: Esta entre el borde y el contenido.
鈥 Border: Se encuentra entre el margin y el pading.
鈥 Margin: Es el margen que rodea por fuera todo el elemento que hemos creado.
Nosotros podemos manipular cada uno de estos elementos a nuestra conveniencia logrando distintos resultados dependiendo de cual sea lo que buscamos.
Por defecto las paginas web traen un margen ya predefinido, se considera como buena practica que nosotros se lo quitemos o lo modifiquemos, aunque tambi茅n se puede dejar tal y como esta.
Una herramienta que nos puede ser de mucha utilidad es la consola y nos sirve para inspeccionar nuestros elementos html y ver c贸mo est谩n conformados.

Les recomiendo utilizar, esta rueda de colores.

https://color.adobe.com/es/create

Modelo de caja

Del video entiendo que:

box-sizing: border-box;

es para que el contenido de la caja no se vea afectado por los valores que brindamos en border y/o padding, sin embargo, al momento de usarlo en el c贸digo, por lo que puedo observar, s贸lo me ayuda a que el valor que otorgue de border no afecte el tama帽o del contenido de la caja.

Una buena analog铆a para entender un poco mejor el modelo de caja es que el contenido puede representarse como una casa, el padding representa la separaci贸n de los muebles entre las paredes de la casa, el border representa las paredes de la casa y el margin representa la separaci贸n de la casa con otras casas

Tambi茅n es puede establecer la propiedad box-sizing a todos los elementos del HTML y que los elementos que agreguemos hereden el mismo valor usando:

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

Aclarando: todo esto antes esta antes del minuto 03:32 del video, ya lo 鈥渃orreg铆鈥 en https://validator.w3.org/. Al parecer el <style></style> no puede ir entre head y body (adjunto imagenes), ser铆a genial que alguien explique el porque por favor. Pero para ver el 鈥20x20鈥 en la parte de inspect hay que seleccionar la parte de de <div class=鈥渃aja鈥></div>, ya que si seleccionamos otras partes apareceran otras dimensiones, adjunto imagen 馃槃 Buenos deseos gente 馃槃
![](
![](

Al hacer una caja de tipo bloque en CSS tenemos los elementos siguientes:

El contenido de la caja: El 谩rea donde se muestra el contenido, cuyo tama帽o puede cambiarse utilizando propiedades como width y height.
El 谩rea de relleno de la caja: El 谩rea de relleno es un espacio en blanco alrededor del contenido; es posible controlar su tama帽o usando la propiedad padding y otras propiedades relacionadas.
El borde de la caja: El borde de la caja envuelve el contenido y toda el 谩rea de relleno. Es posible controlar su tama帽o y estilo utilizando la propiedad border y otras propiedades relacionadas.
El margen de la caja: El margen es la capa m谩s externa. Envuelve el contenido, el relleno y el borde como un espacio en blanco entre la caja y otros elementos. Es posible controlar su tama帽o usando la propiedad margin y otras propiedades relacionadas.

box-sizing:border-box para que respete el ancho y el alto del elemento.

Saludos, por que si escribo en el css border: 10px blue; no aparece coloreado el border y si coloco la palabra 鈥渟olid鈥 si. Existe alguna otra propiedad aparte de solid?. Gracias

La diferencia entre el padding y el margen es que el padding funciona como relleno tanto si usas box-sizing o no, y el margen es un espacio que se va a reservar entre elementos , si tienes dos cuadrados y les pones margin: 10px va a separar los dos cuadrados 10px y no se van a poder pegar o juntar, van a estar separados forzomente.

Muchas veces les pasara que las etiquetas anidadas no respetara el modelo de caja como este ejemplo:

pero haciendo tal y como dice ahi, lo podemos solucionar. espero les ayude en un futuro

muy buena explicacion, pero creo que falta ser un poco mas especifico en cuanto a la ejemplificaci贸n de cada estilo en css, por ejemplo al momento de definir los 20px en ancho y alto, el padding de 20px se modific贸 el tama帽o de la caja pero al utilizar box-sizing: border-box, en teor铆a tuvo que haber regresado a su tama帽o inicial de los 20px, pero no lo hizo, qued贸 aun mas grande, pero porque? all铆 se vio afectado por el padding, pero ejemplos como estos no nos resolvieron dudas. 馃槂

tambi茅n para buscar mas colores puedes poner la pagina https://htmlcolorcodes.com/es/

background y background-color no son lo mismo aunque se comporten muy parecido.

background es un shorthand es la forma abreviada de combinar muchas etiquetas de fondo en una sola l铆nea. background

Hoy en dia se estan empezando a emplear las Propiedaes Logicas, en la siguiente imagen pueden echar un vistazo y pueden ver el equivalente de las Propiedasdes Fisicas a Logicas.

El modelo de cajas o 鈥渂ox 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 el comportamiento de CSS que hace que todos los elementos de las p谩ginas se representen 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.

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.

Las partes que componen cada caja y su orden de visualizaci贸n desde el punto de vista del usuario son las siguientes:

Contenido (content): se trata del contenido HTML del elemento (las palabras de un p谩rrafo, una imagen, el texto de una lista de elementos, etc.)
Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
Borde (border): l铆nea que encierra completamente el contenido y su relleno.
Imagen de fondo (background image): imagen que se muestra por detr谩s del contenido y el espacio de relleno.
Color de fondo (background color): color que se muestra por detr谩s del contenido y el espacio de relleno.
Margen (margin): separaci贸n opcional existente entre la caja y el resto de cajas adyacentes.
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).

Si una caja define tanto un color como una imagen de fondo, la imagen tiene m谩s prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, tambi茅n se visualiza el color de fondo. Combinando imagenes transparentes y colores de fondo se pueden lograr efectos gr谩ficos muy interesantes.

En el modelo de caja es importante tener en cuenta en todo momento el valor que le estamos asignando a los elementos para determinar el tama帽o total, ya que estos por defecto se van sumando鈥

Para los que usan vscode existe la extensi贸n** live server** con esta extensi贸n se podr铆a decir que corres tu c贸digo html en un servidor y ya no es necesario que recargues la pagina cada vez que realizas un cambio en el c贸digo.

HTML

Doc CSS

Resultado

Por fin entend铆 que es un padding 馃槂

No se acostumbren a escribir los estilos dentro de la etiqueta <style> dentro del mismo html, ya ver谩n como m谩s adelante les dicen que se utiliza un archivo .css para los estilos totalmente independiente y este se enlaza con la etiqueta <link> dentro de la etiqueta <head> con la estructura: <link rel=鈥渟tylesheet鈥 href=鈥渢u_archivo.css鈥>, de esta forma podemos utilizar los mismos estilos para diferentes html y poder reutilizar, reutilizar y reutilizar

Muy buena explicaci贸n estoy aprendiendo bastante.

Para el uso de margin y el padding en CSS se puede escribir de varias formas funcionando igualmente para las dos propiedades:

1.

margin-top: 2px;
margin-bottom: 2px;
padding-left: 3px;
padding-right: 3px;

2.

margin: 2px 3px; // El primer valor  "2px" se toma para top/bottom y el segundo valor "3px" para left/right.

3.

padding: 4px; // Este valor se toma para todos los 4 lados

4.

margin: 1px 2px 3px 4px; // En esta forma de escriben 4 valores cada valor para cada lado en siguiente orden: Top, Left, Bottom, Right. Si se olvida el orden solo hay que recordar que siempre comienza arriba "TOP" y sigue las manecillas del Reloj 鈱氾笍
Hay muchas maneras distintas en las cuales nosotros podr铆amos centrar el logo dentro del header. 1. Con la propiedad de "box-sizing: border box" en el header, podemos poner un padding de 5px y de esa forma va a quedar m谩s o menos centrado el logo. Habr谩 que tantearle un poco para que quede bien. 2. Con la propiedad de "display: flex;" en el header, despu茅s podemos usar el "align-items: center;" . Desde mi punto de vista, la segunda forma es la mejor. Porque siempre va a estar bien centrado nuestro logo, sin importar cual sea su height
Antes yo pens茅 que esto era mas complejo. Pero si vemos cuidadosamente, es literalmente como un contenedor en la vida real. Por ejemplo, un cuadro o un retrato tiene todas esas propiedades. Aqu铆 podemos ver como el desarrollo web utiliza las cosas de la vida real para modelarlas en Internet.

Vaya clase!! ten铆a dudas sobre 鈥減adding鈥, y se resolvieron. Gracias.

un poco de pr谩ctica鈥

Por aqu铆 dejo un post que est谩 muy interesante sobre box sizing . https://dev.to/lupitacode/que-es-el-box-sizing-en-css-2pi9 .

Respecto a Background y Background-color respecto a sus diferencias, me encontre esta respuesta:

background-color : Se refiere en especifico al color de fondo.

**Background **: Se puede utilizar 鈥渃oma manera corta鈥, pero permite agregar mas propiedas u atributos por ejemplo:

background: #ffffff url("img_tree.png") no-repeat right top;********

Tomado de: stackoverflow

pregunta!!! porque cuando estoy en consola en el navegador el modelo de caja no me muestra los datos que tengo en mi archivo de HTML? Alguien m谩s ya vi贸 el tr谩iler de Spiderman 馃く?

En CSS todos los elementos HTML se rigen bajo el modelo de caja. Este modelo esta compuesto por las siguientes secciones:

A continuaci贸n se describen cada una de estas secciones:

  • Content (Contenido) : Como su nombre lo indica en esta secci贸n se muestra el contenido de la etiqueta HTML (texto, image, video, etc)

  • Padding (Relleno) : En esta secci贸n se define el espacio interior que hay entre el borde y el contenido de la etiqueta HTML

  • Border (Borde) : Esta secci贸n permite especificar el borde al elemento.

  • Margin (Margen) : En esta secci贸n se define el espacio exterior que hay alrededor de la caja.

Ac谩 les dejo un video donde nos ense帽an las diferencias entre un padding y un margin por si quieren interiorizar un poco m谩s en sus diferencias.
馃挋 Margin VS Padding en CSS - 驴C煤ando usar cada uno?

Para que el Chrome me permita modificar los valores de las reglas CSS en el inspector de propiedades, tengo que poner la etiqueta <style> dentro de <head>.

El 鈥渕odelo de caja CSS鈥 es un conjunto de reglas que determinan las dimensiones de cada elemento en una p谩gina web. Le da a cada caja cuatro propiedades:

  • Content: texto, imagen u otro contenido multimedia del elemento.

  • Padding: el espacio entre el contenido del cuadro y su borde.

  • Border: la l铆nea entre el relleno y el margen del cuadro.

  • Margin: el espacio entre la caja y las cajas circundantes.

Modelo de caja

驴Qu茅 es el Modelo de Caja?

El modelo define c贸mo funcionan juntas las diferentes partes de una caja (margen, borde, relleno y contenido) para crear una caja que puedas ver en tu p谩gina. Para complicarlo un poco m谩s, hay un modelo de cajas est谩ndar y un modelo de cajas alternativo que suma el borde y padding en el ancho total.

Partes de una caja

Al hacer una caja de tipo bloque en CSS tenemos los elementos siguientes:

  • El聽contenido de la caja聽(o聽content box): El 谩rea donde se muestra el contenido, cuyo tama帽o puede cambiarse utilizando propiedades como聽width聽y聽height.
  • El聽relleno de la caja聽(o聽padding box): El relleno es espacio en blanco alrededor del contenido; es posible controlar su tama帽o usando la propiedad聽padding聽y otras propiedades relacionadas.
  • El聽borde de la caja聽(o聽border box): El borde de la caja envuelve el contenido y el de relleno. Es posible controlar su tama帽o y estilo utilizando la propiedad聽border聽y otras propiedades relacionadas.
  • El聽margen de la caja聽(o聽margin box): El margen es la capa m谩s externa. Envuelve el contenido, el relleno y el borde como espacio en blanco entre la caja y otros elementos. Es posible controlar su tama帽o usando la propiedad聽margin聽y otras propiedades relacionadas.

El diagrama siguiente muestra estas capas:

Comandos

  • Background-color es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra 鈥渢ransparente鈥.

    background-color: color | transparent | inherit
    
  • La propiedad聽聽width聽especifica la anchura del area de contenido de un elemento. El聽谩rea de contenido聽est谩聽dentro聽del padding, borde, y margen del elemento.

    Las propiedades聽min-width聽y聽max-width sobreescriben el valor de聽width.

    /* Valores <length> */
    width: 300px;
    
    /* Valores <percentage> */
    width: 75%;
    
    /* Valores clave */
    width: max-content;
    width: min-content;
    width: available;
    width: fit-content(20em);
    width: auto;
    
    /* Valores globales */
    width: inherit;
    width: initial;
    width: revert;
    width: unset;
    
  • La propiedad CSS聽height聽especifica la altura del area de contenido聽de un elemento. El聽谩rea de contenido聽est谩聽dentro聽del padding, borde, y margen del elemento.

    Las propiedades聽min-height聽y聽max-height聽sobreescriben el valor de聽height.

    /* Valores clave */
    height: auto;
    
    /* Valores <length> */
    height: 120px;
    
    /* Valores <percentage> */
    height: 75%;
    
    /* Valores globales */
    height: inherit;
    height: initial;
    height: unset;
    
  • La propiedad CSS聽padding聽establece el espacio de relleno requerido por todos los lados de un elemento. El聽谩rea de padding聽es el espacio entre el contenido del elemento y su borde聽(border). No se permiten valores negativos.

    La propiedad padding es un atajo para evitar la asignaci贸n聽de cada lado por separado聽(padding-top,聽padding-right,聽padding-bottom,聽padding-left).

    /* Valores <length> */
    height: 120px;
    
    /* Valores <percentage> */
    height: 75%;
    
  • Border es una聽propiedad abreviada聽para las siguientes propiedades CSS:

    • border-color: modifica el color de un borde
    • border-style: modifica el estilo de un borde
    • border-width: modifica el grosor de un borde
    border: <border-width><border-style><border-color> | inherit;
    
  • La propiedad CSS box-sizing como el user agent debe calcular el ancho y alto total de un elemento.

    box-sizing: border-box; /*Ajusta el tama帽o de la caja hasta el borde*/
    box-sizing: content-box; /*Ajusta el tama帽o de la caja hasta el contenido*/
    
    /* Global values */
    box-sizing: inherit;
    box-sizing: initial;
    box-sizing: revert;
    box-sizing: unset;
    

    Aportes

  • Las propiedades de margin, padding, se asignan en direcci贸n a las manecillas del reloj si se va espec铆ficar uno por uno. Si queremos definir el mismo margen para arriba y abajo se pone de primeras y luego se pone de segundas los de los lados. Por ejemplo

    margin: 20px 60px; 
    /*Los m谩rgenes arriba y abajo tendr谩n 20px; los m谩rgenes a los lados tendr谩n 60px*/
    
  • Una buena practica es normalizar nuestro proyecto (eliminar los m谩rgenes que vienen por defecto, entre otras cosas)

    • Es bueno aprender a hacerlo pero agregando un archivo normalize.css nos facilita todo ese proceso.
    • Al Agregar el link en nuestro index o archivo.html debe ir primero que el link de la hoja de estilos principal para que no se vea afectado lo que estemos haciendo o definiendo.

Las propiedades y opciones del modelo de caja se explican mucho mejor en el curso de CSS Grid Layout! Esta nuevo y huele a lim贸n.
https://platzi.com/clases/css-grid-layout/

Va en las el orden de las manecillas del reloj empezando por top, sigue right, bottom y finalmebte left ! 馃槂

Este curso est谩 haciendo m谩s f谩cil el integrar conceptos que antes se me hac铆a dif铆cil comprender

Bot贸n de like para los que aman ColorHunt

Excelente la explicaci贸n!!

Muy buena la clase! sigamos.

Wow, excelente explicaci贸n del modelo de caja

Es incre铆ble la cantidad de herramientas que nos da el navegador por defecto y no caemos en cuenta de su existencia鈥

Soy desarrollador y en mi universidad nunca nos dieron html, es bueno reforzar conceptos y aprender cada dia cosas nuevas

buen repaso del modelo de caja

MODELO DE CAJA (IMAGEN 9) (EJERCICIO modelo-de-caja.html)

- Se compone de 4 elementos:

    * El contenido - Lo que esta de color azul, que tiene las dimensiones
    * El padding - Esta entre el contenido y el borde, se encuentra dentro del elemento
    * El border - Borde del elemento
    * El margin - El espacio a fuera del componente (funciona con otros elementos a los lados)

Me encanta como se hace entender, 茅ste era el tema que m谩s confundido me ten铆a

Me gusta como explica las clases, la verdad ya tengo un poco de conocimiento sobre esto, pero retomar esto, de la forma en como lo explica, es muy sensacional y me ayuda a retomar conceptos.

Comparto recurso de la pagina que se nos comparte de mozila para ampliar m谩s del tema sobre el padding en CSS
https://developer.mozilla.org/es/docs/Web/CSS/padding

Buen铆simo curso, me hac铆a falta aprender Css

Este es mi c贸digo, sin embargo al parecer la caja 2 la coloca detras de la caja 1 de tal forma que no se observa.
驴Alquien sabe la raz贸n?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     body {
        margin: 0px;
    } 
    .caja1 {
        background-color: #ff9c91;
        width: 20px;
        height: 20px;
        padding: 20px;
        border: 2px solid #50b6bb;
        margin: 10px 20px 30px 40px;
    }; 
    .caja2 {
        background-color: #b196fd;
        width: 30px;
        height: 30px;
    }

</style>
<body>
    <div class="caja1"></div>
    <div class="caja2"></div>
</body>
</html>

!!!

Deberian dar una clase donde expliquen como usar main, section, article, aside, div, el uso de esas etiquetas suele confundir mucho.

Para que ciertas propiedades, no alteren el modelo de caja, entonces lo que hacemos es poner el box-sizing, como, border-box.

Podemos hacer un seteo de color, tanto con background, c贸mo de background-color.

Cada elemento en HTML, est谩 compuesto por cuatro propiedades: Contenido, Padding (Qu茅 se encuentra entre el borde y el contenido), luego est谩 el border y por 煤ltimo est谩 el margin (El espacio de afuera antes del borde).

Aqu铆 hice el ejercicio, lo vi con el inspector de c贸digo y s铆 me muestra las medidas exactas鈥 solo que yo met铆 style dentro del head鈥

Interesante cada clase.

Hab铆a visto otros tutoriales antes, pero este sin duda es much铆simo mas claro para quienes vamos iniciando, y nos da pie a jugar por nuestra cuenta para ganar experiencia con el modelo de caja 馃槃

Poco a poco se va armando todo esto y est谩n interesantes los aportes de los dem谩s estudiantes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modelo de Caja</title>
</head>
<style>
    body {
        margin: 0;
    }
    .caja {
        width: 20px;
        height: 20px;
        padding: 20px;
        border: 2px solid #50b6bb;
        background-color: #ff9c91;
        box-sizing: border-box;
        margin: 10px 20px 30px 40px;
    }
    .caja2 {
        width: 30px;
        height: 30px;
        background-color: #fdef96;
    }
</style>
<body>
    <div class="caja"></div>
    <div class="caja2"></div>
</body>
</html>```

importante manejar el boxing-zise para que no afecte el dise帽o.

La propiedad box-sizing por defecto se aplica al content-box o contenido, pero podemos aplicarlo al border-box como muestra Estefany

Existe una documentaci贸n que ayuda mucho a entender el modelo de caja: MDN - Modelo de Caja

Siempre me confund铆a con las 4 cantidades en margin, se me hac铆a dif铆cil memorizar, con el concepto de las manecillas del reloj lo memorice instant谩neamente, excelente clase.

En el Curso Definitivo de HTML y CSS explican muy bien este tema, lo recomiendo.

Este es un archivo css para normalizar tu css. es muy util
https://necolas.github.io/normalize.css/

hay un peque帽o codigo que hace que en el modelo de caja se respeten los tama帽os definidos. es decir supongamos que definimos un div con las siguientes caracteristicas
width: 20px;
height: 20px;
padding: 20px;
queremos que tenga un alto de 20px y ancho de 20px por lo que nuestro div tendria que ser de 40x40 pero no lo es porque estamos a帽adiendo un padding de 20 por lo que se convierte en un div de 60x60 (20 de alto + 20 de ancho + 20 de padding)

lo que hace esl codigo es respetar nuestros tama帽os definidos (width y height) aplicando tambien los otros valores como el padding. el codigo es el siguiente:
y respeta lo aplicado tal como lo habiamos definido anteriormente

espero les funcione y aca dejo el enlace para que quede mas clara la informacion https://www.paulirish.com/2012/box-sizing-border-box-ftw/

Importante conocer la teor铆a del color

Modelo de caja, compuesto por cuatro elementos: contenido, padding, border, margin.