OS TIPOS DE DISPLAY DOS ELEMENTOS - HTML E CSS

Vou ligar a beleza é o seguinte rapaziada na hora de hoje vou estar mostrando para vocês aí é o que é o display né e cara ele é essencial para a gente poder entender o display Flex box e usar o fluxbox da melhor forma possível cara entendendo isso entendendo Xbox você vai poder construir qualquer página HTML e CSS com muita facilidade Beleza então entender tipo de display aqui é essencial Tá bom então vamos começar aqui sem enrolação é a cara todo elemento HTML toda a tag HTML ele tem display padrão dependendo do tipo da tag

né ela pode ser display Block ou de play ou seja toda a tag HTML ela vai ter um time padrão ela vai ser diz Playboy ou display-inline tá bom vamos começar com as características do display Block cara o display Block Ele sempre vai iniciar em uma nova linha tá um elemento é de playboy que ele sempre vai iniciar uma nova linha eu vou mostrar isso para vocês aqui na prática beleza o display Block estamos sempre vai ocupar toda a largura disponível cara alguns exemplos de tag né de elementos Condes Playboy que nós temos a div

que é um display Block ou nós temos também até de U L ela é display board a tag lhe falar é um display board nós temos também tag Nav e nós temos hoje o footer cara entre outros está o Réver também é display blog tá mu display desses elementos aqui dessas tags aqui por padrão é de playboy beleza é vamos sair que horas para vocês em relação à que eu disse que um display Block sempre vai iniciar uma nova linha e ele sempre vai ocupar toda a largura disponível vou colocar o estágio aqui mesmo eu

não vou colocar o estágio de fora não para vocês poderem ver nesse exemplo aqui eu vou dar exemplo usando assim mesmo tá então a gente dentro do estádio aqui a gente vai colocar div a gente vai fazer o seguinte vou colocar aqui um background color red para a gente poder ver tá E vou colocar aqui algum controle aqui dentro vou colocar um oi por exemplo a gente vou salvar aqui Vou atualizar a página olha só primeira coisa que a gente pode ver e ele vai ocupar toda a largura disponível vocês podem notar aqui que eu

não tenho Claro nenhuma largura para ele tá eu não declarei largura para ir ele tá ocupando toda a largura disponível Qual foi a outra característica que eu falei ele vai sempre me ser uma hora valia então se eu copiar essa esse esse código e colar aqui embaixo salvar e atualizar Olha o que acontece ele inicia em uma nova linha tá vendo Então um display um elemento que tem de playboy Ele sempre vai ocupar toda a largura disponível e sempre vai iniciar em uma nova linha Tá então vamos lá uma outra particularidade agora do display blog

a gente pode definir uma largura para ele ele não precisa ocupar toda a largura disponível a gente pode declarar por exemplo eu posso falar que ele vai ter uma largura de 100 pixels e eu também posso falar para ele que ele vai ter uma altura de por exemplo tem fixos que a gente vai fazer um quadrado perfeito né você quadrado na verdade é perfeito A gente vai fazer um quadrado no caso e vamos salvar aqui para vocês verem Vou atualizar Olha eu que e é largura assim pics altura em pixels tá esse daqui também altura

simples agora sem fixo vocês podem ver que eu consigo fazer essas colocar essas características eu consigo colocar por exemplo um prédio Eu quero um pé de dez Picos em cima embaixo na esquerda na direita cês podem ver que o texto aqui ó salvei agora vou atualizar vocês podem ver agora que o texto aqui ele foi um pouquinho mais pro canto aqui pro lado por causa do prédio eu tô no mundo de playboy Eu também consigo acrescentar o peche Tabom e repara Ele sempre vai iniciar numa nova linha então eu posso colocar por exemplo um outro

elemento aqui um colocar uma set long e tá com uma largura de 100 pixels ela tá com altura de 100 pizza porque a 71 também é por padrão um de playboy Beleza agora vamos para o display online Beleza agora vamos falar sobre os elementos HTML tags HTML que tem por padrão o display inline né cara vamos primeiro dizer as características algumas características do display inline diferente do display blog o display inline ele não inicia é uma linha ele nunca vai fazer isso daqui ó eu colocar um colocar o outro embaixo outra tag aqui embaixo ele

vai iniciar na nova linha colocar uma outra telinha lá embaixo ele vai iniciar uma navalha não o spray lá e não inicia uma nova linda e sempre vai ficar na mesma linha tá bom e ele vai pegar somente a largura necessária tá o display Block ele pega toda a largura se a gente não definir aqui por exemplo vou tirar das Action Weed Ou seja a largura vou descer vou tirar Vou salvar e vou atualizar ou seja ele vai pegar toda a largura os playboy o display não ele vai pegar somente a largura Ah tá bom

é cara alguns exemplos de tag que seja display-inline tem o spam é uma tag online opa span né tem o MG que a imagem temos o o batom também é um display inline Opa temos o disco temos um input input também é um display inline tá esse aqui se um alimento é online vamos ver eles aqui vamos salvar que vão colocar aqui primeiro um conteúdo Oi irmã eu vou escrever aqui spam não imagina vou colocar nada não vou botar não botar aqui é botar aqui botão aqui eu vou colocar um Type text Place Royale eu

vou colocar um placeholder aqui eu vou colocar é display em lá então tá se a gente salvar e atualizar Olha o que que acontece vocês podem ver que diferente dos Playboys o display inline sempre vai ficar um elemento do lado do outro vocês podem ver que aqui tá um embaixo do outro no código mas não interfere em nada porque o display padrão desses elementos aqui em Laine então ele sempre eu vou ficar um do lado do outro e ele sempre vai pegar a largura necessária ou seja se a gente vê aqui a pagar e eu

