Entonces, uno de los conceptos más importantes que tenemos que cubrir y evaluar es el posicionamiento de los elementos.
Entonces, ¿cómo podemos diseñar una página o mover un div a la parte superior derecha?
O cómo hacemos una etiqueta de anclaje más ancha o agregamos espaciado entre las imágenes.
Todo eso es realmente importante y está relacionado con algo que se llama el modelo de caja.
Entonces el modelo de caja es esta idea básica que es realmente central para todo lo que se evalúa en
HD, que básicamente es que cada elemento tiene una caja rectangular a su alrededor.
Entonces, podemos ver aquí solo ir a cualquier página web en MDA y tengo el inspector abierto y
tengo la lupa seleccionada.
Y al pasar el cursor sobre cada elemento, puede ver que hay una caja alrededor.
Entonces este H2 tiene una caja azul alrededor.
Este tiene una caja.
Incluso cosas que no son particularmente cuadradas.
Así que esta esquina redondeada div. Todavía tiene una caja alrededor.
Entre bastidores.
Entonces, esto de aquí
y de este no es realmente redondo o no parece tener las esquinas redondeadas, pero sigue siendo una caja.
Entonces estos cuadros son realmente útiles detrás de las escenas porque podemos diseñar diferentes propiedades en ellos.
Entonces hay cuatro propiedades o cuatro partes diferentes de cada caja.
Hay muchas más propiedades, pero para partes de la caja que podemos manipular.
Entonces supongamos que este diagrama que también es de MDA y es de un párrafo.
Así que tengo un texto en un párrafo y le doy un borde naranja o amarillo y esto es lo que el
usuario ve un texto y un borde, pero detrás de la escena hay otras cosas que están sucediendo.
Entonces, entre el borde y el texto hay algo llamado relleno.
Entonces el relleno es solo el espacio dentro del borde.
Entonces, entre el contenido y el borde está el relleno y
luego también hay un margen que está del otro lado, está entre el borde exterior y cualquier otra cosa.
Entonces usamos el margen a menudo para agregar espacio entre los elementos.
Entonces, si tuviéramos dos párrafos y
quisiera que estuvieran más separados, usaría margen e incrementaría eso.
Así que ahora vamos
a hacer una profunda inmersión en la sintaxis de algunas de las propiedades que queremos usar antes de hacerlo.
tenemos una forma de hacer algo que se ve así.
Quiero mostrarte dos cosas que puedes esperar para hacer que la primera sea la más emocionante, pero lo importante es que ahora
Hasta ahora, en realidad no tenemos una forma de hacer que estas cajas que están
conectadas entre sí tengan asignada una, pero están vacías, no hay texto adentro.
Así que vamos a aprender sobre el modelo de caja y aplicarlo aquí para
hacer este tablero de tres en raya y luego vamos a hacer este sitio de cartera para un fotógrafo de ficción.
Entonces esto es lindo.
Son imágenes que responden, por lo que cambian de tamaño, cambian el tamaño de la ventana y la cuadrícula.
Todo esto se basa en los conceptos que vas a aprender aquí.
Así que voy a seguir adelante y abrir sublime aquí.
Y tengo un documento realmente simple que he creado.
Entonces es solo HTML simple.
Tiene una hoja de estilo conectada.
Esta vacio.
Aparte de algunos comentarios y luego dos párrafos.
Entonces, si abro esto, puedes ver que es
muy básico, muy aburrido y que vamos a utilizarlo para jugar con el modelo de caja.
Así que voy a ir
a mi éxito y voy a seleccionar párrafos y luego solo voy a copiar estos comentarios para
poder escribir algún código debajo de ellos solo para decirles visualmente lo que estoy haciendo.
Comencemos por darles un borde.
Así que este debería ser el borde
de revisión y vamos a hacer un pixel de color azul sólido, guarda esa actualización y puedes ver que obtenemos un borde en todo el contenido.
Y lo que también notan es que el contenido aquí abarca todo el recorrido de la pantalla.
hacemos un párrafo por defecto, recorre toda la pantalla.
Nuestro borde no se detiene aquí y eso es porque cuando
Entonces, si quiero
cambiar el ancho del párrafo en sí del texto, puedo usar la propiedad de ancho y voy a seguir adelante y dar un ancho de uno.
Hagamos 200 píxeles para comenzar.
Y si actualizo puedes ver que ahora hemos cambiado el ancho.
Si inspecciono el contenido no es azul.
Y luego tenemos un borde a su alrededor.
Entonces el contenido es azul.
Y en este diagrama que es este cuadro aquí este cuadro de elemento.
Y luego tenemos un borde que está directamente a su alrededor.
No hay espacio entre el borde y el contenido.
Otra cosa con el ancho y también hay una altura.
Así que hagamos una altura de 300 píxeles y veamos que acabamos de agregar un montón de espacio.
Voy a deshacerme de eso, pero hay una altura que podemos usar al igual que con.
No tenemos que usar solo píxeles para que podamos usar porcentajes.
Y esos son realmente útiles, así que déjame mostrarte.
Hagamos el 50 por ciento y usted se estará preguntando de qué se trata el 50 por ciento de.
Y la respuesta es que es el 50 por ciento del elemento padre.
Entonces, en este caso, es el cuerpo
que el párrafo está dentro del párrafo va a la mitad del cuerpo.
En nuestro caso, el cuerpo es la página completa.
Fue todo el camino.
Así que terminamos con la mitad de la página.
usarlo en esta cuadrícula de imágenes.
Y lo bueno de esto es que si cambio el tamaño de la ventana, también cambia para que mucha gente lo use y lo use para
Puedes ver que las imágenes cambian su ancho y eso es un porcentaje.
OK, así que voy a mantenerlo así por ahora.
Y luego, la siguiente propiedad de la que vamos a hablar es
el relleno y recordar el relleno es este espacio entre el elemento y el borde.
Y ahora no tenemos ningún espacio, las fronteras están en la parte superior.
Entonces hay una propiedad llamada relleno y podemos
darle un número de píxeles y vamos a hacer 10 píxeles para comenzar.
Guarde la actualización del archivo.
Y ahora tenemos 10 píxeles de relleno en todos los lados.
Entonces, si inspecciono ahora verán que ahora hay este
contenido verde que se introdujo, así que tenemos el contenido azul en sí y luego tenemos el verde alrededor, que
está entre el borde y el contenido, así que obviamente podemos incrementar esto y obtenemos mucho más espacio en el interior.
Pero esta no es la única forma de establecer el relleno.
Esto lo establece en los cuatro lados exactamente igual.
Pero a veces solo queremos relleno en un lado o dos lados al igual que con el borde.
Hay atajos para la versión más larga, donde se trata de un límite superior de 10 píxeles y cinco píxeles inferiores.
Lo mismo ocurre con el relleno y lo comentamos y podemos
hacer algo parecido a un relleno de 40 píxeles y fresco.
Y tenemos relleno aquí.
Y ese es el único lugar para el relleno.
Y recuerdo que el espacio de
aquí este azul no es el relleno que es su contenido real que viene de aquí.
Tan diferente a pesar de que parece que hay espacio a la derecha.
Viene de un lugar diferente.
Otra cosa que podemos hacer aquí es jugar con el margen.
Entonces el margen es la última pieza del rompecabezas.
Es el espacio en el exterior de la frontera.
Entonces entre elementos.
Entonces, esto va a ser útil porque quizás
deseemos incrementar o aumentar este espacio aquí mismo o como ejemplo aquí este espacio aquí entre las imágenes se establece usando Marjan.
podemos decir margen y hagamos algo obvio como 100 píxeles para comenzar y actualizar.
Así que en realidad se ve como un relleno, por lo que
Y lo que sucedió es que ahora tenemos
100 píxeles de espacio en todos los lados del elemento en el exterior del borde.
Entonces encuentra el aspecto.
Verá que en
Chrome se identifica como naranja, azul es el contenido Verde, el margen en naranja es el margen.
Así que como relleno.
es de 500 píxeles.
A veces solo queremos establecer una parte del margen en un lado para que podamos hacer algo como margen superior
Y luego, cuando vengan a este
por ahora y ahorren, y solo tenemos espacio en la parte superior a la izquierda, no hay nada.
Y luego más espacio en la parte superior de este.
Nada en la parte inferior o la izquierda o la derecha.
Entonces ese es el margen.
Entonces, a veces debemos agregar valores
a todos los lados del margen, pero no queremos tener que hacerlo con cuatro líneas diferentes.
Así que no queremos
que sean exactamente iguales si están aquí, pero no todos tenemos que decir margen margen superior margen izquierdo margen inferior.
Entonces hay otro atajo como para frontera.
O podemos hacer las cosas a la vez, podemos hacer este margen y darle cuatro valores.
Entonces, el primero es para la parte superior y luego la derecha y luego la inferior.
Hagamos 500 píxeles y luego la izquierda y al hacerlo obtenemos este
bonito margen de cuatro lados
donde los valores son todos diferentes, pero solo teníamos que hacer en una línea.
Entonces solo para inspeccionar esto aquí
y ver si obtenemos los 500 píxeles en la parte inferior, los 20 en la parte superior obtenemos el cien a la izquierda y luego tenemos los 40 a la derecha.
Entonces, hay una última cosa que verá a menudo con un margen que es el margen.
Auto.
Entonces, lo que podemos hacer es configurar el margen para que sea automático a la izquierda o a la derecha.
Y lo que eso hará es centrar un elemento para nosotros.
Déjame mostrarte cómo funciona eso.
y abajo y automático a la izquierda.
Y el comentario vuelve a salir y podemos escribir margen y digamos cero margen en la parte superior automática a la izquierda o en el margen cero a la derecha
Y si hago este tamaño completo y actualizo verá que centra las cosas para nosotros.
Entonces, eso significa que se decidió que esto es un 50 por ciento
porque dijimos que aquí y luego se da cuenta de que la izquierda es automática y la derecha es
automática, por lo que hace todo lo que necesita hacer y eso realmente nos centrará en nosotros.
Y luego tenemos cero en la parte superior e inferior para que estén comprimidos.
Lo que también podemos hacer es una forma aún más corta de hacerlo y parece que este margen cero es Otto.
Y entonces esto establecerá que la parte superior e inferior se pongan a cero a la izquierda y derecha a automático.
Así que nada cambia y también podemos usar esta sintaxis si quiero
agregar 50 píxeles a la parte superior y automático o si quiero agregar 50 píxeles y 20 píxeles.
Lo que hay que recordar es que necesitas la x allí a menos que el número sea cero.
Entonces, si hago esto, agrega 20 en la parte superior a la izquierda y la derecha y luego agrega 50 en la parte superior e inferior.
Así que vamos a resumir aquí una vez más.
Tenemos el contenido interno que está aquí.
Tenemos relleno que está entre los bordes, así que todo lo que tenemos es
relleno a la izquierda y luego tenemos margen que está entre el borde y en el otro lado.
Así que entre los elementos básicamente.
Entonces, en los siguientes videos vamos a aplicar estos conceptos y usarlos a lo largo de este curso