Entrar Ainda não tem acesso?
1
resposta

[Sugestão] Propriedade box-sizing do CSS

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Posicionando mais elementos e atividade Height e box-sizing

por Robson Rodrigo Da Silva
| 41.7k xp | 3 posts

Olá a todos! Uma duvida e uma sugestão. Na video aula que fala sobre o reset do CSS, a propriedade box-sizing está sendo inserido na tag body. Não seria mais interessante essa propriedade estar na tag de reset do CSS no caso o *(asterisco) ?

* {
    box-sizing: border-box;
    }

Da forma que foi explicado na aula essa propriedade estará dando o efeito somente no body, sendo que as outras tags e classes ainda continua correndo o risco de acontecer dos elementos filhos sairem das tags pai, portanto, não seria melhor colocar essa propriedade como um reset do CSS? No caso dentro do *(asterisco) ?

Fica a minha duvida e também sugestão de correção. Desde já obrigado!

1 resposta
por Mayza Ynara Mendes Rodrigues
| 38.1k xp | 21 posts
Desenvolvedora Front end

Olá! Você tem uma ótima observação. A propriedade box-sizing: border-box; é frequentemente usada no seletor universal (*) para garantir que o padding e a borda estejam incluídos na largura e altura total do elemento. Isso pode ajudar a evitar problemas com o layout, especialmente quando se trabalha com layouts responsivos.

No entanto, a decisão de onde colocar essa propriedade pode depender do projeto específico e das necessidades de estilo. Em alguns casos, pode ser preferível aplicá-la apenas a certos elementos em vez de todos eles.

Aqui está um exemplo de como você poderia aplicar essa propriedade no seletor universal:

* {
    box-sizing: border-box;
}

Isso fará com que todos os elementos na página herdem essa propriedade. Lembre-se de que o uso do seletor universal pode ter implicações de desempenho, então use-o com cuidado.

Espero que isso ajude a esclarecer sua dúvida! Bons estudos