1
00:00:00,840 --> 00:00:06,090
Portanto, um dos conceitos mais importantes que ainda temos para cobrir e avaliar é o posicionamento de elementos.

2
00:00:06,600 --> 00:00:10,290
Então, como colocamos uma página ou movemos uma div na parte superior direita.

3
00:00:10,410 --> 00:00:15,720
Ou como fazemos uma tag de âncora mais ampla ou adicionamos espaçamento entre as imagens.

4
00:00:15,780 --> 00:00:20,110
Tudo isso é realmente importante e está tudo relacionado a algo chamado o modelo de caixa.

5
00:00:20,220 --> 00:00:26,820
Então, o modelo de caixa é essa idéia básica que é realmente central para tudo em HD, você avalia

6
00:00:26,820 --> 00:00:31,190
qual é que, basicamente, cada elemento possui uma caixa retangular à sua volta.

7
00:00:31,680 --> 00:00:38,040
Então, podemos ver aqui apenas indo para qualquer página da Web no MDA e eu tenho o inspetor aberto e

8
00:00:38,040 --> 00:00:39,620
eu tenho a lupa selecionada.

9
00:00:40,010 --> 00:00:44,810
E enquanto folhei sobre cada elemento, você pode ver que há uma caixa ao redor.

10
00:00:44,910 --> 00:00:48,180
Então, este H2 tem uma caixa azul à sua volta.

11
00:00:48,180 --> 00:00:49,810
Este tem uma caixa.

12
00:00:50,130 --> 00:00:53,370
Mesmo coisas que não são particularmente atraentes.

13
00:00:53,490 --> 00:00:56,320
Então, esta esquina arredondada div. Ainda tem uma caixa ao redor.

14
00:00:56,490 --> 00:00:58,080
Por trás das cenas.

15
00:00:58,080 --> 00:00:59,310
Então, isso aqui e

16
00:00:59,520 --> 00:01:05,790
este não é realmente redondo ou não boxy procurando ter esses cantos arredondados, mas ainda é uma caixa.

17
00:01:05,820 --> 00:01:09,130
Então, essas caixas são realmente úteis nos bastidores porque podemos criar diferentes propriedades nelas.

18
00:01:09,240 --> 00:01:14,940
Portanto, existem quatro propriedades ou quatro partes diferentes de cada caixa.

19
00:01:15,870 --> 00:01:19,350
Há muito mais propriedades, mas para partes da caixa que podemos manipular.

20
00:01:19,350 --> 00:01:23,550
Então vamos supor que este diagrama que também é do MDA e é um parágrafo.

21
00:01:23,610 --> 00:01:29,790
Então eu tenho um texto em um parágrafo e eu dou uma laranja ou uma borda amarela e isso é o

22
00:01:29,790 --> 00:01:35,010
que o usuário vê algum texto e uma borda, mas, nos bastidores, há algumas outras coisas acontecendo.

23
00:01:35,010 --> 00:01:42,210
Então, entre a borda e o texto, há algo chamado de preenchimento.

24
00:01:42,360 --> 00:01:47,920
Então, o preenchimento é apenas o espaço no interior da borda.

25
00:01:48,000 --> 00:01:51,040
Então, entre o conteúdo e a borda é preenchimento e, em

26
00:01:51,190 --> 00:01:56,730
seguida, há margem que está do outro lado, está entre a borda do lado de fora e qualquer outra coisa.

27
00:01:56,730 --> 00:02:01,060
Então usamos a margem frequentemente para adicionar espaçamento entre elementos.

28
00:02:01,170 --> 00:02:04,720
Então, se tivéssemos dois parágrafos e eu queria

29
00:02:04,860 --> 00:02:10,470
que eles estivessem mais separados, então eu usaria margem e aumentaria isso.

30
00:02:10,470 --> 00:02:11,340
Então, agora vamos fazer

31
00:02:11,880 --> 00:02:16,380
um mergulho profundo na verdade, a sintaxe de algumas das propriedades que queremos usar antes de fazer isso.

32
00:02:16,380 --> 00:02:18,700
agora temos uma maneira de fazer algo parecido com isso.

33
00:02:18,720 --> 00:02:24,000
Quero mostrar-lhe duas coisas que você pode esperar para fazer o primeiro dos mais excitantes, mas o que é importante é que

34
00:02:24,330 --> 00:02:29,870
Até agora, na verdade, na verdade, não temos como fazer essas caixas que estão conectadas uma

35
00:02:29,880 --> 00:02:34,500
à outra, com um atribuído a elas, mas estão vazias, não há texto dentro.

36
00:02:34,500 --> 00:02:39,330
Então, vamos aprender sobre o modelo de caixa e aplicar isso aqui para

37
00:02:39,330 --> 00:02:46,260
fazer este tic tac toe board e então vamos fazer esse site de portfólio para um fotógrafo de ficção.

38
00:02:46,260 --> 00:02:50,830
Então isso é legal.

39
00:02:51,450 --> 00:02:52,350
As imagens são sensíveis, portanto, altera o tamanho, altera o tamanho da janela e a grade.

40
00:02:52,420 --> 00:03:00,690
Tudo isso é baseado nos conceitos que você vai aprender aqui.

41
00:03:00,750 --> 00:03:04,270
Então eu vou continuar e abrir aqui sublime.

42
00:03:04,710 --> 00:03:07,020
E eu tenho um documento realmente simples que criei.

43
00:03:07,560 --> 00:03:10,510
Então, é apenas HTML simples.

44
00:03:10,740 --> 00:03:12,600
Tem uma folha de estilo conectada.

45
00:03:12,660 --> 00:03:14,670
Está vazio.

46
00:03:14,700 --> 00:03:15,330
Além de alguns comentários e depois de dois parágrafos.

47
00:03:15,330 --> 00:03:18,930
Então, se eu abrir isso, pode ver que

48
00:03:18,930 --> 00:03:25,620
é muito básico e chato e vamos usar isso para brincar com o modelo de caixa.

49
00:03:25,620 --> 00:03:27,660
Então eu vou para o

50
00:03:28,860 --> 00:03:35,910
meu sucesso e vou selecionar parágrafos e então vou copiar esses comentários para dentro, para que eu

51
00:03:35,910 --> 00:03:41,940
possa escrever algum código abaixo deles apenas para lhe dizer o que estou fazendo.

52
00:03:41,940 --> 00:03:43,370
Então, comecemos por dar a essas uma fronteira.

53
00:03:43,380 --> 00:03:45,740
Então, isso deve ser revisar a borda

54
00:03:45,900 --> 00:03:54,450
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.

55
00:03:54,450 --> 00:03:57,630
E o que você também percebeu é que o conteúdo aqui vai todo o caminho pela tela.

56
00:03:57,630 --> 00:04:02,360
parágrafo por padrão, vai todo o caminho pela tela.

57
00:04:02,370 --> 00:04:08,460
Nossa fronteira não pára aqui e é porque, quando fazemos um

58
00:04:08,460 --> 00:04:09,620
Então, se eu

59
00:04:09,630 --> 00:04:20,210
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.

60
00:04:20,220 --> 00:04:23,260
Vamos fazer 200 pixels para começar.

61
00:04:23,490 --> 00:04:25,390
E se eu atualizar, você pode ver que agora mudamos a largura.

62
00:04:25,890 --> 00:04:29,190
Se eu inspecionar o conteúdo não é azul.

63
00:04:29,190 --> 00:04:34,920
E então temos uma borda ao redor.

64
00:04:35,940 --> 00:04:37,840
Então, o conteúdo é azul.

65
00:04:38,310 --> 00:04:39,700
E neste diagrama que é esta caixa aqui esta caixa de elemento.

66
00:04:40,110 --> 00:04:45,350
E então temos uma borda que está diretamente em torno dela.

67
00:04:45,630 --> 00:04:48,330
Não há espaço entre a borda eo conteúdo.

68
00:04:48,330 --> 00:04:52,020
Uma outra coisa com a largura e também há uma altura.

69
00:04:52,020 --> 00:04:56,920
Então, vamos fazer uma altura de 300 pixels e veremos que acabamos de adicionar um monte de espaço.

70
00:04:57,060 --> 00:05:02,360
Eu vou me livrar disso, mas há uma altura que podemos usar exatamente como.

71
00:05:02,370 --> 00:05:06,620
Não precisamos apenas usar pixels para que possamos usar porcentagens.

72
00:05:06,930 --> 00:05:11,760
E esses são realmente úteis, então deixe-me mostrar-lhe.

73
00:05:13,890 --> 00:05:15,780
Vamos fazer 50 por cento e você pode estar se perguntando sobre o que é 50 por cento.

74
00:05:15,810 --> 00:05:23,310
E a resposta é que é 50% do elemento pai.

75
00:05:23,310 --> 00:05:27,290
Então, neste caso, é o corpo que

76
00:05:27,300 --> 00:05:34,230
o parágrafo está dentro do parágrafo vai na metade do corpo.

77
00:05:34,230 --> 00:05:35,240
No nosso caso, o corpo é a página inteira.

78
00:05:35,310 --> 00:05:37,390
Foi todo o caminho.

79
00:05:37,410 --> 00:05:38,240
Então terminamos com a metade da página.

80
00:05:38,250 --> 00:05:40,620
para usar nesta grade de imagem.

81
00:05:40,800 --> 00:05:51,870
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

82
00:05:51,900 --> 00:05:54,890
Você pode ver que as imagens mudam sua largura e essa é uma porcentagem.

83
00:05:55,280 --> 00:05:59,490
OK, então eu vou ficar assim por enquanto.

84
00:06:00,040 --> 00:06:04,590
E então a próxima propriedade sobre a qual vamos falar é preencher

85
00:06:04,770 --> 00:06:10,080
e lembrar o preenchimento é esse espaço entre o elemento e a borda.

86
00:06:10,080 --> 00:06:11,600
E agora não temos nenhum espaço para as fronteiras em cima.

87
00:06:11,750 --> 00:06:15,410
Então, existe uma propriedade chamada preenchimento e podemos

88
00:06:15,840 --> 00:06:21,570
dar uma série de pixels e vamos fazer 10 pixels para começar.

89
00:06:21,570 --> 00:06:22,120
Salve a atualização do arquivo.

90
00:06:22,230 --> 00:06:25,130
E agora temos 10 pixels de preenchimento em todos os lados.

91
00:06:25,410 --> 00:06:28,700
Então, se eu inspecionar agora, você verá que existe

92
00:06:29,040 --> 00:06:36,660
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

93
00:06:37,080 --> 00:06:45,390
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.

94
00:06:45,380 --> 00:06:49,760
Mas esta não é a única maneira de configurar o preenchimento.

95
00:06:50,490 --> 00:06:52,890
Isso ajusta isso em todos os quatro lados exatamente como o mesmo.

96
00:06:52,920 --> 00:06:57,250
Mas às vezes só queremos preencher de um lado ou de outro lado, como com a borda.

97
00:06:57,380 --> 00:07:01,760
Há cortes curtos para a versão mais longa, onde é um limite superior de 10 pixels de borda cinco pixels.

98
00:07:01,800 --> 00:07:09,510
A mesma coisa com estofamento e comentar isso e

99
00:07:09,900 --> 00:07:17,940
podemos fazer algo como preenchimento deixado 40 pixels e fresco.

100
00:07:19,440 --> 00:07:20,270
E nós recebemos estofamento aqui.

101
00:07:20,520 --> 00:07:22,090
E esse é o único lugar para preenchimento é.

102
00:07:22,320 --> 00:07:24,250
E eu lembro do espaço por

103
00:07:24,330 --> 00:07:29,640
aqui, este azul não é o preenchimento que é seu conteúdo atual, que é com isso aqui.

104
00:07:29,630 --> 00:07:30,830
Tão diferente, embora pareça que há espaço à direita.

105
00:07:30,990 --> 00:07:33,610
Vem de um lugar diferente.

106
00:07:33,620 --> 00:07:35,930
Então, outra coisa que podemos fazer aqui é jogar com a margem.

107
00:07:37,170 --> 00:07:40,920
Então, a margem é uma última peça do quebra-cabeça.

108
00:07:41,160 --> 00:07:43,780
É o espaço na parte externa da fronteira.

109
00:07:43,860 --> 00:07:45,900
Então entre elementos.

110
00:07:45,900 --> 00:07:47,980
Então, isso será útil, porque podemos querer

111
00:07:48,450 --> 00:07:54,620
incrementar ou aumentar este espaço aqui ou, como exemplo, aqui neste espaço, aqui, entre as imagens, é configurado usando o Marjan.

112
00:07:54,620 --> 00:08:01,280
dizer margem e vamos fazer algo óbvio como 100 pixels para começar e atualizar.

113
00:08:01,500 --> 00:08:07,090
Então, ele realmente se parece com o preenchimento para que possamos

114
00:08:07,110 --> 00:08:10,240
E o que aconteceu é que agora temos

115
00:08:10,410 --> 00:08:15,810
100 pixels de espaço em todos os lados do elemento na parte externa da borda.

116
00:08:15,810 --> 00:08:17,100
Então, procure um aspecto.

117
00:08:18,240 --> 00:08:19,360
Você verá isso

118
00:08:19,980 --> 00:08:26,910
no Chrome que é identificado como laranja, então o azul é o conteúdo Verde é o preenchimento em Orange é a margem.

119
00:08:27,000 --> 00:08:28,710
Assim como o preenchimento.

120
00:08:28,800 --> 00:08:30,030
é de 500 pixels.

121
00:08:30,030 --> 00:08:36,050
Às vezes, só queremos definir uma parte da margem de um lado para que possamos fazer algo como a margem superior

122
00:08:36,690 --> 00:08:38,890
E então, quando eles vêm a

123
00:08:38,900 --> 00:08:45,000
este por agora e economizam e nós só ganhamos espaço no topo à esquerda, não há nada.

124
00:08:45,000 --> 00:08:46,070
E, em seguida, mais espaço no topo desta.

125
00:08:46,160 --> 00:08:48,180
Nada na parte inferior ou esquerda ou direita.

126
00:08:48,170 --> 00:08:50,480
Então, isso é margem.

127
00:08:50,610 --> 00:08:52,710
Então, às vezes, nós adicionamos valores

128
00:08:52,710 --> 00:08:58,500
a todos os lados da margem, mas não queremos fazer isso com quatro linhas diferentes.

129
00:08:58,500 --> 00:08:59,510
Então, não queremos que eles

130
00:08:59,660 --> 00:09:04,110
sejam exatamente os mesmos se eles estiverem aqui, mas não todos temos que dizer margem margem superior margem esquerda margem direita inferior.

131
00:09:04,200 --> 00:09:06,500
Então, há outro atalho exatamente como para a fronteira.

132
00:09:06,570 --> 00:09:09,550
Ou podemos fazer as coisas ao mesmo tempo, podemos fazer essa margem e dar quatro valores.

133
00:09:09,570 --> 00:09:14,780
Então, o primeiro é para o topo e depois para a direita e depois para o fundo.

134
00:09:14,820 --> 00:09:21,300
Vamos fazer 500 pixels e, depois, à esquerda e fazendo isso, obtemos

135
00:09:21,750 --> 00:09:24,330
esta agradável margem de quatro

136
00:09:27,570 --> 00:09:35,550
lados, onde os valores são todos diferentes, mas só precisamos fazer em uma linha.

137
00:09:35,550 --> 00:09:36,820
Então, apenas para inspecionar isso

138
00:09:37,290 --> 00:09:44,190
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.

139
00:09:44,180 --> 00:09:49,920
Então, há uma última coisa que você verá com margem com margem.

140
00:09:50,010 --> 00:09:53,790
Auto.

141
00:09:53,790 --> 00:09:54,480
Então, o que podemos fazer é definir a margem como auto na esquerda ou na direita.

142
00:09:54,780 --> 00:09:59,340
E o que isso fará é realmente Centrar um elemento para nós.

143
00:09:59,370 --> 00:10:02,550
Então, deixe-me mostrar-lhe como isso funciona.

144
00:10:02,550 --> 00:10:04,570
parte inferior e automática à esquerda.

145
00:10:04,710 --> 00:10:12,870
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

146
00:10:12,870 --> 00:10:18,390
E se eu fizer este tamanho completo e atualizar, você verá que ele concentra coisas para nós.

147
00:10:18,510 --> 00:10:23,520
Então, o que isso significa que ele decidiu que isso é 50

148
00:10:23,520 --> 00:10:30,740
por cento porque dissemos que, aqui e depois, descobre que a esquerda é auto e a direita é

149
00:10:30,750 --> 00:10:36,810
auto assim que faz tanto quanto precisa fazer e isso realmente irá centrá-la para nós.

150
00:10:36,810 --> 00:10:37,880
E então temos zero na parte superior e inferior para que eles sejam arranhados juntos.

151
00:10:37,980 --> 00:10:41,540
O que também podemos fazer existe uma maneira ainda mais curta de fazer isso e parece que esta margem zero Otto.

152
00:10:41,930 --> 00:10:47,940
E assim isso irá definir a parte superior e inferior para zero, a esquerda e a direita para auto.

153
00:10:48,540 --> 00:10:53,470
Então, nada muda e também podemos usar essa sintaxe se quiser

154
00:10:53,580 --> 00:11:01,380
adicionar 50 pixels na parte superior e automática ou eu quero adicionar 50 pixels e 20 pixels.

155
00:11:01,380 --> 00:11:04,700
A única coisa a lembrar é que você precisa do x a menos que o número seja zero.

156
00:11:04,740 --> 00:11:09,830
Então, se eu fizer isso, adiciona 20 no topo à esquerda e à direita e depois adiciona 50 na parte superior e inferior.

157
00:11:10,430 --> 00:11:17,720
Então vamos recapitular aqui mais uma vez.

158
00:11:18,780 --> 00:11:21,070
Temos o conteúdo interno que está aqui.

159
00:11:21,120 --> 00:11:25,370
Nós temos o preenchimento que está entre as bordas, então tudo o que temos

160
00:11:25,830 --> 00:11:31,290
é preenchimento para a esquerda e, então, temos uma margem que está entre a borda e do outro lado.

161
00:11:31,430 --> 00:11:33,440
Então entre elementos basicamente.

162
00:11:33,450 --> 00:11:35,530
Então, nos próximos vídeos, vamos aplicar esses conceitos e usá-los ao longo deste curso

163
00:11:35,610 --> 00:11:40,150