Então, uma das coisas que você deve ter notado como você está passando por outro
código é que às vezes quando você mexer com a altura e a largura de um elemento.
Você descobre que ele não é mais grande o suficiente para conter todo o texto que você
queria mostrar.
Então, o que você pode fazer quando o conteúdo não se encaixa mais
dentro da caixa que você criou com sua altura e largura.
Bem, você pode usar um estouro de propriedade para determinar como as pessoas serão
capazes de acessar esse conteúdo, ou se eles vão mesmo ser capazes de acessá-lo.
Os quatro valores para overflow,
incluem visible, o que basicamente significa se você desenhou uma caixa.
E há um monte de texto dentro dele,
o texto realmente vai sair da caixa.
Portanto, não importa o que, o conteúdo é visível mesmo que ele saia das linhas.
Oculto faz praticamente o oposto.
Ele diz, [SOM] se você tem algo dentro desta caixa e é muito grande,
ele se foi.
Você não pode vê-lo.
Agora isso não é uma boa idéia, porque vai causar problemas
se o usuário aumentar o tamanho da fonte em seu navegador.
Então, se você fez algum tipo de caixa de 600 por 800 pixels,
e você pensa, oh isso vai ser ótimo, não há problema.
Qualquer um será capaz de ler isso.
O que vai acontecer se alguém entrar e aumentar o tamanho da fonte?
Sua caixa não fica maior, mas o texto fica, portanto,
talvez não consigam ver o conteúdo.
Então, uma terceira opção é dar rolagem de estouro.
E o que isso vai fazer é realmente dar uma
barra de rolagem horizontal e vertical para o elemento.
Mesmo que seja apenas um parágrafo, de repente seu parágrafo tem uma barra de rolagem para que
as pessoas possam ver tudo o que está nele.
O valor final é auto, e o que ele faz é dizer, oh,
eu só vou adicionar barras de rolagem conforme necessário.
Dependendo de como a pessoa está visualizando o site agora.
Eu vou seguir em frente e
listar alguns recursos para mostrar alguns exemplos de como overflow parece.
Mas por agora, vamos seguir em frente e seguir em frente.
Porque o que eu queria compartilhar com vocês é essa idéia de outros valores de exibição.
Novamente, os navegadores estão sempre mudando.
HTML5 e versões futuras estão sempre mudando e
estão tentando adicionar novo suporte.
O problema é que quando você vê essas novas
ferramentas legais, elas nem sempre funcionam em todos os navegadores.
Então, inline, inline bloco, bloco e nenhum funcionará em todos os lugares.
Mas aqui estão mais alguns que estão lentamente começando a ganhar aceitação.
E esses são tabela, grade e flexbox.
Para grade e flexbox, vou deixar para você brincar com ele.
Mas eu queria mostrar a vocês um exemplo de onde muitos dos meus alunos acham a
exibição da mesa realmente útil.
Como uma exibição de tabela funciona é que você não cria uma tabela real com seu
código HTML, nem tem a tabela de tags.
Mas você está dizendo ao seu navegador que você quer estruturá-lo como se fosse uma tabela.
Então, você faria qualquer tipo de elemento contendo exibir:tabela.
E, em seguida, qualquer coisa que você deseja alinhar em colunas agradáveis,
você usaria display: table-cell.
Então isso soa muito confuso, então
eu queria ter certeza de que eu lhe dei um exemplo para seguir em frente comigo.
Então eu tenho aqui algum código que é basicamente apenas uma div,
um par de divs com alguns parágrafos nele.
E o que eu queria fazer era ter certeza de que eles não tinham
exatamente o mesmo conteúdo.
Como você pode ver, cada um dos divs está agora ao lado um do outro porque nós
dissemos que não queremos que eles fiquem debaixo um do outro.
Mas isso não é o que você esperava que fosse.
Então vamos em frente e tentar adicionar aquele flutuador à esquerda.
Save, vou continuar aqui e refrescar-me.
E você pode ver, parece um pouco melhor.
Então, isso é ótimo porque queríamos que tudo ficasse ao lado um do outro.
Mas o que vou fazer agora é mostrar-te uma coisa que não funciona
muito bem.
E essa é a ideia de quando eu o redimensiono.
Agora você pode ver esta idéia de que o transbordamento pode ser realmente importante porque
agora as coisas estão indo fora dos divs si mesmos.
Além disso, eu realmente não tenho nenhum tipo de margem entre eles.
Então vamos em frente e adicionar overflow, Hidden,
ou scroll, apenas para mostrar o que eu estava falando lá por um segundo.
Vou ir em frente e refrescá-lo.
E agora você pode ver que tudo está contido dentro da caixa de conteúdo, e
eu posso realmente entrar aqui e eu posso rolar cada um desses.
Na verdade, eu não sou um grande fã disso,
porque eu não gosto que as pessoas precisassem saber que eles podem rolar.
Então nós vamos tentar algo novo aqui, em vez disso o que eu vou fazer é definir
a largura para 30%, e eu vou ir em frente e usar o bloco inline-.
E vamos dar uma olhada no que isso parece agora.
Preciso lembrar que estou usando uma nova folha de estilos, então preciso entrar e
mudar meu HTML para que eu esteja usando essa folha de estilos.
O número de vezes quando eu estava chegando com esses exemplos para você onde eu esqueci de
mudar a folha de estilo, ou eu esqueci e nomeei errado foi realmente embaraçoso.
Espero que evite os mesmos problemas que eu tive.
Por aqui, vou refrescá-lo.
Você pode ver que este não é o olhar que estamos esperando.
Ele redimensiona, mas não está fazendo o que queremos porque cada um tem sua
própria altura, porque nós realmente queremos que ele se encaixe nisso.
É aqui que entra a célula da mesa.
Vou mudar meu display de bloco embutido para célula de mesa.
E pela primeira vez, quando eu for atualizar,
eu vou realmente saber por que isso não funciona.
Mas eu quero mostrar a vocês, quando eu apertar Refresh, parece realmente bem
aqui, porque ele fez com que tudo dê certo.
Agora, dependendo do navegador em que você está, isso pode não funcionar.
Porque o que você realmente quer dizer é, se eu vou ir em frente e
fazer esta célula de mesa usada, não se esqueça de ir para o seu corpo e dizer exibição.
Tudo bem e eu vou atualizar e vai parecer o mesmo,
só vai ser um melhor estilo de codificação.
Agora, eu vou tentar colocar um monte de exemplos de codificação aqui,
neste curso CSS, para que você possa brincar com ele.
Mas, eu não posso enfatizar o suficiente que, às vezes não vai funcionar exatamente o mesmo
para você, porque você pode estar usando um navegador diferente.
Você pode estar usando o mesmo navegador, mas uma versão diferente.
O mais importante é você entrar lá,
e continuar tentando esses novos valores, ver o que acontece e brincar com ele.
Quando chega a hora do seu projeto final, é quando deve ser realmente específico para
garantir que tudo fique bem em todos os navegadores.
A última coisa que quero mencionar muito rapidamente foi essa ideia de visibilidade.
E especifica se um elemento vai ou não ser visto por um usuário.
Agora nós conversamos sobre isso mais cedo quando eu falei sobre exibir nenhum, mas
o que acontece na visibilidade é que você pode realmente ver que espaço foi deixado para ele.
Não há nada lá.
Portanto, quando você usa a visibilidade, as opções ficam visíveis, ocultas ou
recolhidas se você estiver usando tabelas.
Se você vir isso e você está se perguntando qual é a diferença entre exibição e
visibilidade.
Basta lembrar que com a exibição de nenhum
o navegador age como se ele não estivesse lá.
Você não vê nada.
Com a visibilidade escondida, o navegador vai deixar o espaço
que esse elemento ocuparia, ele simplesmente não mostra.
Então, finalmente, vamos em frente e rever.
Display é apenas uma das muitas ferramentas que vamos usar para
posicionar os elementos em sua página. O
design inicial, decidir como você deseja que sua página se pareça antes de começar a codificar,
vai tornar as coisas mais fáceis.
Não pense em código que eu quero usar o design direito flutuante, e então decidir oh,
eu vou ter que usar float bem aqui.
Utilize todas as diferentes ferramentas que temos,
como inspecionar elemento, para ver suas diferentes opções.
E vai tornar a tua vida de codificação muito mais fácil.
Queremos evitar salvar atualização, salvar atualização.
Em vez disso, use essas ferramentas e
você descobrirá que você está tomando decisões realmente boas em seu design e seu código.
Obrigado.