Oi, hoje vamos falar sobre Exibição e Visibilidade em sua página da Web.
Agora, quando se trata de fazer a sua página, uma e outra vez eu vou dizer-lhe
que colocar para fora onde você quer que as coisas sejam é a chave para uma página realmente eficaz.
E uma das coisas que você precisa lembrar é que cada elemento que olhamos é
basicamente uma caixa.
E o modelo da caixa é algo que vamos cobrir em uma futura palestra.
Mas antes de chegarmos aos detalhes, só quero falar sobre alguns detalhes.
Porque como a exibição no elemento de exibição funciona afeta todos os
elementos vizinhos em sua página.
Antes de começarmos, quero lembrar-te que cada elemento da tua página é uma caixa.
Pense assim.
E a exibição é como você pode decidir se as caixas devem estar próximas umas das outras,
debaixo das outras, e coisas diferentes como essa.
Então, quando falamos sobre exibição,
há alguns valores comuns que praticamente todos usam ou
eles são apenas um padrão, então você tem usado isso sem sequer saber.
Elementos que estão em linha sentar-se-ão ao lado de outros elementos, eles ocupam
apenas largura e altura suficientes e não mais, quando você está colocando-os na página.
Então, eu meio que penso nisso como meus bons filhos nos elementos da minivan.
Tudo bem se eu quiser colocar três crianças no banco de trás.
Eles não vão cotovelar um ao outro, eles estão bem.
Eles vão se dar bem.
O outro tipo de exibição é bloco.
E o que o bloco faz é forçar uma quebra de linha entre seus elementos.
Então, novamente, com o meu exemplo,
eu tenho um garoto que realmente não pode sentar ao lado de mais ninguém.
Eu tenho que colocá-los em sua própria fila.
Mesmo que ela seja muito pequena e não ocupe tanto espaço,
ela tem uma fila inteira só para si quando estamos dirigindo no carro.
O que é bom sobre elementos
de bloco é, enquanto eles ocupam toda a largura horizontal e apenas altura suficiente,
você pode entrar e você pode definir uma altura e uma largura sobre esses elementos.
Então, mesmo que seja um bloco, e
você tenha reservado toda a largura da página, você pode dizer, mas
eu realmente só quero que seja 40 pixels, ou metade da página, ou algo assim.
Então, com inline, ele ocupa apenas espaço suficiente, e você não é capaz de mudar isso.
Você não pode dizer, eu quero que seja maior ou menor.
Se estiver em linha, é tudo o que conseguirá.
Com o bloco você tem um pouco mais de flexibilidade, mas
você tem o problema de que você está reservando um monte de espaço.
Então, é claro,
o que nós tivemos é essa idéia de algo que leva o melhor de ambos.
E isso é inline-block.
Elementos que têm display inline-block vai ser o mesmo que inline e
que eles podem estar ao lado do outro, mas eles também vão aceitar altura e largura.
Então, se você tem duas coisas que querem estar ao lado do outro, mas
você quer dar a eles um monte de espaço, e agora eles estão em linha.
Bem, vá em frente, mude para inline-block, e
então você pode dar-lhe uma altura e uma largura.
E se você tem algo que está bloqueado e
você quer dois deles ao lado de cada um, novamente, não há problema.
Altere-os para inline-block e você pode definir a largura e altura.
O quarto que nós realmente não usamos tanto é a idéia de exibir nenhum.
E o que acontece aqui é que se você tem um elemento em sua página e
você dá a ele exibir nenhum, é como se o navegador ignorasse completamente que ele existe.
É como se tivesse levantado e tirado da página.
Então esses quatro, o inline, o bloco, o bloco inline-block e
o nenhum são os que realmente vamos começar a jogar no início.
Então o que eu tenho aqui é apenas um arquivo simples que vai ter
três elementos span, três elementos div e três elementos de parágrafo.
Se você se lembra, elementos span são inline, então
eles só vão ocupar o espaço que precisarem.
Mas os divs e os parágrafos são bloqueados, por isso
vão ocupar mais espaço.
Do lado aqui, o que eu fiz foi adicionar um pouco de estilo, o
que pode ou não fazer sentido quando falamos sobre isso pela primeira vez, mas
eu dei a cada um dos meus vãos uma altura e uma largura.
Basicamente, todos os meus elementos, uma altura e largura e uma cor de fundo diferente.
Então, se vamos olhar para ele agora mesmo.
Você veria que eu fiz todas as minhas extensões verdes, todas as minhas divs azul, e
todos os meus parágrafos uma espécie de cor roxa rosada.
E cada um estabelece exatamente por padrão como seria.
A razão pela qual os divs são tão grandes quanto eles são e
os parágrafos são tão grandes quanto eles são é, novamente nós colocamos isso em nossa folha de estilo.
Você pode ver minha altura e minha largura.
Se eu não incluísse estes por padrão, esses divs e
parágrafos ocupariam toda a largura da tela, e
eles seriam realmente pequenos porque eles só precisariam de espaço suficiente para ter esse texto.
Então vamos em frente e brincar com isso.
Normalmente, eu iria para a minha folha de estilo e eu meio que
colocar coisas diferentes em, experimentar diferentes exibições e coisas diferentes como essa.
Mas espero que seja um pouco mais claro para
você se eu fizer isso ao mesmo tempo.
Então você pode acompanhar comigo com o que é inspecionar elemento, ou você
pode ir em frente e alterar o código em seu arquivo, salvá-lo, atualizá-lo, salvá-lo, atualizar.
Então eu tenho que inspecionar elemento aqui clicando com o botão direito do mouse, e
o que eu vou fazer agora é clicar com o botão direito do mouse em um desses elementos span.
Inspecione Element e ele aparece para mim.
Qualquer elemento em sua página,
você pode brincar com, você pode jogar com apenas aquele elemento
em particular que você está cutucando bem ali ou eu posso dizer que eu quero jogar com todos os vãos.
Então vamos olhar aqui em baixo.
Neste momento, eu tenho uma altura e uma largura para cada um dos meus elementos de extensão.
Mas eles não são realmente muito grandes.
Então, como mudamos isso?
Se algo estiver inline, mas você quiser dar uma altura e uma largura,
descemos para exibir, e eu vou aqui.
E vou tentar o bloqueio inline-block.
Boom, imediatamente meus vãos tomaram essas propriedades.
Então, antes de quando estavam em linha, eles eram pequenos.
Quando eles são bloco inline, eu posso moldá-los muito bem.
E se eu estou mudando eles para apenas bloquear, Você pode ver agora eles estão em
cima um do outro porque os elementos de bloco não gostam de estar ao lado um do outro.
A última propriedade que vou te mostrar aqui é essa ideia de nenhuma.
Quando você não tem nenhum, é como se os vãos não existissem.
Você não economizou espaço para eles,
não é como se você sequer soubesse olhando para a página que eles estavam lá.
Uma coisa interessante para fazer e você pode usá-lo mais tarde se você quiser que as coisas
apareçam algumas vezes e não outras, mas você não quer deixar um grande espaço em branco.
Então, vá em frente e tire um segundo e
eu vou apenas clicar em algumas das outras coisas.
Então, por exemplo, minhas divs, eu posso ir e eu posso dizer, você sabe o que, eu quero fazer apenas
este div, eu quero ir em frente e torná-lo inline-block, e vamos ver o que acontece.
Bem, o estranho é que eu mudei e nada aconteceu de verdade e
estou pensando se você sabe o porquê.
Quando você tem inline-block, você está dizendo oh, vá em frente e
me coloque ao lado de outras pessoas se eu encaixar.
Mas se seus vizinhos também estão bloqueados, não vai funcionar.
Então, agora, em vez de mudar apenas um, vou mudar todos os divs.
E você pode ver que, oh, porque eles são cerca de 45%,
dois deles se encaixam em seguida, mas o último não.
Portanto, não há realmente uma boa maneira de se sentir confortável com a tela
até que você pegue esse código e comece a mudar as coisas.
O que acontece se estiver em linha?
O que acontece se for inline-block?
O que acontece se for longo?
E preste muita atenção ao fato de que não é suficiente saber o que
é a tela para o único elemento em que você está trabalhando,
você também precisa conhecer a exibição para seus vizinhos.
Mas vamos conversar um pouco mais.
Quando estamos falando de exibição,
é muito comum também falar sobre duas outras propriedades também.
E estes são chamados flutuar e claro.
E o que float e claro fazer é que eles não necessariamente dizem onde você quer que a página
seja, o elemento em sua página para ser especificamente, mas
onde você geralmente deseja colocá-la.
Por padrão, quando o navegador está colocando coisas na página,
ele começa no canto superior esquerdo.
E começa a colocá-los, então olhando para o seu site, seria como primeira
coisa, primeira coisa, oh, a próxima é bloquear então é melhor eu colocá-lo por baixo.
E continua adicionando coisas.
Então, se o seu navegador é realmente grande, você pode ajustar mais elementos de extensão um ao lado do outro,
se for pequeno, você pode caber menos.
Bem float permite que você realmente reposicionar as coisas, e
ele diz hey eu quero que você tipo de flutuar isso em qualquer lugar,
e se eu disser flutuar direito, eu quero que você colocá-lo o mais longe para a direita que você pode.
Se eu disser flutuar à esquerda, quero que o coloque o mais à esquerda que puder.
Os outros elementos estão basicamente cientes um do outro, e quando você usa flutuador,
eles não se sobrepõem, mas as coisas vão parecer um pouco loucas.
E quando você adiciona flutuação novamente, você está afetando seus vizinhos
porque seus vizinhos precisam saber para onde você está indo.
É por isso que temos esta propriedade adicional chamada clara.
Porque às vezes, quando você está codificando, você só quer ter certeza de que as coisas não estão
flutuando para a esquerda ou para a direita.
Você quer realmente ter esse espaço todo para você,
caso em que você pode usar clara esquerda, clara direita, ou limpar ambos.
Limpar à esquerda para ter certeza de que não há nada flutuando para você à esquerda.
Direita clara significa que não há nada flutuando para você à direita.
E limpe ambos, bem como você pode imaginar,
significa que nada deve estar flutuando ao seu lado em tudo.
Então vamos em frente e dar outra olhada em mais um exemplo onde eu vou
jogar com o mesmo código, mas eu vou começar a usar float e clear também.
Então nós vamos olhar para o mesmo arquivo exato que estávamos apenas olhando
quando eu estava jogando com bloco de exibição, inline, nenhum, etc
Mas agora, nós vamos jogar float e limpar na mistura também.
Então aqui está o código que estamos olhando, e aqui está o site.
E a primeira coisa que vou fazer é brincar com os vãos aqui em cima e
tentar flutuá-los.
Então lembre-se, quando você flutua algo, você está basicamente dizendo
para colocá-lo o mais longe possível e os outros elementos estão quase indo para agir como se
eles não estivessem lá, mas eles não vão se sobrepor.
Então eu vou descer aqui, ir para o meu carro alegórico.
Diga flutuador.
Agora, a primeira coisa que vou fazer é flutuar para a esquerda, o
que significa que eles não vão se mover muito.
O que eu quero que você procure
é que neste momento, há um pouco de espaço entre cada um dos meus vãos.
Quando eu mudo para a esquerda, esse espaço vai embora e
a div realmente vai embaixo dele também, porque os vãos estão no topo.
Agora, quando eu tento mudá-lo e flutuá-lo direito.
Quando eu flutuar direito, quero que você perceba que eles não só não têm
espaço entre eles, como eles estão meio ao lado um do outro novamente.
Mas se você olhar, a ordem dos A, B e C são diferentes.
Porque os primeiros elementos que ele é colocado na página é span A e
assim ele move o mais longe para a direita que ele pode.
E então, quando ele está fazendo a extensão B, ele está se movendo o mais longe possível para a direita, e
abranger C também.
Então isso é algo interessante,
e você pode ver que se eles estivessem à esquerda, as divs se sobrepõem a eles.
Tudo bem, então vamos em frente e fazer mais algumas dessas coisas.
E eu vou fazer uma mudança todos os meus divs, de modo que eles também são.
Vamos aqui, flutuar à esquerda.
Então agora a página está parecendo meio louca porque as coisas estão indo por todo
o lado e você realmente, você provavelmente não quer que ela pareça assim.
Particularmente se quiséssemos que todos os nossos parágrafos estivessem realmente na parte inferior
da página.
Então eu vou até aqui para os meus parágrafos.
E eu vou em frente e eu vou dizer, eu não vou flutuar estes.
Em vez disso, vou dizer que cansei de flutuar,
por favor, pare de flutuar coisas ao meu redor.
E vou limpar os dois lados.
Então os parágrafos agora estão dizendo, me afaste de toda essa loucura flutuante.
Só quero estar aqui em baixo.
Flutuando, limpando, coisas diferentes como esta.
Quando fazemos esses exemplos de código realmente simples na palestra,
eles nem sempre vão fazer tanto sentido como quando você está colocando-os como
parte de algo maior.
Mas o problema é que eu não posso mostrar exemplos de algo maior porque
todos vocês adormeceriam cerca de três ou quatro minutos dentro do código.
Então vá em frente, faça o que sempre fizemos e
brinque com eles um pouco até você ter a idéia do que eles fazem. Com
o passar do tempo,
você vai começar a descobrir quando você quer que eles realmente façam esse tipo de ações.