Surcape -
Redes Sociais:

Você não está conectado. Conecte-se ou registre-se

[CSS] Propriedade "box-sizing"

Mensagem - Página 1 de 1

1 [CSS] Propriedade "box-sizing" em Dom Nov 01, 2015 7:22 pm

avatarDeveloper
Após gerações, as pessoas aperceberam-se que a matemática não é divertida, então foi criada uma nova propriedade de CSS chamada box-sizing. Quando configuras box-sizing: border-box; num elemento, o espaçamento e fronteira desse elemento deixa de aumentar a sua largura. Aqui está o mesmo elemento da página anterior, mas com box-sizing: border-box; em ambos os elementos:
Código:
.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Uma vez que isto é muito melhor, alguns autores queriam que todos os elementos em todas as suas páginas funcionassem sempre desta maneira. Esses autores colocam o seguinte CSS nas suas páginas:
Código:
* {
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Isto assegura que todos os elementos são sempre dimensionados desta maneira mais intuitiva.

Uma vez que box-sizing é bastante novo, deves utilizar por agora os prefixos -webkit- e -moz-, como eu tenho nestes exemplos. Esta técnica permite activar características experimentais em browsers expecificos. Mantém também em mente que isto é IE8+.

2 Re: [CSS] Propriedade "box-sizing" em Dom Nov 01, 2015 8:42 pm

avatarParticipativo
Já conhecia essa propriedade, irá ajudar muitos usuários procurando mais conhecimento.

3 Re: [CSS] Propriedade "box-sizing" em Seg Nov 02, 2015 1:53 pm

Administrador

Ótimo tutorial! Valeu

4 Re: [CSS] Propriedade "box-sizing" em Seg Nov 02, 2015 2:21 pm

avatarParticipativo
Obrigado por compartilhar


__________________________________

5 Re: [CSS] Propriedade "box-sizing" em Seg Nov 02, 2015 6:41 pm

avatarParticipativo
Irar Ajudar Muito
Obrigado por Compartilhar

Conteúdo patrocinado

Mensagem - Página 1 de 1

Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum