Repaso, Pseudoelementos, "box-sizing" y Posicionamiento
En la clase de hoy hemos realizado inicialmente un breve repaso de los contenidos vistos anteriormente, como el "display". Después de hacer el repaso hemos continuado viendo el ejercicio práctico de ejemplo que se empezó a ver en la clase anterior. Se ha recordado que una parte importante a la hora de hacer un proyecto, página o sitio web, es la documentación de lo que hemos ido realizando, para que son algunos elementos o pseudo elementos, cambios que se vayan haciendo, etc. Esto es importante, sobre todo si otra persona tiene que trabajar sobre nuestro código, que sepa identificar lo que hemos hecho, al igual que nosotros necesitaremos de una documentación si trabajamos con el código de otra persona. Hemos consultado que es el pseudo elemento ":nth-of-type", que sirve para dar atributos a ciertos elementos hermanos en ciertas posiciones concretas, por ejemplo: "quiero dar el mismo color a todo cuarto elemento, de cada grupo de elementos hermanos".
También hemos visto el "box-sizing", que consiste en seleccionar un tamaño por defecto a una caja, por defecto vendrá como "content-box", pero podemos cambiarlo por "border-box o padding-box", por ejemplo, que hace que el "width" se calcule con el tamaño que pongamos específico y adapte el resto de tamaños como "padding, border o content", es decir, que lo que le demos al width será lo que se muestre en el navegador, al contrario que el "content-box", que calcula cada uno por separado de lo dicho anteriormente y toma el valor de cada uno. Hemos abierto otro ejercicio de ejemplo sobre el "box-sizing", para ver como se comporta con un ejemplo.
En la segunda hora de clase hemos empezado viendo otro ejercicio práctico de ejemplo sobre Layout y elementos relacionados con el posicionamiento de las cajas. Por ejemplo, para un centrado horizontal, se usaría el "text-align: center" al elemento padre, hará que el elemento al que se lo apliquemos se ponga centrado dentro de su caja, estos son elementos en línea. Están los elementos en bloque como el "margin: X(un valor) auto" + una anchura dada. Dentro de una fila se pueden dar varios elementos en bloque con, por ejemplo, usando el "text-align: center" al padre, con un "display: inline-block" a los elementos y teniendo una anchura. También se puede usar los contenedores "flex", de una forma más sencilla. LO anterior era para un centrado horizontal, pero para centrar verticalmente, en el caso de elementos en línea, habría que añadir el mismo "padding" arriba y abajo, además de añadir un "vertical-align: middle", dentro de un elemento tabla o si se simula con un "display", recordando que el elemento padre debe tener una altura fija. También se pueden usar contenedores "flex" para facilitar la operación. El centrado vertical en elementos en bloque se haría aplicando la propiedad "position" en el contenedor y el elemento, o con "flex".
No hay comentarios:
Publicar un comentario