Box-sizing nas CSS3 - Exemplos
05/08/2016
0
E aí, pessoal.
Nesse artigo que publiquei recentemente ensino a utilizar o recurso de box-sizing das CSS3, que facilitam o dimensionamento de elementos que precisam de padding e border: CSS3: Box-sizing.
Vocês costumam usar em seus projetos? Têm algum exemplo de uso que queiram compartilhar? Abrí esse tópico para reunirmos exemplos para enriquecer a comunidade.
Nesse artigo que publiquei recentemente ensino a utilizar o recurso de box-sizing das CSS3, que facilitam o dimensionamento de elementos que precisam de padding e border: CSS3: Box-sizing.
Vocês costumam usar em seus projetos? Têm algum exemplo de uso que queiram compartilhar? Abrí esse tópico para reunirmos exemplos para enriquecer a comunidade.
Joel Rodrigues
Curtir tópico
+ 12
Responder
Post mais votado
05/08/2016
Esse recurso pode ser legal, por exemplo, para encaixar vários blocos dentro de um container sem exceder os limites. Por exemplo:
Com o box-sizing nos elementos os três ficam encaixados no container, mas sem essa propriedade só cabem dois:
Se quiserem testar online esse exemplo, o link é esse: https://jsfiddle.net/Lqb57p2z/1/.
<div class="container"> <div class="elemento"></div> <div class="elemento"></div> <div class="elemento"></div> </div>
Com o box-sizing nos elementos os três ficam encaixados no container, mas sem essa propriedade só cabem dois:
.container {
border:1px solid red;
width: 300px;
height:100px;
}
.elemento {
width: 100px;
height:100px;
border:2px solid blue;
box-sizing: border-box;
float:left
}Se quiserem testar online esse exemplo, o link é esse: https://jsfiddle.net/Lqb57p2z/1/.
Joel Rodrigues
Responder
Mais Posts
07/08/2016
Marcus Santos
Olá Joel,
Não conhecia esse recurso, começarei a utilizar com mais frequência em meus projetos.
Ele funciona bem em todos os navegadores mais recentes ?
Obrigado pela dica, com o exemplo fica bem fácil de entender.
Abs
Não conhecia esse recurso, começarei a utilizar com mais frequência em meus projetos.
Ele funciona bem em todos os navegadores mais recentes ?
Obrigado pela dica, com o exemplo fica bem fácil de entender.
Abs
Responder
08/08/2016
Joel Rodrigues
Fala, Marcus. Tudo bem?
Esse recurso está disponível em todos os browsers modernos sim. Para ver as versões que suportam, você pode visitar esse link: Can I use box-sizing?.
Abraço.
Esse recurso está disponível em todos os browsers modernos sim. Para ver as versões que suportam, você pode visitar esse link: Can I use box-sizing?.
Abraço.
Responder
Clique aqui para fazer login e interagir na Comunidade :)