Modelo de Caixas na prática (parte 2) - @Curso em Vídeo HTML5 e CSS3

Olá Esse vídeo é uma continuação do vídeo Onde nós estamos no Capítulo 16 do nosso material aí [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do seu curso de HTML e CSS no vídeo anterior a gente começou a ver algumas propriedades de borda de Perry de posicionamento a diferença das caixas do tipo Box level e das caixas do tipo em levam e agora a gente vai dar continuidade no Exercício então assim é importante você tem que ter visto os vídeos anteriores principalmente os dois

vídeos a teoria e onde a gente começou a fazer um exercício porque exatamente nesse exercício que a gente vai voltar agora e o recado de hoje é trazido para você pela hostnet que traz soluções digitais para o seu negócio e uma dessas soluções digitais que a Rosinete oferece há muito tempo é a hospedagem de sites e registro de domínios e se você não sabe ainda o que que é hospedagem o que que é domínio vai acompanhar esse curso que se já não saiu tá prestes a sair um vídeo que explica a diferença entre eles a

Rosinete oferece o registro de domínio você pode comprar domínio de todas as terminações. Com ponto com o ponto net E você também pode escolher domínios com terminações bem recentes como ponto top. Clix. Live ponto Cloud e muitas outras esses registros tem uma taxa anual mais necessita de uma hospedagem mas a rosto né se também oferece hospedagens com servidores Ultra modernos localizados no Brasil esses servidores têm serviços de backup constante personalização do ambiente com o painel de controle exclusivo da hostnet e o melhor de tudo um suporte nota 10 que vai resolver seus problemas na hora

que eles acontecerem esse a tua empresa de hospedagem promete que nenhum problema vai acontecer provavelmente lá tá mentindo para você a internet é muito grande problemas podem e vão acontecer mas a equipe da Rosinete vai estar pronta para resolver todos eles assim ó num estalar de dedos então se você está procurando um local para registrar o seu domínio e hospedar o seu site a escolha correta é a hostnet fica com isso na cabeça e no seu caderno mais cedo ou mais tarde você vai precisar deles então já estou com o exercício já carregado a gente

fez essas configurações aqui a gente vai aprender a simplificar algumas dessas configurações também nesse vídeo mas eu quero comentar mais Duas Medidas que ficaram para ser explicadas agora a primeira medida é a margem se você viu lá no primeiro vídeo desse Capítulo a margem ela fica na borda para fora o Pede esse aqui ó essa medida pede ele é da borda para dentro essa distância está o mouse parado aqui agora vou te mostrar que no débito falar mais como é que você abre esse débito te ensinei no vídeo anterior vou abrir aqui ó o corpo

joga um ó ou borda essa aqui tá com 10 e o prédio está aqui ó dentro tá vendo border pede borda pede ele tá fazendo a cura aqui perdem a sua linha verde Clarinha que eu vou demonstrar aqui agora vou pegar o pezinho top dele e vou aumentar ó tá vendo o pezinho é essa distância que tá crê E no caso está crescendo o pede top existe uma outra medida que a margem a margem também é configurada assim como o pedem assim ó o H1 eu vou botar margem lembrando a gente sempre vai configurar nesse

sentido do relógio começando em cima começando no horário de meio-dia e girando no sentido do relógio Vou botar aqui em margem top 10 pixels Às vezes você precisa margem Alright de 10 pixels margem moram de 10 pixels e margem Leste de 10 pixels aí olha só Em que momento será que ele configurar margem olha olha o exemplo que eu causei aqui ó tá vendo essa bosta tá muito perto dessa agora por mais eu preciso de um espacinho aqui ó nesse mês exatamente ele tá a mãozinha aqui ó eu preciso desse jeito aqui de um espacinho

falar para o trabalho mas tem um espacinho às vezes nem isso tenho às vezes por exemplo aqui vou pegar no link não mexi aqui no link e vou mexer no pezinho top dele às vezes ele aparece assim o preposto e você quer dar um espacinho atrás era você queres passar essa daqui como você faz você usa a margem então era só eu tenho aqui margem de cima margem da direita margem de baixo imagem da esquerda Vou atualizar e você vai ver ela ficou sobreposto ali a gente vai mexer nisso ah quando você vem no avião

né que a gente colocou a margem imagem de cima a margem quando você passa o mouse aqui ó a margem essa parada que ficou bege aqui tá vendo Então tem uma margem externa aqui podemos crescer essa margem a polícia vou querer ser a margem de baixo vou virar aqui no mar de ir embora e vou criskeila tá vendo aí ele vai aumentando a e chegando para fora aquilo também é personalizável eu consigo deixar até coladinho aqui ou um espaço um pouco maior tá então assim essa margem eu consigo configurar também de todas as direções de

cima da direita de baixo e da esquerda vou pegar mais linda a esquerda vou mexer consigo configurar chegar um pouco mais é mais para cá Cuidado lá não vou centralizar Sim já vou te mostrar como é que funciona a centralização hoje mostrar agora na verdade a centralização disso aqui você não pode fazer que eu vou botar o margin-left que ele fica mais ou menos no meio eu faço é avô centralizar mais ou menos aqui aí tu ótimo ficou centralizar Dinho ficou não cara se o navegador do teu cliente com maior ou menor por exemplo é

o navegador maior aqui ó já não ficou mas no meio então assim o meio em se ele é calculado de acordo com o tamanho da caixa Existe uma forma da gente centralizar caixa de uma maneira muito simples quer fazer isso daqui ó eu vou recortar isso aqui já já a gente mostra o recortar isso o atualizar Ana tá aqui como é que eu faço amarrei ficar exatamente no meio eu gosto assim ó margem só margem e bota alto tá margem alto vai fazer com que ele centraliza horizontalmente quer ver eu atualizei ele já ficou no

meio lá agora agora tá realmente no meio vamos ver ó E conforme o aumentando e diminuindo ele vai reposicionando a caixa no meio então assim é muito prático quando a gente usa margem eu concordo contigo que é meio contra-intuitivo né geralmente classe margem alto para deixar a caixa no meio mas é uma coisa que vai ter que anotar e então todo elemento que você quiser no meio da tela vai ter que usar margem alto se for uma caixa com um texto você bota um text-align-center que funciona vou voltar aqui para as nossas quatro configurações de

margem para a gente poder entender outras coisas então vou botar aqui uma margem de baixo vou botar uma margem de sei lá de 20 pixels a gente ficou pouco vou botar 40 beleza tá aqui então eu tenho aqui e as outras eu vou botar 20 eu tenho aqui essa medida que a minha margem do meu H1 que essa medida aqui essa medida externa isso daqui não é de 20 aqui tá maior né 40 que é o dobro disso aqui porque daqui em baixa a medida de 40 outra coisa que a gente pode fazer é criar

um a fine Words Line é o seguinte ele fica entre a borda e a margem entrar borda EA margem só que dentro da margem por exemplo que eu tenho 20 eu posso pegar metade disso 10 e fazer um tracejado tracejado do lado de fora como eu faço isso aqui ó eu posso ir aqui e colocar altos online Wings é feito igual a margem tá igual a borda perdão a largura dele vai ser de só a 5 pixels ele vai ser um outline-style vou botar pontilhado Dash na pontilhado não tracejados teste e vamos colocar um outline-color

de sei lá vaca salmão quando atualiza lá Um pontilhado salmão do lado de fora Deu para entender diferença de borda para outline existe essa diferença eu tenho como tracejar do lado de fora do tracejado vamos voltar aqui aqui embaixo nesse Box level aqui do navegador ele não mostra outline tá mas você consegue enxergar lá ou você vem aqui ou no código outline Whindersson se a pizza sem aumentando ou diminuindo ele vai aumentando e diminuindo Lembrando que o limite dele é sempre calculado pela borda se tem uma margem perdão tá vendo que ele não aumenta a

margem ele desenhado pelo por dentro da pode até extravasar margem como você tá vendo que tá acontecendo aí mas o outline é justamente um tracejado que tem dentro da margem você vai ver aqui agora vou passar o mouse ou clicar em cima da margem aqui do lado de fora a margem tá aqui ó o outline tá dentro se o aumento ó tá vendo tá dentro da margem ó ele pode estar por lá a margem não tem problema TV que extrapola agora acabei de tirar pular ali na esquerda mas ele não aumenta e diminui a margem

ele está dentro da margem fechou agora como eu tinha prometido a gente vai aprender a simplificar essa parada toda aqui vamos lá no nosso um código e eu vou ensinar algumas coisas que podem ser simplificadas nós vamos simplificar borda pede margem e outline data nós vamos utilizar shorts aquilo que eu tinha ensinado para você em vídeos anteriores short a gente são propriedades como essas daqui só que elas são de múltiplos valores por exemplo a borda borda willer border Style border collie são as três propriedades mais usadas da borda eu posso simplificar essas três pra somente

border e eu informo na nessa ordem largura na espessura na verdade estilo e corpo então eu posso substituir essas linhas aqui essas três linhas pô borda 10 pixels Solid door kingsley treino lá então essa linha ela substitui todas essas linhas Beleza então vamos lá outra coisa que eu posso simplificar você tá vendo aqui que eu tenho todos eles são iguais tá vendo pede no top pede Henrique pede embora não pede leve existe um short hand gel pedem só pedem esse prédio eu vou informar nessa hora por isso que eu falei isso desde a aula anterior

na ordem que eu vou o topo direita embaixo esquerda é basicamente você usar o sentido do relógio em cima aí tem essa um relógio o ponteiro andando cima meio-dia direita baixo esquerda cima direita baixo esquerda nessa ordem Então vou botar aqui ó cima das fixos direita 10 pixels baixo 10 pixels e esquerda dez Picos Então essas quatro linhas aqui podem ser simplificadas para essa daqui fechou E aí vem uma outra coisa se você dá uma olhada todas essas quatro são exatamente iguais 10 10 10 e 10 se as quatro foram iguais basta nos informar uma

vez só isso é se você botar a pede 10 significa que você tá colocando de cima da direita de baixo e da esquerda exatamente iguais vou te mostrar isso funcionando você atualizar aqui nada mudou vou te mostrar isso aqui ó o pectus Quando você clicar no H1 que é o que a gente tá sempre ficando tá vendo aqui ó a gente já tem a simplificação dele aqui ó o pé vim Se você dá uma olhada aqui ao borda e o pede estão simplificados como a gente sabe eles estão com essa setinha aqui ó se você

clicar nessa setinha que você vai ver as propriedades que ele modificou ele modificou na verdade de multi com várias né na verdade top color top Style ele fez a de cada um do topo da direita de baixo ele fez manualmente o pede você vai entender melhor pede de cima dez da direita 10 de baixo 10 da esquerda 10 você também pode colocar só dois valores vou voltar aqui no código quando eu boto dois valores lá pedem 10 20 por exemplo 10 20 aí tá fazendo 10 20 é a de cima da direita não vai ter

parar de embaixo não vai ter perna esquerda aí é que você se engana quando você coloca Duas Medidas olha o que ele faz ele e aqui ó o seguinte 10 20 significa tipo de cima 10 o de baixa desta ele coloca 10 aqui e 10 aqui em cima embaixo já ou da direita da esquerda é o mesmo 20:20 sacou Então quando você bota quatro valores é a configuração de cima direita baixo esquerda né salada Quando você bota um único valor é a mesma coisa para os quatro Quando você bota dois valores o destino de baixo

ficou iguais 10 e 10 e o da esquerda e da direita também ficam embaixo 20:20 certo então essa explicação aqui Você viu quando a gente une um visual Studio Code com o débito do Google Chrome tudo fica mais claro aí na tua cabeça então aqui ó eu vou botar só 10 porque todo mundo igual aqui ó a margem Eu tenho 20 20 e 40 20 Não tem como simplificar muito aqui tá tem bastante que eu vou usar no lugar de Margem top margem Leste tal vou usar só margem aqui no ordem eu vou colocar em

cima direita baixo esquerda é tão cima deixa eu mexer o botar esse margem Aqui para baixo para poder você poder enxergar tem uma agem aqui ó assim mais 20 direita 20 embaixo é quarenta e da esquerda é 20 certo então essas quatro linhas são simplificadas por essa linha aqui morte e vai ver aqui que não vai ter alterações certo e eu trouxe aqui mais um recado muito rápido bem tranquilo e um pedido para você não sei se você sabe mas Além daqui do YouTube Eu também estou bem ativo lá nas minhas redes sociais no Instagram

e no Instagram do curso em vídeo então que eu vim te pedir aqui nesse vídeo é bem simples gostou da aula tá gostando do curso segue a gente no Instagram Vamos tornar essa comunidade muito maior e ajudar a divulgar o trabalho de Quem produz conteúdo com tanto carinho e tanta dedicação outra coisa que eu consigo é o seguinte se a margem da esquerda e da direita se eu quisesse centralizar ó esquerda direita essa aqui gente ficção eu vou botar alto e da esquerda essa daqui também vou botar eu faço isso a ele já centraliza à

margem da esquerda e à margem da direita que são essas aqui ó voltando a olhar um à margem da esquerda que essa margem a margem da direita que é essa margem vamos ficar automatizadas Suelen vai calcular automaticamente as minhas bagagens da esquerda direita respectivamente para que a minha box com a minha caixa fique centralizada muito prático também e por fim o outline vamos simplificar também e nós vamos botar o seguinte somente outline muito pouco usado né mas às vezes você precisa outline sempre nessa ordem largura né espessura sem que tem que ser Vou botar aqui

Dash e salmão vou tirar essas três linhas essas três dias foram simplificadas por esse short Então eu tenho aqui ó border com short Renner outline.com short Hand pad margem com short hair também também dá para simplificar esses dois aqui ó aqui o border e aqui o pedem você vai fazer essa configuração manualmente Ah beleza então olha só a gente aprendeu o box faz em que a gente chama de boxe dizem que esse cara aqui tá aí Williams é o site da minha caixa obor pedem margem e outline que são as minhas propriedades anatômicas do boxe

e vimos tudo isso para um elemento é esse aqui é um elemento do tipo Box level e o link A Âncora que é um elemento do tipo inline levam a Eu não mostrei isso antes ó se você vier aqui também você vai ver aqui ó o H1 Se você olhar aqui embaixo the Filter você vai ver as propriedades inclusive o display procura display aqui que ela display ele é um display Block oh1 por padrão display Block já ou a que é o meu a minha Âncora se você vier aqui procurar o display aqui ó tá

online perto então eu posso personalizar isso da seguinte maneira como eu disse um por padrão e não é box level se eu quiser transformar ele em online é só botar assim ó display-inline olá ele automaticamente viram online Cara isso aqui é muito prático isso aqui ele facilita muito a tua vida tá claro Quando você bota online você não pode fazer altura e largura ele é em Laine por outro lado eu também posso inverter o negócio esse aqui em lá me leva o certo eu posso ir aqui botar display block para ele mostrar como um bloco

o link agora é um bloco Qual foi a característica que eu te ensinei no um bloco ele começa numa linha sozinha tá aqui ó ele quebrou a linha para o link e o link vai ocupar o corpo dele ocupa a largura inteira do seu site Então é só botar um display que você muda a característica normal de um elemento se um elemento inline' por padrão Mas você quer que ele apareça como um Block dá para fazer também dá para você fazer também depois a gente ver com mais detalhes um display inline-block que na verdade ele

vai se o bloco ele vai continuar sendo online tá mas ele vai ter algumas características de blocos ó é eu vou poder botar tamanho altura a largura nem Então é isso daí que a gente tinha para ver nesse início de capítulo então a gente conseguiu ver a anatomia de uma caixa conseguimos fazer configurações pontuais nela de posicionamento de margem de posicionamento onda de tamanho e anatomia é margem pedem enfim um monte de coisa aí na prática se você precisar cara eu até te recomendo você fazer isso se você achar interessante volta no primeiro vídeo desse

Capítulo 16 é o primeiro vídeo que mostra a anatomia a ficha ele de novo que com certeza agora sua mente vai estar mais aberta e você vai conseguir entender coisas que talvez naquele primeiro vídeo tenha sido um pouco difícil e não adianta ter pressa não adianta correr não é maratona você não tá correndo contra o tempo que você precisa aprender até amanhã isso já entrou num acordo lá no primeiro vídeo do curso primeiro vídeo do curso já conversou sobre esse assunto fechou lembre-se a gente tem acordo de você precisar anotar o monte de coisa espero

sinceramente você esteja anotando tudo isso que a gente aprendeu aqui durante o curso até o momento e no próximo vídeo a gente vai dar continuidade aos estudos de caixa dando mais algumas propriedades e mais algumas configurações aí para a gente poder avançar um grande abraço esquece ano tá Não se esquece de praticar e a gente se vê na próxima [Música] [Aplausos] [Música] E aí E aí [Aplausos] [Música]