HTML & CSS - Box Model: O Conceito Mais Importante do CSS

Quer saber mais sobre o nosso Curso Completo de HTML e CSS? Clique no link abaixo para garantir sua vaga na próxima turma: https://dlp.hashtagtreinamentos.com/html-css/espera/impressionador?origemurl=hashtag_yt_org_listaesperahc_XownDv0tZqg PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS: https://pages.hashtagtreinamentos.com/inscricao-minicurso-basico-html-css2?origemurl=hashtag_yt_org_minihtmlcss_XownDv0tZqg ----------------------------------------------------------------------- ► Arquivos Utilizados no Vídeo: https://pages.hashtagtreinamentos.com/arquivo-htmlcss-1gk-VAQonPuHY5vtVXZ1O20yrzhl0XzVe?origemurl=hashtag_yt_org_planilhahc_XownDv0tZqg ► Instalação do VS Code para Programação em HTML e CSS (Visual Studio Code) https://youtu.be/WyXcfCPlIlk ----------------------------------------------------------------------- PARA CONTRATAR A HASHTAG PARA SUA EMPRESA: https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt ----------------------------------------------------------------------- Fala Impressionadores! Você já ouviu falar em Box Model no CSS? Esse é o conceito mais importante do CSS, pois todos os elementos no HTML e CSS são formados por caixas! Sim, caixa, por isso chamamos de Box Model (modelo de caixa). Eu vou te explicar o que é o modelo de caixa e como ele é composto. Temos o conteúdo, o padding (espaçamento interno), border (borda) e margin (margem). Todos os elementos são constituídos por essa combinação. Nem sempre eles vão “existir”, pois podem não ter tamanho, mas todos os elementos serão compostos da mesma forma, tanto que vou te mostrar o visual disso. Inclusive, cada um desses itens tem uma cor diferente para indicar qual item estamos falando ou alterando. Vou te mostrar isso na prática com as ferramentas do programador e com a ferramenta de análise do próprio navegador. Tudo isso vai ficar mais claro com os detalhes no vídeo e com a visualização do modelo de caixa! ----------------------------------------------------------------------- Vídeos Recomendados ► Curso Básico de HTML e CSS https://www.youtube.com/watch?v=vtX9BzESWnQ&list=PLpdAy0tYrnKwmcenKePWr9TQ9deRanAr7&pp=iAQB ► Como Baixar e Configurar o VSCode para HTML e CSS https://youtu.be/WyXcfCPlIlk ----------------------------------------------------------------------- Hashtag Programação ► Inscreva-se em nosso canal: http://bit.ly/3c0LJQi ► Ative as notificações (clica no sininho)! ► Curta o nosso vídeo! ----------------------------------------------------------------------- Redes Sociais ► Blog: https://bit.ly/2MRUZs0 ► YouTube: http://bit.ly/3c0LJQi ► Instagram: https://bit.ly/3o6dw42 ► Facebook: http://bit.ly/3qGtaF2 Aqui nos vídeos do canal da Hashtag Programação ensinamos diversas dicas de HTML e CSS para que você consiga se desenvolver nessa linguagem de programação e criar seus próprios projetos! ----------------------------------------------------------------------- Conteúdo da Aula 00:00 Introdução 01:14 Criando um arquivo HTML 02:44 Abrindo a página no navegador 03:10 O que é Box Model? 04:45 Marcações do Box Model 05:50 Como é formado o Modelo de Caixa (Margin, border e padding) 10:35 Resumo do Box Model 11:00 Tamanho do elemento no CSS (margin e padding) 13:55 Tamanho do conteúdo (box sizing) 19:10 Forma de dar o tamanho da caixa 19:45 Configurações dentro do código (border box) 20:55 Conclusão #htmlecss #htmlcss #html #css #hashtagprogramacao