Portanto, um dos conceitos mais importantes que ainda temos para cobrir e avaliar é o posicionamento de elementos.
Então, como colocamos uma página ou movemos uma div na parte superior direita.
Ou como fazemos uma tag de âncora mais ampla ou adicionamos espaçamento entre as imagens.
Tudo isso é realmente importante e está tudo relacionado a algo chamado o modelo de caixa.
Então, o modelo de caixa é essa idéia básica que é realmente central para tudo em HD, você avalia
qual é que, basicamente, cada elemento possui uma caixa retangular à sua volta.
Então, podemos ver aqui apenas indo para qualquer página da Web no MDA e eu tenho o inspetor aberto e
eu tenho a lupa selecionada.
E enquanto folhei sobre cada elemento, você pode ver que há uma caixa ao redor.
Então, este H2 tem uma caixa azul à sua volta.
Este tem uma caixa.
Mesmo coisas que não são particularmente atraentes.
Então, esta esquina arredondada div. Ainda tem uma caixa ao redor.
Por trás das cenas.
Então, isso aqui e
este não é realmente redondo ou não boxy procurando ter esses cantos arredondados, mas ainda é uma caixa.
Então, essas caixas são realmente úteis nos bastidores porque podemos criar diferentes propriedades nelas.
Portanto, existem quatro propriedades ou quatro partes diferentes de cada caixa.
Há muito mais propriedades, mas para partes da caixa que podemos manipular.
Então vamos supor que este diagrama que também é do MDA e é um parágrafo.
Então eu tenho um texto em um parágrafo e eu dou uma laranja ou uma borda amarela e isso é o
que o usuário vê algum texto e uma borda, mas, nos bastidores, há algumas outras coisas acontecendo.
Então, entre a borda e o texto, há algo chamado de preenchimento.
Então, o preenchimento é apenas o espaço no interior da borda.
Então, entre o conteúdo e a borda é preenchimento e, em
seguida, há margem que está do outro lado, está entre a borda do lado de fora e qualquer outra coisa.
Então usamos a margem frequentemente para adicionar espaçamento entre elementos.
Então, se tivéssemos dois parágrafos e eu queria
que eles estivessem mais separados, então eu usaria margem e aumentaria isso.
Então, agora vamos fazer
um mergulho profundo na verdade, a sintaxe de algumas das propriedades que queremos usar antes de fazer isso.
agora temos uma maneira de fazer algo parecido com isso.
Quero mostrar-lhe duas coisas que você pode esperar para fazer o primeiro dos mais excitantes, mas o que é importante é que
Até agora, na verdade, na verdade, não temos como fazer essas caixas que estão conectadas uma
à outra, com um atribuído a elas, mas estão vazias, não há texto dentro.
Então, vamos aprender sobre o modelo de caixa e aplicar isso aqui para
fazer este tic tac toe board e então vamos fazer esse site de portfólio para um fotógrafo de ficção.
Então isso é legal.
As imagens são sensíveis, portanto, altera o tamanho, altera o tamanho da janela e a grade.
Tudo isso é baseado nos conceitos que você vai aprender aqui.
Então eu vou continuar e abrir aqui sublime.
E eu tenho um documento realmente simples que criei.
Então, é apenas HTML simples.
Tem uma folha de estilo conectada.
Está vazio.
Além de alguns comentários e depois de dois parágrafos.
Então, se eu abrir isso, pode ver que
é muito básico e chato e vamos usar isso para brincar com o modelo de caixa.
Então eu vou para o
meu sucesso e vou selecionar parágrafos e então vou copiar esses comentários para dentro, para que eu
possa escrever algum código abaixo deles apenas para lhe dizer o que estou fazendo.
Então, comecemos por dar a essas uma fronteira.
Então, isso deve ser revisar a borda
e vamos fazer pixel de azul sólido, salvo que atualizamos e você pode ver que nós conseguimos uma borda todo o caminho do conteúdo.
E o que você também percebeu é que o conteúdo aqui vai todo o caminho pela tela.
parágrafo por padrão, vai todo o caminho pela tela.
Nossa fronteira não pára aqui e é porque, quando fazemos um
Então, se eu
quiser alterar a largura do próprio parágrafo do texto, posso usar a propriedade de largura e eu vou seguir uma largura de uma.
Vamos fazer 200 pixels para começar.
E se eu atualizar, você pode ver que agora mudamos a largura.
Se eu inspecionar o conteúdo não é azul.
E então temos uma borda ao redor.
Então, o conteúdo é azul.
E neste diagrama que é esta caixa aqui esta caixa de elemento.
E então temos uma borda que está diretamente em torno dela.
Não há espaço entre a borda eo conteúdo.
Uma outra coisa com a largura e também há uma altura.
Então, vamos fazer uma altura de 300 pixels e veremos que acabamos de adicionar um monte de espaço.
Eu vou me livrar disso, mas há uma altura que podemos usar exatamente como.
Não precisamos apenas usar pixels para que possamos usar porcentagens.
E esses são realmente úteis, então deixe-me mostrar-lhe.
Vamos fazer 50 por cento e você pode estar se perguntando sobre o que é 50 por cento.
E a resposta é que é 50% do elemento pai.
Então, neste caso, é o corpo que
o parágrafo está dentro do parágrafo vai na metade do corpo.
No nosso caso, o corpo é a página inteira.
Foi todo o caminho.
Então terminamos com a metade da página.
para usar nesta grade de imagem.
E o que é bom sobre isso, se eu alterar o tamanho da janela, ele também muda para que muitas pessoas usem isso e usarão isso realmente
Você pode ver que as imagens mudam sua largura e essa é uma porcentagem.
OK, então eu vou ficar assim por enquanto.
E então a próxima propriedade sobre a qual vamos falar é preencher
e lembrar o preenchimento é esse espaço entre o elemento e a borda.
E agora não temos nenhum espaço para as fronteiras em cima.
Então, existe uma propriedade chamada preenchimento e podemos
dar uma série de pixels e vamos fazer 10 pixels para começar.
Salve a atualização do arquivo.
E agora temos 10 pixels de preenchimento em todos os lados.
Então, se eu inspecionar agora, você verá que existe
agora esse conteúdo verde que é introduzido, então nós temos o conteúdo azul em si e então temos o verde em
torno dele, que está entre a borda eo conteúdo, então podemos obviamente incrementar isso e nós conseguimos muito mais espaço por dentro.
Mas esta não é a única maneira de configurar o preenchimento.
Isso ajusta isso em todos os quatro lados exatamente como o mesmo.
Mas às vezes só queremos preencher de um lado ou de outro lado, como com a borda.
Há cortes curtos para a versão mais longa, onde é um limite superior de 10 pixels de borda cinco pixels.
A mesma coisa com estofamento e comentar isso e
podemos fazer algo como preenchimento deixado 40 pixels e fresco.
E nós recebemos estofamento aqui.
E esse é o único lugar para preenchimento é.
E eu lembro do espaço por
aqui, este azul não é o preenchimento que é seu conteúdo atual, que é com isso aqui.
Tão diferente, embora pareça que há espaço à direita.
Vem de um lugar diferente.
Então, outra coisa que podemos fazer aqui é jogar com a margem.
Então, a margem é uma última peça do quebra-cabeça.
É o espaço na parte externa da fronteira.
Então entre elementos.
Então, isso será útil, porque podemos querer
incrementar ou aumentar este espaço aqui ou, como exemplo, aqui neste espaço, aqui, entre as imagens, é configurado usando o Marjan.
dizer margem e vamos fazer algo óbvio como 100 pixels para começar e atualizar.
Então, ele realmente se parece com o preenchimento para que possamos
E o que aconteceu é que agora temos
100 pixels de espaço em todos os lados do elemento na parte externa da borda.
Então, procure um aspecto.
Você verá isso
no Chrome que é identificado como laranja, então o azul é o conteúdo Verde é o preenchimento em Orange é a margem.
Assim como o preenchimento.
é de 500 pixels.
Às vezes, só queremos definir uma parte da margem de um lado para que possamos fazer algo como a margem superior
E então, quando eles vêm a
este por agora e economizam e nós só ganhamos espaço no topo à esquerda, não há nada.
E, em seguida, mais espaço no topo desta.
Nada na parte inferior ou esquerda ou direita.
Então, isso é margem.
Então, às vezes, nós adicionamos valores
a todos os lados da margem, mas não queremos fazer isso com quatro linhas diferentes.
Então, não queremos que eles
sejam exatamente os mesmos se eles estiverem aqui, mas não todos temos que dizer margem margem superior margem esquerda margem direita inferior.
Então, há outro atalho exatamente como para a fronteira.
Ou podemos fazer as coisas ao mesmo tempo, podemos fazer essa margem e dar quatro valores.
Então, o primeiro é para o topo e depois para a direita e depois para o fundo.
Vamos fazer 500 pixels e, depois, à esquerda e fazendo isso, obtemos
esta agradável margem de quatro
lados, onde os valores são todos diferentes, mas só precisamos fazer em uma linha.
Então, apenas para inspecionar isso
aqui e ver se conseguimos os 500 pixels no fundo, os 20 em cima, obtemos a centena à esquerda e depois temos os nossos 40 à direita.
Então, há uma última coisa que você verá com margem com margem.
Auto.
Então, o que podemos fazer é definir a margem como auto na esquerda ou na direita.
E o que isso fará é realmente Centrar um elemento para nós.
Então, deixe-me mostrar-lhe como isso funciona.
parte inferior e automática à esquerda.
E o comentário desta vez e podemos escrever margem e digamos zero margem na parte superior automática à esquerda ou na margem zero direita e na
E se eu fizer este tamanho completo e atualizar, você verá que ele concentra coisas para nós.
Então, o que isso significa que ele decidiu que isso é 50
por cento porque dissemos que, aqui e depois, descobre que a esquerda é auto e a direita é
auto assim que faz tanto quanto precisa fazer e isso realmente irá centrá-la para nós.
E então temos zero na parte superior e inferior para que eles sejam arranhados juntos.
O que também podemos fazer existe uma maneira ainda mais curta de fazer isso e parece que esta margem zero Otto.
E assim isso irá definir a parte superior e inferior para zero, a esquerda e a direita para auto.
Então, nada muda e também podemos usar essa sintaxe se quiser
adicionar 50 pixels na parte superior e automática ou eu quero adicionar 50 pixels e 20 pixels.
A única coisa a lembrar é que você precisa do x a menos que o número seja zero.
Então, se eu fizer isso, adiciona 20 no topo à esquerda e à direita e depois adiciona 50 na parte superior e inferior.
Então vamos recapitular aqui mais uma vez.
Temos o conteúdo interno que está aqui.
Nós temos o preenchimento que está entre as bordas, então tudo o que temos
é preenchimento para a esquerda e, então, temos uma margem que está entre a borda e do outro lado.
Então entre elementos basicamente.
Então, nos próximos vídeos, vamos aplicar esses conceitos e usá-los ao longo deste curso