Oi.
Hoje vamos falar sobre o modelo da caixa.
E o que é o modelo de caixa, é realmente um conceito geral de CSS
que ajuda você a dimensionar e colocar seu elemento onde você quer que eles vão.
Então, uma das primeiras coisas que vamos falar é altura e largura.
Eu sei que eu já usei isso um pouco em algumas de minhas outras palestras, mas
eu queria ser muito específico em como ele funciona.
E uma das primeiras coisas que você precisa saber é que a altura e
largura de qualquer elemento inline é o próprio conteúdo.
Então, se você tiver um link, a altura e a
largura desse link são apenas o texto da parte clicável do link.
Elementos que não são inline, coisas que são bloco, bloco inline, coisas assim,
eles podem ter propriedades de altura e largura, e vimos isso na palestra Display.
Então, sempre que você tem algo que está em linha, se você der uma altura e
uma largura, o navegador simplesmente ignora.
Qualquer outra coisa, o navegador vai bem, eu posso ir em frente e mudar isso para você.
Algumas das outras coisas que queremos pensar então, quando temos elementos,
é como eles se encaixam na tela.
Uma das maneiras mais fáceis de
colocar estrategicamente as coisas em sua página é colocar bordas em torno delas.
Mesmo que você não queira essas fronteiras mais tarde em seu produto final,
acho que é muito útil ter essa idéia de quanto espaço um elemento está ocupando.
Assim, qualquer elemento pode ter uma borda em torno dele se o seu bloco inline
, ou bloco, ou inline.
E essas propriedades de borda especificam qual borda de estilo você deseja,
qual largura da borda e qual cor.
Eles são bastante simples.
O estilo de borda é o único que deve ser especificado.
Se você não especificar uma cor ou não especificar uma largura, não há problema.
O padrão será preto e provavelmente um pixel.
Mas você tem que decidir que tipo de estilo você quer.
Então, neste caso, eu disse, para todos os meus divs, eu quero que eles tenham uma
borda sólida de um pixel ao redor deles, e eu não posso dizer que cor é essa,
porque eu não sou tão nerd ainda, mas eu acho que algo como azul.
O estilo de borda que você deseja especificar, enquanto a maioria das pessoas sempre usa sólido,
há muitos estilos diferentes.
Você pode usar pontilhada, tracejada, ranhurada, cortada, escondida, inserida, início.
Há muitas coisas diferentes que você pode fazer, e
é realmente uma diferença estilística de sua parte.
Eu realmente não presto muita atenção a eles porque eu sempre usei apenas sólido.
Depois de decidir que tipo de estilo deseja, você pode especificar a largura e a cor.
Então, quando chega a hora de definir a largura, se você decidir, é que você pode configurá-lo em
um número de pixels ou você pode usar as palavras-chave, fino, médio ou grande.
Quando chegar a hora de fazer a cor,
você pode fazer a mesma coisa que temos feito o tempo todo.
Você pode simplesmente usar o nome, como azul, o valor RGB,
o valor hexadecimal, ou apenas para que você saiba, ele também é transparente.
Então ele pode apenas pegar a cor do que está por baixo dele.
Então, quando chegar a hora de você especificar o tamanho que você deseja que sua borda vá,
você pode especificar de quatro maneiras diferentes.
No primeiro exemplo, você apenas dá um número.
Neste caso, três pixels.
E o que ele vai fazer,
é colocar uma borda de três pixels em torno de todo o elemento assim.
Se você decidir dar-lhe dois valores, é ele vai definir uma borda de três pixels
na parte superior e inferior, e uma borda de dez pixels à esquerda e à direita.
Esta é uma maneira muito comum de configurar as coisas quando você está fazendo fronteiras e
outras propriedades, porque é uma abreviação muito agradável
que ainda é muito simples de entender e ler.
Se você der três valores, é um pouco mais complicado, e eu sempre
tropeço sobre o que é, então eu vou abrir a foto só para ter certeza.
O primeiro valor é sempre o topo.
Você quer que sua borda superior seja de 3 pixels.
Os 10 pixels são para a esquerda e a direita, e os 20 pixels para a parte inferior.
O último é quando você dá quatro valores, e quando você dá quatro valores,
isso basicamente significa superior, direita, inferior, esquerda.
E isso vai definir a borda para quatro valores diferentes.
Então, a maioria das pessoas usa o valor um
, os quatro valores, e algumas pessoas usam os dois valores também.
Principalmente, e uma das razões pelas quais te mostro isso é que pode ser muito intimidante,
e você está se perguntando o que as pessoas estão fazendo quando estão acontecendo.
Isto é o que eles estão fazendo.
Eles estão usando abreviações para que eles não precisam ter borda direita,
borda esquerda, borda superior, borda inferior.
Margem é basicamente o espaço que está fora da sua fronteira.
É entre, quando eu digo você e seu vizinho, ou
o que eu realmente deveria dizer é entre o elemento, e o vizinho do elemento.
Por isso dá-te aquele espaço no cotovelo onde não queres que ninguém te toque.
Com margens, sempre que você dá uma margem positiva,
você está basicamente dizendo, mova seu elemento para a direita ou para baixo.
Se você der uma margem negativa,
você está realmente fazendo com que ele se aproxime do vizinho.
Você está fazendo com que ele se mova para a esquerda ou para cima.
O preenchimento é muito semelhante em conceito à margem, mas
em vez disso este espaço está entre o elemento e sua borda.
Está dando um pouco de espaço extra lá dentro.
Você pode quase pensar nisso como esmagar o texto em alguns casos.
Da mesma forma, sempre que você tem valores positivos para
preenchimento, você está movendo-o para fora do elemento.
Você está dando mais espaço.
Se você dar-lhe um preenchimento negativo, você está realmente movendo a borda perto ou
talvez até mesmo em cima dos elementos que estão ao lado dela.
Então, com margem e preenchimento, tudo o que você vai fazer é dar um valor numérico.
Você vai dar algo como 3 pixels ou 10%.
Você não dá nenhum tipo de cor.
Vai ser sempre transparente.
O preenchimento sempre será da mesma cor que o elemento, e a margem
será sempre da mesma cor do pai, provavelmente o corpo da página.
Eles, assim como a borda, podem ser definidos em que um a quatro valores.
Então, se você colocar margem três pixels, será uma margem de três pixels em torno de tudo.
Se você disser preenchimento, dez pixels, cinco pixels, você terá superior,
inferior, esquerda e direita.
Então deixe-me mostrar uma foto rápida do que estou falando.
Neste caso, aqui está o meu texto é o meu elemento real.
Eu disse que isto é o que eu quero continuar.
O azul é a borda em torno do meu elemento.
O amarelo é o estofamento.
É o espaço entre o meu texto e a borda, e essa laranja é a margem, e
o que você está dizendo é, não me coloque perto de mais nada.
Dá-me este espaço à minha volta.
Então, pode mover seus parágrafos para baixo.
Pode mover seus divs para baixo e para cima.
Então, pratique isso.
E à medida que você joga com
ele cada vez mais, vai fazer mais sentido qual é uma margem e qual é o preenchimento.
Uma das coisas que você precisa entender quando você está fazendo preenchimento e borda e
margem, e tudo isso é que em HTML diz, sua altura e
sua largura são aditivas.
E então o que isso significa é que se você decidir que você quer que a largura do seu elemento
seja de 200 pixels, você provavelmente precisa levar em conta o
quão grande todos esses outros aspectos e propriedades são.
Então, neste caso, parte da largura é a margem, mais a borda,
mais o preenchimento, mais o elemento real consigo mesmo.
E assim tudo realmente se soma para obter o que consideramos a
largura real do seu elemento.
E isso vai importar quando você está olhando para sua página e você
está projetando e tentando decidir quanto espaço você quer que cada elemento ocupe.
Então, se olharmos para este exemplo aqui onde eu tenho a largura é 100px,
o preenchimento é 10px, a margem é 5px e a borda é 1px.
Eu espero que agora, você está fazendo as contas em sua cabeça, e
eu prometo não dar muito mais matemática do que isso, mas você está fazendo isso para descobrir
quanta largura esse elemento, faz essa div, realmente precisa na página.
E, neste caso, a largura é de 132 pixels.
Os 100, mais 10, mais cinco, mais um, mais um, mais cinco, mais dez.
Tudo se soma.
A altura, da mesma forma, é a sua altura mais o preenchimento superior e inferior, a
margem superior e inferior e a borda superior e inferior.
Tudo bem, então quando falamos sobre margem,
eu só queria jogar este slide dentro mesmo que ele não
combina com muitas das outras coisas que temos sido necessárias para falar.
Mas é porque a margem é muito importante para
quando você deseja centralizar elementos em uma página.
Quando queremos centralizar o texto, podemos usar o centro de alinhamento de texto,
e tudo parecia muito bom.
Mas quando você quer centralizar elementos, é um pouco mais difícil.
E assim a maneira padrão de fazer isso é usar o comando margin zero auto.
Então, se você se lembrar, o primeiro zero, que significa topo e baixo, e
então ele não vai realmente se importar com isso.
O auto é o que coloca esquerda e direita.
Agora isso só vai funcionar se o elemento acontecer de ser display:block,
se o elemento não está flutuando, é que o elemento tem uma largura que não é auto, o
que significa que você definiu.
E este último é se o elemento não é fixo ou posição absoluta.
Agora ainda não cobri posição.
E a boa notícia é que, como eu não cobri, você provavelmente não
mexeu com isso, e você não precisa se preocupar com essas duas coisas.
Mas enquanto você tenta enviar seus elementos, volte para este slide se precisar,
e marque esses itens para ter certeza de que todas essas propriedades se encaixam.
E essa é a melhor maneira de centralizar as coisas agora.
Finalmente, quando falamos sobre isso eu quero adicionar mais uma opção, e
isso é chamado de tamanho de caixa.
E o que o tamanho da caixa faz é tirar parte da matemática dessa altura aditiva
e largura aditiva.
O que suas opções são é que você pode ter caixa de conteúdo, então caixa de tamanho de conteúdo,
e isso é apenas o aditivo padrão.
Você vai ter que se lembrar de quanto espaço você está usando.
O próximo é chamado border-box.
E border-box realmente leva a largura, o conteúdo, o preenchimento e
a borda em consideração.
Então, se você diz que deseja que a largura seja de 200 pixels,
ele não vai realmente fazer o elemento 200 pixels.
Vai fazer 200 pixels menos o preenchimento e a borda.
Uma das últimas coisas a lembrar é que vamos levar em conta o preenchimento e a
borda, não vai levar em conta a margem.
Então, finalmente,
uma das coisas que vou mostrar neste exemplo em apenas um segundo,
são diferentes maneiras de definir a altura e a largura de diferentes elementos.
E há duas maneiras comuns de fazer isso.
O primeiro é chamado absoluto, e
é quando você define um elemento para um tamanho específico.
Você diz que eu quero que sejam tantos pixels, ou tantos milímetros, ou
tantos centímetros.
Pixels é uma maneira muito comum de definir tamanhos.
O outro tipo de medida é o que eu chamo de fluido, e
ele define o tamanho em relação aos elementos circundantes ou os elementos pai.
Então você pode usar coisas como por cento.
Você pode usar vw, que significa
largura viewport, vh que significa altura viewport.
Você pode até mesmo usar coisas como em e rem, que não são comumente usados, mas
eles realmente definem o tamanho em relação aos seus pais.
Então vamos em frente e passar para o meu exemplo para
que possamos brincar com isso um pouco.
Não vai ser suficiente para demonstrar tudo o que podemos fazer, mas
espero que você comece.
O que eu tenho aqui é um arquivo HTML muito simples
onde eu tenho um lado esquerdo e lado direito.
Mas como você pode ver, eles não estão para a esquerda e para a direita agora.
Eles estão apenas em cima um do outro.
Então a primeira coisa que eu quero saber é, você pode colocar esses divs ao lado do outro?
Teremos que usar um tipo de combinação de exibição, altura
, largura e estofamento.
Então vamos em frente e fazer isso.
Então aqui no meu arquivo CSS,
imediatamente você pode ver esse tipo de coisas de fundo que eu fiz.
Agora, quando você quer que as coisas fiquem próximas umas das outras, você tem que dar a elas uma largura,
porque agora eles ocupam 100%.
Uma opção seria você ir em frente e defini-lo para algum tipo de pixels.
E digamos, talvez, 200 pixels e 200 pixels, e veja o que aconteceria,
veja se funciona.
O problema de fazer isso, como eu descomento meu código aqui, é que,
à medida que as pessoas usam diferentes tamanhos de navegador, seus números podem ser muito grandes ou muito pequenos.
Então o que eu fiz aqui é que eu fui em frente e eu defini minha largura para 48%.
Agora fazer isso é realmente ótimo, e eu vou sair dessa linha por
apenas um segundo, porque a maioria das pessoas tem a idéia de que você quer
definir a largura para algo menor.
O que eles esquecem, é que mesmo que eles estejam ocupando apenas 48%,
na verdade eu vou até fazer algo muito pequeno.
20%, eles não vão ao lado um do outro.
Então você precisa lembrar que você quer usar essas medições de fluidos.
Então vamos voltar aqui, eu vou colocá-lo de volta para 40%.
Mesmo se você torná-lo realmente magro, até que você diga ao navegador,
oh, eu sei que isso está bloqueado, mas eu vou mudá-lo para bloco in-line,
ele nunca vai deixar elementos de bloco estar ao lado do outro.
Então é por isso que você tem que se lembrar de fazer ambos os elementos.
Então vamos em frente e salvar e recarregar.
E assim você pode ver que eu fui em frente e eu fiz a minha largura.
Já fiz o meu bloco de exibição.
Eu tenho meu estofamento.
Eu tenho a minha fronteira, e eu tenho alguma margem.
A última coisa que vou fazer, só para acabar com isso para mostrar o que está acontecendo,
é ir em frente e
mudar isso para 50%, porque esse é um erro muito comum que as pessoas cometem.
Dizem que quero duas coisas um ao lado do outro.
Então eu vou ganhar 50% para cada um.
Não se esqueça que quando fizer
isso, não funciona porque são 50% antes de colocar a fronteira em conta.
Então certifique-se de que você está jogando com todas essas coisas, que você está jogando com
a margem, você está jogando com o preenchimento, você está jogando com a borda.
Porque é assim que você vai fazer as coisas funcionarem, ajustando, ajustando, ajustando.
Então vamos em frente e rever.
Quando chegar a hora de você começar a implementar todas essas idéias,
seu modelo de caixa com seu preenchimento, conteúdo, margem
, etc., você realmente quer desenhar esboços no papel primeiro, porque é muito difícil
enfiar as coisas depois que você já veio acima com um esboço, certo?
Então projete primeiro, código segundo.
A segunda coisa que você pode querer fazer é usar o modelo de caixa
para reduzir a complexidade do seu código.
Ou pelo menos a complexidade da sua matemática tentando descobrir
o que as coisas se encaixam onde.
Finalmente, não importa o que você faça,
você precisa lembrar que a margem sempre tem que ser considerada.
Pode ser complicado quando você começa a tentar juntar sua página,
e fazer as coisas irem exatamente para onde você quer que elas vão, e
nós nem sequer falamos sobre posicionamento ainda, o que seria ainda mais um elemento.
Então, por agora, pratique essas coisas de pequenas maneiras.
Use Inspect Element para jogar com ele e não precisa mudar tanto seu código.
Até você deixar as coisas parecerem do jeito que você quer.
E não se preocupe, estamos todos cometendo erros.
Estamos todos a fazer isto juntos.
Mas eu acho que sua página está se aproximando e
mais perto de algo que você realmente gostaria de colocar para fora na web.
Bom trabalho.