Ir para conteúdo
Faça parte da equipe! (2024) ×
Conheça nossa Beta Zone! Novas áreas a caminho! ×
  • Quem está por aqui   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.

Por que usar 'border-box' na estilização da sua página


DATSIK
 Compartilhar

Posts Recomendados

Bom pessoal, minha primeira contribuição para o fórum.

Gostaria de explicar porque é bom sempre usar a propriedade border-box no momento de estilizar sua página html.

 

Todos os elementos no html é uma caixa, você controla o tamanho vertical com o height, o tamanho horizontal com o width, as margens internas e externas com o margin e padding, entre outras coisas.

O box model define como essas propriedades em conjunto vão montar um elemento e determinar o seu tamanho final.

 

Na documentação, a regra diz que a propriedade width trata do tamanho do conteúdo do elemento, não considerando seu padding e border (o mesmo vale para a altura).

Isto é, se você criar uma div querendo que ela ocupe metade da página com uma borda: width: 50%; border: 10px solid #ccc, o resultado não será o que você espera, pois o elemento terá mais 20px (10px de cada lado) mais o tamanho do componente pai (sua div).

 

Um exemplo no JSFiddle:

É necessário se cadastrar para acessar o conteúdo.

Note que ambas as divs tem 50% de largura, o que difere é que uma delas tem uma borda. Mas veja como o tamanho fica na página.

 

Quando você pensa em uma caixa normalmente pensa no tamanho dela junto com o tamanho da borda. Uma caixa termina em sua borda e isso deveria ser considerado o seu tamanho.

 

É possível mudar o box model dos elementos usando a propriedade "box-sizing": box-sizing: border-box

Isso diz que todos os elementos terão seu tamanho definido junto com a borda e o padding (vertical ou horizontal). Seria basicamente isto:

 

XF7JcTO.png

Então, antes mesmo de começar a estilizar os elementos, crie um seletor universal e coloque o box-sizing: border-box nele, assim:

É necessário se cadastrar para acessar o conteúdo.

O seletor universal não pega pseudo elementos, então uma boa é colocar assim:

 

É necessário se cadastrar para acessar o conteúdo.

 

Atribuia a essas três propriedades, cada navegador renderiza de uma forma. Assim você evita problemas futuros.

 

Veja o mesmo exemplo, só que agora usando a propriedade box-sizing:

É necessário se cadastrar para acessar o conteúdo.

Ambos os elementos tem 100px de altura e 50% de largura, independente da sua borda ou margem interna.

 

Espero que gostem.

Link para o comentário
Compartilhar em outros sites

  • 4 meses depois...

É, eu gosto de HTML (Abordando todo seu conceito) por causa do CSS, as possibilidades são quase infinitas, é muita coisa. Sou meio leigo nisso porém nem tanto, obrigado por compartilhar conosco.

~Abraços

A Jedi uses the Force for knowledge and defense, never for attack.

-Yoda, Master.

Link para o comentário
Compartilhar em outros sites

A Mozilla já se adequou aos padrões da W3c, não é preciso usar o seletor para navegadores firefox (incluindo o do sistema Android).

Para o chrome (e em outros navegadores) ainda é necessário.

 

É necessário se cadastrar para acessar o conteúdo.

 

NAVEGADORES QUE SUPORTAM:

É necessário se cadastrar para acessar o conteúdo.

 

OBS: Já se passaram 30 dias, mas o tópico estava na primeira página (sendo o primeiro da lista). E acho que meu comentário contribui para o assunto.

:slow:

Link para o comentário
Compartilhar em outros sites

Este tópico está impedido de receber novos posts.
 Compartilhar

×
×
  • Criar Novo...

Informação Importante

Nós fazemos uso de cookies no seu dispositivo para ajudar a tornar este site melhor. Você pode ajustar suas configurações de cookies , caso contrário, vamos supor que você está bem para continuar.