Hola. Hoy vamos a hablar del modelo de caja. Y lo que es el modelo de caja, es realmente un concepto general de CSS que le ayuda a dimensionar y colocar su elemento donde desea que vayan. Así que, una de las primeras cosas de las que vamos a hablar es de altura y anchura. Sé que ya he usado esto un poco en algunas de mis otras conferencias, pero quería ser muy específico en cómo funciona. Y una de las primeras cosas que necesita saber es que la altura y el ancho de cualquier elemento en línea es el contenido en sí. Por lo tanto, si tiene un enlace, la altura y el ancho de ese enlace es solo el texto de la parte que se puede hacer clic del enlace. Elementos que no están en línea, cosas que son bloque, bloque en línea, cosas por el estilo, pueden tomar propiedades de altura y ancho, y vimos esto en la conferencia Display. Entonces, cada vez que tenga algo que está en línea, si le da una altura y un ancho, el navegador simplemente lo ignora. Cualquier otra cosa, el navegador va genial, puedo seguir adelante y cambiar eso por ti. Algunas de las otras cosas en las que queremos pensar entonces, cuando tenemos elementos, es cómo encajan en la pantalla. Una de las formas más fáciles de colocar estratégicamente las cosas en su página es colocar bordes alrededor de ellas. Incluso si no desea esos bordes más adelante en su producto final, me parece muy útil tener esta idea de cuánto espacio ocupa un elemento. Por lo tanto, cualquier elemento puede tener un borde alrededor de él, ya sea en línea , o bloque, o en línea. Y esas propiedades de borde especifican qué borde de estilo desea, qué ancho de borde y qué color. Son bastante sencillos. El estilo de borde es el único que se debe especificar. Si no especifica un color o no especifica un ancho, no hay problema. Por defecto será negro y probablemente un píxel. Pero tienes que decidir qué tipo de estilo quieres. Entonces, en este caso, he dicho, para todos mis divs, quiero que tengan un borde sólido de un píxel alrededor de ellos, y no puedo decirte de qué color es , porque todavía no soy tan geek, pero supongo que algo así como el azul. El estilo de borde que desea especificar, mientras que la mayoría de las personas siempre usan sólidos, hay muchos estilos diferentes. Puede usar puntos, discontinuos, ranurados, estriados, ocultos, insertados, iniciales. Hay muchas cosas diferentes que puedes hacer, y es realmente una especie de diferencia estilística de tu parte. Realmente no les presto mucha atención porque siempre he usado solidez. Una vez que haya decidido qué tipo de estilo desea, puede especificar el ancho y el color. Así que cuando llegue el momento de establecer el ancho, si decide, es que puede configurarlo en un número de píxeles o puede usar las palabras clave, delgado, mediano o grande. Cuando llegue el momento de hacer el color, puedes hacer lo mismo que hemos estado haciendo todo el tiempo. Puede usar el nombre, como azul, el valor RGB, el valor hexadecimal, o simplemente para que lo sepa, también es transparente. Así que puede tomar el color de lo que esté debajo. Por lo tanto, cuando llegue el momento de especificar qué tan grande desea que su borde vaya, puede especificar de cuatro maneras diferentes. En el primer ejemplo, solo le das un número. En este caso, tres píxeles. Y lo que va a hacer, es que va a poner un borde de tres píxeles alrededor de todo el elemento así. Si decide darle dos valores, se va a establecer un borde de tres píxeles en la parte superior e inferior, y un borde de diez píxeles a la izquierda y la derecha. Esta es una forma muy común de configurar las cosas cuando estás haciendo bordes y otras propiedades, porque es una taquigrafía realmente agradable que sigue siendo muy simple de entender y leer. Si le das tres valores, es un poco más complicado, y siempre tropiezo con lo que es, así que voy a sacar la foto sólo para asegurarme. El primer valor es siempre el superior. Desea que el borde superior sea de 3 píxeles. Los 10 píxeles son para la izquierda y la derecha, y los 20 píxeles para la parte inferior. El último es cuando das cuatro valores, y cuando das cuatro valores, básicamente significa arriba, derecha, abajo, izquierda. Y eso va a establecer el borde en cuatro valores diferentes. Así que la mayoría de las personas usan el único valor, los cuatro valores, y algunas personas usan los dos valores también. Mayormente, y una de las razones por las que te muestro esto es, puede ser realmente intimidante, y te preguntas qué está haciendo la gente cuando está sucediendo. Esto es lo que están haciendo. Están usando caracteres cortos para que no tengan que tener el borde derecho, el borde izquierdo, el borde superior, el borde inferior. El margen es básicamente ese espacio que está fuera de tu frontera. Es entre, cuando digo que tú y tu vecino, o lo que realmente debería decir es entre el elemento, y el vecino del elemento. Así que te da ese espacio donde no quieres que nadie te toque. Con márgenes, cada vez que le das un margen positivo, básicamente estás diciendo, mueve tu elemento hacia la derecha o hacia abajo. Si le das un margen negativo, en realidad estás haciendo que se acerque al vecino. Usted está haciendo que se mueva hacia la izquierda o hacia arriba. El relleno es muy similar en concepto al margen, pero en cambio este espacio está entre el elemento y su borde. Le está dando un poco de espacio extra dentro. Es posible que casi lo pienses como aplastar el texto en algunos casos. De la misma manera, siempre que tenga valores positivos para el relleno, lo está moviendo hacia afuera desde el elemento. Le estás dando más espacio. Si le da un relleno negativo, en realidad está moviendo el borde cerca o tal vez incluso encima de los elementos que están al lado. Así que con el margen y el relleno, todo lo que vas a hacer es dar un valor numérico. Vas a darle algo así como 3 píxeles o 10%. No le das ningún tipo de color. Siempre va a ser transparente. El relleno siempre será del mismo color que el elemento, y el margen siempre será del mismo color del padre, probablemente el cuerpo de la página. Ellos, al igual que el borde, se pueden definir en ese uno a cuatro valores. Así que si pones el margen de tres píxeles, será un margen de tres píxeles alrededor de todo. Si dices relleno, diez píxeles, cinco píxeles, tendrás arriba, abajo, izquierda y derecha. Así que déjame mostrarte una foto rápida de lo que estoy hablando. En este caso, aquí está mi texto es mi elemento real. He dicho que esto es lo que quiero seguir. El azul es el borde alrededor de mi elemento. El amarillo es el relleno. Es ese espacio entre mi texto y el borde, y ese naranja es el margen, y lo que estás diciendo es que no me pongas cerca de nada más. Dame tanto espacio a mi alrededor. Por lo tanto, podría mover sus párrafos hacia abajo. Podría mover tus divs abajo y otra vez. Así que, sólo practica esto. Y a medida que juegues con él más y más, tendrá más sentido cuál es un margen y cuál es el relleno. Una de las cosas que necesita entender cuando está haciendo relleno y borde y margen, y todas estas cosas es que en HTML dice, su altura y su ancho son aditivos. Y lo que eso significa es que si decide que desea que el ancho de su elemento sea de 200 píxeles, probablemente necesite tener en cuenta qué tan grandes son todos esos otros aspectos y propiedades. Entonces, en este caso, parte del ancho es el margen, más el borde, más el relleno, más el elemento real consigo mismo. Y por lo que todo realmente se suma para obtener lo que consideramos el ancho real de su elemento. Y esto va a importar cuando estés mirando tu página y la estés diseñando y tratando de decidir cuánto espacio quieres que ocupe cada elemento. Entonces, si miramos este ejemplo aquí donde tengo el ancho es 100px, el relleno es 10px, el margen es 5px y el borde es 1px. Espero que en este momento, estés haciendo las matemáticas en tu cabeza, y prometo no dar muchas más matemáticas que esto, pero lo estás haciendo para averiguar cuánto ancho necesita este elemento, hace este div, realmente en la página. Y en este caso, el ancho es de 132 píxeles. El 100, más 10, más cinco, más uno, más uno, más cinco, más diez. Todo se suma. La altura, de la misma manera, es su altura más el relleno superior e inferior, el margen superior e inferior, y el borde superior e inferior. Muy bien, así que cuando hablamos de margen, solo quería lanzar esta diapositiva aunque no se relaciona con muchas de las otras cosas de las que hemos tenido que hablar. Pero es porque el margen es muy importante para cuando desea centrar elementos en una página. Cuando queremos centrar el texto, podríamos usar texto alinear centro, y todo se veía muy bien. Pero cuando quieres centrar elementos, es un poco más difícil. Y entonces la forma predeterminada de hacerlo es usar el comando margin zero auto. Así que si recuerdas, ese primer cero, eso significa arriba e abajo, y por lo que realmente no va a preocuparse por eso. El auto es lo que lo pone a la izquierda y a la derecha. Ahora esto solo funcionará si el elemento resulta ser display: block, si el elemento no está flotando, es que el elemento tiene un ancho que no es automático, lo que significa que lo configuró. Y este último es si el elemento no es fijo o posición absoluta. Ahora no he cubierto la posición todavía. Y la buena noticia es que, como no lo he cubierto, probablemente no te has metido con ella, y no tienes que preocuparte por estas dos cosas. Pero a medida que intenta enviar sus elementos, vuelva a esta diapositiva si es necesario, y marque estos para asegurarse de que todas estas propiedades encajan. Y esa es la mejor manera de centrar las cosas ahora mismo. Finalmente, cuando hablamos de esto, quiero agregar una opción más, y eso se llama tamaño de caja. Y lo que hace el tamaño de la caja es que quita parte de la matemática de esa altura y anchura del aditivo. Cuáles son sus opciones es que puede tener content-box, por lo que el tamaño de la caja de contenido-box, y ese es solo su aditivo predeterminado. Vas a tener que recordar cuánto espacio estás usando. El siguiente se llama border-box. Y border-box realmente toma en consideración el ancho, el contenido, el relleno y el borde. Por lo tanto, si dices que quieres que el ancho sea de 200 píxeles, no va a hacer que el elemento sea de 200 píxeles. Va a hacer 200 píxeles menos el relleno y el borde. Una de las últimas cosas a recordar es que tomaremos en cuenta el relleno y el borde, no tendrá en cuenta el margen. Entonces, finalmente, una de las cosas que voy a mostrarte en este ejemplo en solo un segundo, es diferentes maneras en que puedes establecer la altura y el ancho de diferentes elementos. Y hay dos formas comunes de hacerlo. El primero se llama absoluto, y es cuando establece un elemento en un tamaño específico. Dices que quiero que sean tantos píxeles, o tantos milímetros, o tantos centímetros. Los píxeles son una forma muy común de establecer tamaños. El otro tipo de medición es lo que llamo fluido, y establece el tamaño relativo a los elementos circundantes o los elementos principales. Así que puedes usar cosas como el porcentaje. Puede usar vw, que significa ancho de ventana gráfica, vh que significa altura de ventana gráfica. Incluso puedes usar cosas como em y rem, que no se usan comúnmente, pero en realidad establecen el tamaño con respecto a sus padres. Así que sigamos adelante y pasemos a mi ejemplo para que podamos jugar con esto un poco. No será suficiente para demostrar todo lo que podemos hacer, pero espero que te haga empezar. Lo que tengo aquí es un archivo HTML muy simple donde tengo un lado izquierdo y el lado derecho. Pero como puedes ver, no están a la izquierda y a la derecha en este momento. Están uno encima del otro. Así que lo primero que quiero saber es, ¿puedes poner estos divs uno al lado del otro? Vamos a tener que usar una especie de combinación de pantalla, altura , ancho y relleno. Así que sigamos adelante y hagamos eso. Así que aquí en mi archivo CSS, de inmediato puedes ver este tipo de cosas de fondo que he hecho. Ahora, cuando quieres que las cosas estén al lado del otro, tienes que darles un ancho, porque ahora mismo ocupan el 100%. Una opción sería que usted siguiera adelante y configurarlo en algún tipo de píxeles. Y decir tal vez 200 píxeles y 200 píxeles, y ver qué pasaría, ver si funciona. El problema con hacer eso, ya que descomento mi código aquí, es que a medida que las personas van en diferentes tamaños de navegador, sus números pueden ser demasiado grandes o demasiado pequeños. Así que lo que he hecho aquí es seguir adelante y establecer mi ancho en 48%. Ahora hacer eso es realmente genial, y voy a salir de esta línea por solo un segundo, porque la mayoría de la gente tiene la idea de que quieres establecer el ancho en algo más pequeño. Lo que olvidan, es que a pesar de que sólo están ocupando el 48%, de hecho, incluso voy a hacer algo realmente pequeño. 20%, no van a ir uno al lado del otro. Así que debes recordar que quieres usar esas mediciones de fluidos. Así que volvamos aquí, voy a devolverlo al 40%. Incluso si lo haces realmente delgado, hasta que le digas al navegador, oh, sé que esto está bloqueado, pero voy a cambiarlo a bloque en línea, nunca permitirá que los elementos de bloque estén uno al lado del otro. Así que es por eso que tienes que recordar hacer ambos elementos. Así que vamos a seguir adelante y guardar y recargar. Y así puedes ver que he seguido adelante y he hecho mi ancho. He hecho mi bloque de visualización. Tengo mi relleno. Tengo mi frontera, y tengo algún margen. Así que lo último que voy a hacer, sólo para terminar esto para mostrarte lo que está pasando, es que voy a seguir adelante y cambiar esto al 50%, porque este es un error muy común que la gente comete. Dicen que quiero dos cosas una junto a la otra. Así que voy a hacerlos cada 50%. No olvides que cuando haces eso, no funciona porque eso es 50% antes de poner el borde en cuenta. Así que asegúrate de que estás jugando con todas estas cosas, que estás jugando con el margen, estás jugando con el relleno, estás jugando con el borde. Porque así es como vas a hacer que las cosas funcionen, ajustando, ajustando. Así que sigamos adelante y revisemos. Cuando llega el momento de que empieces a implementar todas estas ideas, tu modelo de caja con tu relleno, contenido, margen , etc., realmente quieres diseñar bocetos en papel primero, porque es realmente difícil meter las cosas después de que ya has llegado a un esquema, ¿de acuerdo? Así que diseña primero, código segundo. La segunda cosa que puede querer hacer es usar el modelo de caja para reducir la complejidad de su código. O al menos la complejidad de sus matemáticas tratando de averiguar qué cosas encajan en dónde. Finalmente, no importa lo que hagas, debes recordar que el margen siempre tiene que ser considerado. Puede ser complicado cuando empiezas a intentar armar tu página, y conseguir que las cosas vayan exactamente donde quieres que vayan, y aún no hemos hablado de posicionamiento, lo que sería incluso otro elemento. Así que por ahora, practica estas cosas de pequeñas maneras. Use Inspect Element para jugar con él y no tenga que cambiar tanto su código. Hasta que consigas que las cosas se vean como quieres que se vean. Y no te preocupes, todos estamos cometiendo errores. Todos estamos haciendo esto juntos. Pero creo que tu página se está acercando cada vez más a algo que realmente querrías publicar en la web. Buen trabajo.