1. Explicando o Box Model
Todo elemento HTML pode ser considerado como uma "caixa" de conteúdo. Tudo que está dentro de uma tag, é o seu conteúdo, podendo inclusive ter outras caixas. Uma forma bem fácil de entender o conceito do box model é, caso seu navegador for o Firefox, usando uma ferramenta: Clique com o botão direito e escolha a opção "Inspecionar Elementos". Você verá uma lista com vários tags, e se você clicar numa das tags, você verá um retângulo indicando a localização no site.
 |
| O blog usando a inspenção 3D do Firefox, possibilitando ver cada "caixa" usada. |
Então, agora vocês tem uma ideia do que é o Box Model, então vamos entender como essa caixa é dividida. As caixas são divididas em:
- Margem Externa (Margin): É a parte mais externa da caixa e tem a função de limpar a área em volta da borda, de dar um espaço entre a borda e o elemento adjacente. A margem externa não possui cor de fundo;
- Borda (Border): A borda envolve a margem interna e o conteúdo. É afetado pela cor da caixa;
- Margem Interna (Padding): A margem interna é o espaçamento dado entre a borda e o conteúdo. É afetado pela cor da caixa;
- Conteúdo (Content): É o conteúdo propriamente dito, onde os textos e imagens aparecem.
 |