fizer o seguinte colocar aqui spam ou seja colocar uma largura de 100 pixels no uma altura de 100 pixels no spam um pé de dez Picos um vai ter uma escola a gente salvar que atualizar Olha o que que aconteceu o prédio foi aplicado tá um apagar o pede para não confundir a pagar o pezinho aqui beleza pode usar Olha só isso que eu quero dizer eu coloquei uma largura de 100 fixo coloquei uma altura de serpentes mas ele só pegou o tamanho do conteúdo tá ele só vai pegar exatamente o tamanho necessário para o

conteúdo que abrir aqui então a gente não consegue declarar uma largura e uma altura para um elemento display-inline a gente consegue colocar um pé de enfim estar vocês viram ali a gente consegue colocar um pezinho de botar aqui se ela 20 pixels em cima embaixo na esquerda na direita a gente pode salvar aqui atualizar vai funcionar porém largura e altura não funciona nos elementos que sejam display-inline tá bom a fazer uma experiência aqui vamos colocar um a div colocar aqui em conteúdo essa é uma dele tá no apagar esses itens aqui vamos deixar eles aqui

a gente vai fazer o seguinte a gente vai copiar essa div Vamos colocar aqui não copiar essas características dela Vamos só mudar para o background da dívida e azul Ok e vamos salvar vamos atualizar tá vendo cara eu declarei aqui uma largura de 100 pixels declarei uma alto é sempre que já tive mas ela não deixa nada ficar lado dela nem se o elemento que tiver abaixo aqui no código seja de espanhol online cara nada pode ficar do lado dos Playboy porque ele toma toda a linha a gente dá uma de 12 aqui e a

gente pode ir o seguinte a gente clica aqui para ir selecionar o elemento e clica aqui na div olha só tá vendo esse conteúdo laranja aqui é uma margem que a própria div ou seja aqui o próprio elemento que seja diz Playboy coloca automaticamente para nenhum outro item ocupar o espaço ali do lado dele então mesmo declarando uma largura fixa de 100 pixels ele vai acrescentar uma margem só para poder pegar todo esse conteúdo do lado dele e nada ficar do lado dele então pode vir aqui mesmo existem sendo de espanhol online ficam na mesma

linha não vai ficar aqui do lado tá bom nada fica do lado de display ok porém a gente consegue você tá né a gente consegue mudar o display do padrão dos elementos eu consigo por exemplo dizer que o spam vai ser um display Block tá eu consigo dizer que hoje não vai sentir o iboc Se eu fizer isso salvar de atualizar vocês podem ver que os elementos que estavam lá dele foram para baixo agora ele tá com uma largura de 100 pixels e ele e sem pizza então a gente consegue fazer isso eu consigo fazer

falar que a div é um display inline por exemplo se eu salvar e atualizar eles podem ver que ela vai perder as características de largura e de altura e vai pegar somente o necessário para poder Cadê o seu conteúdo se eu coloco essas Diva aqui embaixo por exemplo perto do botão e do imposto que são display inline e atualizar vocês podem ver que a Gi vai ficar lá do botão que vai ficar do lado input tá então a gente consegue alterar as características padrões os displays no caso padrão de cada tag HTML beleza porém a

gente também tem uma outra tá nenhuma tag nenhum elemento HTML vem dessa forma por padrão mas a gente consegue acrescentar no CSS que é o display inline-block tá ou seja ele vai pegar as características do slime e vai pegar as características do Block e vai colocar tudo na tag tá bom Como assim vamos pegar essa tag aqui e chupando por exemplo e vamos e como display inline-block é assim que a gente faz online-go.com aqui; ou seja com as características do display inline que ele vai pegar as características serão que ele vai deixar identificado ficar no

seu lado essa é a característica do display lá ele vai pegar e quais são as características do display Block que ele vai pegar é poder definir uma largura e poder definir uma altura sem salvar aqui e atualizar a gente pode ver que o nosso plano nosso span ele tá com uma largura de sentir está com uma altura de 100 pixels e os outros estão do lado dele Beleza então a gente consegue definir e o display padrão mudar o display padrão Vamos colocar aqui agora essa dica como display inline-block também a gente pode salvá-la salvam agora

vamos atualizar agora gente pode dizer aqui ó aqui com o spam é onde pra ir lá e Block conseguimos colocar largura e altura Adília agora é um tempinho lá no blog ou seja agora ela consegue definir a largura altura e também deixa outros elementos ficar no seu lado e esses elementos aqui são display-inline normal tá bom então é entendendo isso o cara a gente consegue construir usando no fluxbox já conseguir qualquer layout tá bom entendendo isso a gente consegue construir qualquer Leal disse não posso criar aqui vamos a parar de por exemplo vamos ver aqui

algumas vive tatuagem de criança dividir dividir agora a gente pode apagar esse cara que ele fez tudo de bom presente não tem mais um fã vamos salvar vamos atualizar ó a div com display inline-block fica uma div lá da outra a gente consegue citar largura e altura se eu tirar o display e ela vai ficar contigo e padrão aqui é o Block e automaticamente salvar aqui atualizar Vai cada um louco para uma linha beleza e é isso galera espero que vocês tenham gostado Se gostou deixa eu gostei não esqueça de se inscrever no canal ativo

Sininho da notificação para poder estar recebendo mais vídeos mais tutoriais de beleza e é isso galera até a próxima fui