Qual a diferença entre PX e % no CSS

Olá Olivia.

O valor em px é uma medida fixa, ou seja, não depende do tamanho da tela que está mostrando a página.

Exemplo: se definir uma div com 100px de largura, ela sempre vai ter este tamanho, seja no desktop ou telas menores.

O valor em % é uma medida relativa, ou seja, depende do tamanho do elemento pai. Exemplo: se definir uma div com 50% de largura, ela sempre vai ocupar metade da largura do elemento pai (o elemento na qual ela está inserida).

O uso de um ou outro depende do atributo css que será aplicado e do resultado esperado/necessário no layout.

Exemplo, para centralizar um elemento na página:

/* largura total 100% */
div{
    width: 40%;  /* largura variável */
    margin: right: 30%;
    margin-left: 30%;
}

Outro modo é mantendo a largura fixa com px e a margem automática:

div{
    width: 300px;  /* largura fixa */
    margin: right: auto;
    margin-left: auto;
}

A aplicação varia muito conforme o elemento e o tamanho da tela, por isso algumas vezes será preciso combinar as medidas ou aplicar estilo diferente para determinados tamanhos de tela.

Abraço.

Renato, muito obrigada pela explicação!!!

No site https://www.w3schools.com/cssref/default.asp há a referência completa de CSS e outras linguagens.

Para ir mais além no estudo de CSS pode ver no site https://tailwindcss.com/docs/width como estilizar usando as classes prontas da ferramenta. Bons estudos!

Só um comentário - não esquecer de finalizar o tópico e marcar a solução para quem a deu. Beleza.