| Divisão de uma caixa |
2. A Área do Conteúdo
A área do conteúdo é a mais simples de configurar, necessitando apenas informar a largura do elemento e, opcionalmente, a altura. Para ambos, o valor padrão é auto, ou seja, é calculado de acordo com o conteúdo que for inserido, mas aceita qualquer tipo de valores de medidas. O comando que ajustas esses valores são width para a largura e height para a altura. Exemplo:
div {
width: 400px;
height:300px;
}
3. Margem Interna
Saindo para mais uma camada da nossa cebola, vamos ver o que podemos alterar na margem interna. Podemos alterar o espaçamento de cada lado individualmente, usando os seguintes comandos:
- padding-top: altera o espaçamento superior;
- padding-bottom: altera o espaçamento inferior;
- padding-right:altera o espaçamento da margem interna direita;
- padding-left: altera o espaçamento da margem interna esquerda;
div {
width: 400px;
height:300px;
padding-top:5px;
padding-bottom:7px;
padding-right:3px;
padding-left:10px;
}
A configuração da margem interna também possui o comando curto para indicar toda configuração em uma linha, o padding, entretanto, existe quatro maneiras e que pode afetar:
Essa primeira,a sequência dos quatros valores são: superior, direita, inferior, esquerda. Usando o mesmo exemplo ficaria:
div {
width: 400px;
height:300px;
padding:5px,3px,7px,10px;
}
A segunda forma, utiliza três valores, que significam superior, laterais (esquerda e direita) e inferior:
div {
width: 400px;
height:300px;
padding:10px,5px,3px;
}
A terceira forma, a de dois valores, tem a seguinte sequencia: verticais (superior e inferior), laterais (esquerda e direita):
div {
width: 400px;
height:300px;
padding:10px,5px;
}
A última forma utiliza o mesmo espaçamento nos quatro lados:
div {
width: 400px;
height:300px;
padding:5px;
}
4. Borda
A próxima camada é a borda, e provavelmente é a que tem uma configuração mais complexa do que as outras.
4.1 Estilo da Borda
Então, vamos começar falando sobre o estilo de borda: Para modificar o estilo da borda, definimos o border-style com um dos seguintes valores:
- dotted: borda pontilhada;
- dashed: borda tracejada;
- solid: borda com linhas contínuas;
- double: borda com linhas contínuas duplas. A distância entre as duas linhas é definido pelo valor de border-width, que será visto adiante;
- groove: borda com efeito 3D entalhada;
- ridge: borda com efeito 3D em ressalto;
- inset: borda com efeito 3D em baixo relevo;
- outset: borda com efeito 3D em alto relevo;
- none: nenhuma borda;
div {
width: 400px;
height:300px;
padding:5px;
border-style:inset;
}
Também podemos utilizar comando para declarar um estilo diferente para cada lado da borda. Para isso você pode usar as seguintes definições:
- border-top-style:configura o topo da borda;
- border-right-style:configura a borda do lado direito;
- border-left-style: configura a borda do lado esquerdo;
- border-bottom-style: configura a borda da parte de baixo;
div {
width: 400px;
height:300px;
padding:5px;
border-top-style:inset;
border-bottom-style:inset;
border-left-style:dotted;
border-right-style:dotted;
}
Também existem as configurações rápidas para configurar as bordas, Para isso, colocamos o comando border-style com os valores na seguinte sequência: topo, direita, baixo, esquerda:
div {
width: 400px;
height:300px;
padding:5px;
border-style:inset dotted inset dotted;
}
Com três valores, temos a seguinte sequência: topo, esquerda e direita, baixo:
div {
width: 400px;
height:300px;
padding:5px;
border-style:inset dotted inset;
}
E com dois valores, temos as seguinte sequência de valores: topo e baixo, esquerda e direita:
div {
width: 400px;
height:300px;
padding:5px;
border-style:inset dotted;
}
ATENÇÃO: Um aviso importante é que se você deseja modificar a largura da borda ou cor da borda, é necessário sempre definir antes qual é o estilo da borda. Ou seja, se for modificar a borda, a configuração do estilo é obrigatória.
4.2 Largura da Borda
Largura de borda é medido sempre em pixels usando o comando border-width. Também pode usar valores prédefinidos que são: thin, medium e thick.
div {
width: 400px;
height:300px;
padding:5px;
border-style:inset dotted;
border-width:2px;
}
4.3 Cor da Borda
A cor da borda pode ser setada pelo comando border-color e pode utilizar tanto a notação hexadecimal (#000000) quanto a notação RGB (rgb(0,0,0)):
div {
width: 400px;
height:300px;
padding:5px;
border-style:inset dotted;
border-width:2px;
border-color:rgb(255,0,54);
}
4.4 Configuração Rápida
A configuração rápida para formatar a borda, utiliza o comando border com a seguinte ordem de valores: largura, estilo (obrigatório) e cor:
div {
width: 400px;
height:300px;
padding:5px;
border:2px inset rgb(255,0,54);
}
5. Entre a Borda e a Margem: Outline
A outline podemos dizer que é uma linha que marca o limite entre a borda e a margem, e que pode ser desenhada. Diferente da borda, a espessura do outline não é contado como parte do objeto, ou seja, ele pode ser largo o suficiente para "invadir" outros elementos, mas se observar a largura total do objeto, ele não é contado. Os comandos das outines são:
- outline-style: define o estilo do outline;
- outline-color: define a cor do outline;
- outline-width: define a espessura do outline.
div {
width: 400px;
height:300px;
padding:5px;
border:2px inset rgb(255,0,54);
outline-style:solid;
outline-color:#000000;
outline-width:1px;
}
A outline também tem uma configuração rápida, usando o comando outline com os valores na seguinte ordem: cor, estilo, largura.
div {
width: 400px;
height:300px;
padding:5px;
border:2px inset rgb(255,0,54);
outline:#000000 solid 1px;
}
6. Margem
A margem é a parte mais externa de um elemento visível. A margem possui somente configurações de medidas, que são inseridos com qualque unidade de medida suportado pelo CSS. Os comandos são:
- margin-top:Margem superior;
- margin-bottom: margem inferior;
- margin-left: margem esquerda;
- margin-right: margem direita.
div {
width: 400px;
height:300px;
padding:5px;
border:2px inset rgb(255,0,54);
outline:#000000 solid 1px;
margin-top:1px;
margin-bottom:1px;
margin-left:2px;
margin-right:2px;
}
Também existe as configurações curtas das margens, usando o comando margin, com quatros valores respectivamente: superior, direito, inferior, esquerda:
div {
width: 400px;
height:300px;
padding:5px;
border:2px inset rgb(255,0,54);
outline:#000000 solid 1px;
margin:1px 2px 1px 2px;
}
Para três valores temos a sequência: superior, esquerda e direita, inferior:
div {
width: 400px;
height:300px;
padding:5px;
border:2px inset rgb(255,0,54);
outline:#000000 solid 1px;
margin:1px 2px 1px;
}
Para dois valores, temos superior e inferior, esquerda e direita:
div {
width: 400px;
height:300px;
padding:5px;
border:2px inset rgb(255,0,54);
outline:#000000 solid 1px;
margin:1px 2px;
}
e finalmente usando apenas um número, que será aplicado nas quatro margens:
div {
width: 400px;
height:300px;
padding:5px;
border:2px inset rgb(255,0,54);
outline:#000000 solid 1px;
margin:1px;
}
7. Conclusão
Bem, pessoal, essa foi o nosso tutorial sobre box model, que são bastante utilizados para desenvolvimento de layout de sites. E também, a principio, conclui a série CSS. Talvez eu poste algo que possa ser interessante, mas isso já é algo avançado. Então até a próxima.
Nenhum comentário:
Postar um comentário