Modelo de Caixas: primeiros passos - @Curso em Vídeo HTML5 e CSS3

Já começamos agora os nossos estudos do Capítulo 16 do seu material hoje nós vamos falar sobre o modelo de caixas [Música] [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a primeira aula do Capítulo 16 do seu curso de html CSS E como eu disse ali na abertura que nós vamos começar a falar sobre o modelo de caixas mas que diabos é modelo de caixas e o que que se importa para mim essa teoria é muito importante por isso que eu reservei um vídeo só para essa teoria para você

poder entender o box size e a forma com que os boxes são exibidos na verdade a teoria de caixas né o modelo de caixas Ela vem determinando em esquel box-model fica se por acaso você tiver alguma dúvida em relação a esse conceito se quiser pesquisar outras fontes enfim é só você procurar por HTML e CSS Box Model Então vamos diretamente para o vídeo lá diz que eu preparei para você para você poder entender bonitinho isso daí interrompemos a sua aula para um recado rapidinho de um dos nossos patrocinadores a plataforma estuda Now e se você

já conhece o projeto do curso em vídeo é muito tempo sabe que é plataforma estudou na alta surgiu essa ideia de produção de conteúdo de qualidade para lançamentos de cur e funcionais e vou te ajudar desde o início Zinho para quem não sabe nada de programação até para quem já sabe que é criar por exemplo um aplicativo para celular e o estudo alta não é um projeto gratuito Como é o do curso em vídeo onde a gente disponibiliza cursos como esse que você tá assistindo Mas é uma plataforma que além de alguns cursos do curso

em vídeo que podem ser ampliados e alguns até já são Como por exemplo o nosso curso de Responde pai que além das aulas que tem aqui no canal do curso em vídeo tem muitas outras aulas também tem cursos inéditos como por exemplo de linguagens modernas como ser Sharp e linguagem encontro sentido código pronto se você quiser saber mais informações sobre astronauta aqui ó nesse código é só apontar a câmera do seu celular você vai para uma página especial e se por acaso estivermos sem vaga na plataforma você pode deixar o seu cadastro lá e a

gente te avisa assim que novas vagas que surgirem obrigado estudou na alta pelo Patrocínio e você pode seguir com a sua aula agora é bom então nós vamos começar agora a estudar os conceitos do modelo de caixas ele é aplicável ao HTML a linguagem HTML e a linguagem CSS também é um conjunto que Vai facilitar muito para você conseguir organizar o design organizar as partes do seu site e a teoria por trás desse modelo de caixa escrever basicamente com o paradigma lá com a ideia de ter uma caixa eu quando você tem um documento HTML

tudo aquilo que exibindo na tela é exibida em forma de caixa e eu posso na grande maioria das Caixas da HTML elas podem estar uma caixa dentro da outra isso Vai facilitar muito a nossa vida então eu posso pegar uma caixa outra dentro de outra caixa pegar outra caixa botar dentro dessa segunda caixa e formar uma hierarquia de caixas uma caixa de na outra tipo aquela bonequinha que tem uma boneca aquela boneca polonesa sei lá como é que chama como é que tem uma boneca dentro a outra é basicamente a mesma coisa também e quando

eu coloco um elemento dentro do outro só como curiosidade o tempo que a gente usa é a minha mente o aluno que fala alinhamento porque a coisa de alinhado não é alinhado é a minha mento em forma de Ninho é uma coisa que tá me outra dentro que saber outra dentro do cabelo tá evento sempre que você ouvir o termo alinhamento você não vai mais achar estranho e eu vou usar como exemplo aqui um código muito básico muito Inicial que a gente viu lá quando a gente começou a estudar Gabriele marcação um título por exemplo

quando você coloca aí na tela como Acabou de aparecer H1 ou lá, muda exclamação/H um só botar no seu código lá no visual Studio code e que vai acontecer quando você abrir no navegador vai pegar lá no navegador seu desenho um pedacinho da tela do navegador ele vai escrever com a fonte padrão né o com a fonte que você configurar mais foi Nesse estilo vai escrever olá mundo ele vai esse excluir a parte H1 e a parte é Braga um e vai botar lá formatação de título que geralmente uma letra maior em e tudo mais

você já viu isso durante as aulas básicas de HTML e o que que seria o box o que que seria a caixa nesse daí velho olha só o h uma ele é um elemento de caixa toda elemento visível na tela dentro de um site é uma caixa uma e aqui eu vou botar um pontilhado em volta presta atenção em volta do mundo eu fiz um pontilhado essa é exatamente a caixa de um H1 Beleza então uma caixa ela não precisa ser exatamente do tamanho não lá pode ser um pouquinho maior um pouquinho menor você vai

ver isso mais para frente ainda nessa aula eu não considerar aqui essa daí é a Box Essa daí é a caixa do seu pagar um Então na hora de formatar com a CSS na hora que eu tenho setor pagar um na verdade eu estou configurando a caixa que vai estar exibindo esse elemento uma caixa ela tem um tamanho tá esse tamanho é especificado em Duas Medidas muito importantes e com palavras que às vezes se parecem muito tem que prestar bastante atenção Então nesse momento é que você ainda não abriu abriu o seu caderno para você

poderá notar essas palavrinhas aí que não errar nunca mais para pesar de que os olhos tudo como você vai ver ele te ajuda bastante são digitação a primeira medida é a altura essa palavrinha esses termos esse tema em olá mundo ele tem uma altura você deve tá vendo aí peça altura a gente chama de o rhay então é h e i g h t presta atenção porque causa uma confusão muito grande entre os alunos outra medida que eu tenho além da altura é a largura largura em inglês a gente vai falar weather weather é a

largura e presta atenção Olha aí na tela Hi finaliza com glitter termina com ph não tem que prestar atenção nisso volto a dizer o visual Studio code ele dificulta você digitar errado mas às vezes você tem que escrever essa palavra e acaba causando uma confusão e apesar da pronúncia deve se parecer raio Winter elas são proporções diferentes Hi altura weather largura a nossa essa parada aí outra coisa que eu consigo fazer com qualquer caixa com qualquer Box é traçar uma linha Em volta dela eu vou traçar uma linha em volta dessa caixa aí ó tô

traçando uma linha parte do conteúdo né a parte pontilhada é o que a gente mude parte de conteúdo né a medição da largura e altura é pela parte de conteúdo eu posso pegar e traçar uma linha em volta desse conteúdo e a gente vai chamar essa linha obviamente de Tu tá em CSS a gente vai chover border tá então uma borda é uma linha que circunda o seu conteúdo aí faz um pouco na barra mas essa linha Se você prestar atenção na tela ela tá muito grudada no pontilhado é assim mesmo é assim mesmo por

padrão a linha vai ficar grudadinha no pontilhado do conteúdo certo e aí você vai fazer a programação está muito grudado eu preciso de um espacinho tem como criar um espacinho assim uma peça vou botar agora tá grudadinho no pontilhado né A Linha Branca tá bem cuidada no pontilhado vou dar uma desafogada vou dar uma muito flagra nele aqui olha só a diferença esse espacinho que foi criado aqui ó esse espaço tem nome tá esse espaço ele se chama pedem tá a tradução de pedem Pode ser acolchoamento ou preenchimento É como se você tivesse engordando dando

aquela engordadinha no elemento para que a nossa borda fique distante do conteúdo tá o pezinho ele é calculado pode ser calculado em qualquer uma das dimensões pode ter um pé de em cima pede debaixo da esquerda e você pode ser igual na hora que a gente botar a mão na massa você vai poder entender então eu para entender eu tenho o conteúdo todo o conteúdo tem largura e altura quer o Raid altura largura e tem um borda cama borda em volta existe um espacinho entre o Bordo e eu conteúdo que se configurado a gente vai

chamar de presente a uma outra coisa que a gente pode configurar é o seguinte da borda para dentro tem um espaço se eu tiver um outro Box embaixo desse lá mundo ele pode ficar grudado nessa linha tá vendo a linha Branca então meu borda meu borda se eu tiver o outro é mesmo aqui embaixo a borda dele vai colar na borda do de cima então eu posso criar além de um espaço interno como você tá vendo aí Ó o Perde é um espaço interno eu posso criar também um espaço externo que é o que eu

vou falar esse espaço aqui ó ele também tem o nome que é o marketing quer a margem é um todo alimento todo boxe ele tem o conteúdo tem uma borda da borda para dentro a gente chama de pedem que é preenchimento ou acolchoamento e da borda para foto a gente chama de Margem que a margem tranquilo outra coisa que eu posso fazer dentro da margem logo do lado de fora da borda é criar um outro tracejar não eu não chamo de borda tá vendo que nunca seja do Amarelo fora da borda dentro do espaço do

margem Eu Vou Chamar esse essa área outline esse outline pode ser considerado também para ser traduzido para português como Contorno ou como traçado certo então a borda ela é dentro do elemento o traçado ele é fora do elemento caso você precisa de um outline pai como você faz o tratamento da sejado de Beleza então essa daí é a anatomia de uma caixa a gente vai ver na prática lá utilizando a nossa ferramenta do Google Chrome você vai ver que basicamente principais elementos sair Anatomia de uma caixa E aí tá gostando do curso tá achando legal

a ideia desse curso Ele tá dando um trabalhão para gente desenvolver eu vim aqui te pedir um e-mail por favor para divulgar esse curso eu creio jeito bem e também talvez divulgar o seu trabalho isso porque no repositório que eu vou falar várias vezes no curso além do nosso material de apoio todos os exercícios também vai ter uma pasta chamada ajude na divulgação se você quiser pode entrar lá baixar essa pasta inteira e aí você vai encontrar várias imagens em vários formatos para ajudar na divulgação Eu particularmente vou fazer uma versão mas você que é

artista Você que sabe desenhar que sabe ilustrar o que manja muito de Photoshop no Estreito pode criar uma arte baseada nos tamanhos né gente vai ter o tamanho deitado ou tamanho pé e o tamanho quadradinho você pode criar essas Artes e mandar para gente Para esse e-mail aqui ó que é arte@curso em video ponto com não tem ponto br no final e as artes selecionadas vão ser divulgadas no meu Instagram pessoal e no Instagram do Conselho Egito estão aparecendo aqui embaixo então se você é artista pode ajudar a gente criando Artes pode produzir o seu

conteúdo que a gente ajuda a divulgar e se você não é bom com artes não tem problema é só se essa pasta ajude na divulgação no nosso repor a escolher uma ou mais imagens e divulgar nas suas redes sociais grupos e tudo mais valeu mesmo já agradeço antecipadamente pela sua divulgação o que vai tornar Com certeza esse curso muito grande que vai ajudar muitas pessoas e existem basicamente para a gente entender também dois tipos de caixa tá quando você cria uma caixa pro H1 H1 foi uma caixa ele é um tipo de caixa tá para

isso vou desenhar dois navegadores aqui na tela tá imagina que sai são dois navegadores eu dois tipos de caixa primeiro tipo de caixa que é o do lado esquerdo seu lado esquerdo é o box level o outro tipo é o online level Então eu tenho caixas do tipo Box levo e caixas do tipo online leva vou colocar um conteúdo aqui imagina que é um parágrafo um conteúdo de qualquer um blá blá blá um qualquer coisa aí dentro do nosso corte inclusive se isso aí em São parágrafos eles também são caixas tá tudo parado é só

uma caixa também o quê que é uma caixa do tipo Box levo uma caixa do tipo Box leva seguinte eu tenho esse parágrafo tá aparecendo aí do lado a tela e eu quero colocar uma outra caixa Só que essa caixa do tipo Box levo uma caixa do tipo Box leva é o seguinte tá vendo que eu conteúdo ali a última linha tá parcial ela não se completou se eu criar depois desse parágrafo um box level né dentro desse parágrafo basicamente também unbox levo ele vai pular para linha de baixo vai desenhar um box level tão

boxe leva de sempre se inicia numa linha nova a outra característica The Box level é que o boxe leva ali sem preocupa a largura total da tela funciona navegador tá largam desocupar largura inteira se ele tivesse nem ele vai ocupar um pouco menos de espaço lateral um pouco menos de um líder certo a largura dele é sempre sem por cento do viewport 1100 por cento da sua telinha da Dália branca do seu navegador e depois que o exibir esse Box ele vai pular para a linha de baixo e aí sim ele vai colocando os outros

boxers então sempre que você tiver uma caixa do tipo Box level ele sempre eu sempre que a Caixa vai começar ele vai pular para a linha de baixo vai ocupar largura inteira da tela e vai pular para próxima ali antes de continuar e já um elemento do tipo online leva uma caixa do tipo online level e vai fazer o seguinte a mesma situação lá os parágrafos o parágrafo termina ali no início né sobrou espaço ele não vai pular para próxima ele vai lá pro lado vai desenhar a caixa exatamente do tamanho para conter o conteúdo

do seu elemento e depois que ele termina ele também não quebra linha ele não ocupa a largura inteira ele também não quebra linha ele continua o conteúdo e aí eu consigo ter uma caixa do tipo em level é dentro da linha vamos dizer assim é o visualmente tá aparecendo aí na tela a diferença básica a diferença Clara entre caixas do tipo Box levam Resumindo novamente sempre uma caixa para começar ele quebra para próxima linha coloco o tamanho da tela a largura inteira e depois que ele terminou Box ele pula para linha de baixo ele é

isolado ele é independente já um lá eu levo ele não quebra a linha ele não ocupa o tamanho inteiro ele ocupa exatamente o tamanho que ele precisa e depois dá continuidade ao conteúdo da mesma linha na Tá certo a Guanabara vida exemplo de tags do tipo Box level me dá exemplos de tags do tipo de me leva a mais famosa o box level mais famoso mais utilizado né no HTML 4 um pouco menos no HTML 5 + muito famoso ainda HTML5 é até 15 Então sempre que você usa uma div você tá utilizando unbox do

tipo Box level tá utilizando uma caixa box leve e sempre que você utiliza também a tag bastante famosa não confunde com span span Raquel e-mail indesejado é espera ela é uma expansão de código nos pés ele não quebra ali então sempre que você usa Tem muita gente que pergunta a ela namora com a diferença entre o dia e os panos quanto que eu vou usar o dia que quando eu vou usar o div é quando eu quero quebrar a linha criar um boxe da largura inteira e continuar a vida um Espanha eu vou quando eu

quiser um elemento e o próximo elemento esteja do lado dessa próxima caixa esteja imediatamente do lado eu vou utilizar um espelhinho não quero que ele ocupe a linha toda da outros exemplos vai me dar outro exemplo sair além de dizer Probox E aí level usar o Stitch eu tenho lá Box level Eu Tenho H1 e H2 H3 H4 h5 h6 pagar um filme sempre fiquei eu tenho parágrafo as tags semânticas que a gente vai ver durante os capítulos nem header Nav articulou a Side Foot o formulário ele é uma caixa do tipo Box level um

vídeo que a gente viu anteriormente também é um box level você viu lá que eu vou ali inteira e o unilevel além dos Pan eu tenho link World Is motion E aí né formatação Itálico com semântica subir né sobrescrito subscrito objeto em um formulário como lei botão input select todos eles são elementos em leves eles não quebram linha eles não ocupam a largura interna da tela Beleza cara se preciso for você assistir esse vídeo mais uma vez e não esquece de anotar que são muitas características gente vai precisar implementar botar a mão na massa e

botar em prática nos próximos vídeos Então peça teor e agora é extremamente importante então é isso meu querido é isso minha querida Mais uma aula de teoria geralmente a primeira aula de uma teoria de um capítulo muito importante a gente coloca os slides para ficar mais fácil de você conseguir perceber Espero que você tenha entendido a anatomia de uma caixa saiba diferencial O que que é uma caixa box level e uma caixa em Line level dá para gente configurar isso na mão depois se uma Box level precisar ocupar menos um parte da da tela e

a próxima ocupada lá dá para fazer a configuração também Mas é bom que você saiba classificar Essas caixas entender o que é uma caixa na prática no próximo vídeo a gente vai botar a mão na massa eu vou criar um site assim a gente vai personalizar ele para você poder entender todas essas características anatômicas de uma caixa a partir da próxima aula fechado então a gente já tem um encontro marcado que já tem uma tarefa para fazer mas não se esquece Anota tudo tudo anotado Você Vai facilitar muito a sua vida vai por mim ainda

mais essa parte do modelo de caixas gente vai usar bastante a partir de agora me despeço por aqui não a praticar e a gente se vê na próxima um grande abraço e até lá [Música] [Aplausos] E aí [Aplausos] [Música]