Os conceitos do *Modelo de Caixas* ( *Box Model* ) são aplicáveis ao HTML e ao CSS. Se trata de conjuntos que irão facilitar muito na hora de organizarmos o design e as partes do nosso site. Quando temos um documento HTML, tudo aquilo que é exibido na tela, é exibido em forma de caixa... De tal modo que a grande maioria das caixas na HTML podem estar uma dentro da outra. Dessa forma, podemos formar *hierarquias* de caixas. Quando colocamos um elemento dentro do outro, o termo que descreve isso é o " *ANINHAMENTO* ", algo em forma de ninho, coisas que estão uma dentro da outra e assim por diante. Na prática, uma caixa seria todo elemento de um site visível na tela. Considerando que todos os elementos de um site estão dentro de uma caixa, quando formatamos um elemento com o CSS através de seletores, na verdade estamos configurando a caixa que vai estar exibindo esse elemento. *ANATOMIA DAS CAIXAS:* *_PARTE DE CONTEÚDO_* : Toda caixa possui um tamanho, que é chamado de " *_PARTE DE CONTEÚDO_* ", esse tamanho é especificado em duas medidas muito importantes, que são: Altura ( " *height* " ) e Largura ( " *width* " ) *_BORDA_* : Podemos traçar uma linha em volta da _Parte de Conteúdo_ (que define o tamanho da caixa) e chamamos essa linha de " *_BORDA_* "... Sendo assim uma borda é uma linha que circunda o seu conteúdo. *_PADDING_* : Por padrão, a *linha da Borda* irá ficar muito próxima da *Parte de Conteúdo* , e se quisermos dar um distanciamento, devemos adicionar um espaço de " *_PADDING_* " (acolchoamento), que seria uma pequena lacuna entre a _Parte de Conteúdo_ e a _Borda_ , para dar aquela engordada no elemento, mantendo a nossa borda distante do conteúdo. *_MARGIN_* : Ao desenvolver um site, eventualmente iremos ter caixas uma embaixo da outra de forma seguida e, se uma dessas caixas estiver configurada com um espaçamento "padding", pode ser que elas fiquem muito próximas uma da outra e acabem "grudando" na borda do elemento de cima. Pensando nisso, podemos criar, além de um espaço interno (padding), um espaçamento EXTERNO logo *após a borda* , que seria um " *_MARGIN_* ". *_OUTLINE/TRACEJADO_* : Outra coisa que podemos fazer dentro do margin (espaçamento externo), logo do lado de fora da borda, é criar um tracejado, que não seria uma segunda borda e sim uma área chamada de " *_OUTLINE_* " (contorno/traçado). Sendo assim, ainda referente à anatomia das caixas, todo elemento e consequentemente toda caixa, tem a " *Parte de Conteúdo* ", tem uma " *Borda* ", dessa borda para dentro, temos o " *Padding* ", da borda para fora temos o " *Margin* " e, ainda dentro do margin e fora da borda, temos a área do " *Outline* ". Nota: Todas essas características anatômicas das caixas (tirando a _Parte de Conteúdo_ ) geralmente só irão se manifestar se forem previamente configuradas no seu código. *TIPOS DE CAIXA:* Basicamente, existem dois tipos de caixas, as do tipo " _box-level / block-level_ " e " _inline-level_ ". *box-level / block-level:* Em uma caixa do tipo "box-level / block-level", o dito elemento sempre irá se iniciar em uma nova linha e como padrão sempre ocupará a largura total da tela ou do elemento onde ele está contido (100% do viewport), sendo que irá pular para a próxima linha antes de continuar o conteúdo posterior e aí sim inserir outros boxes. As caixas desse tipo são isoladas e independentes. Exemplos de tags do tipo "box-level / block-level": *inline-level:* Já uma caixa do tipo "inline-level" não vai começar em uma nova linha, e sim no ponto exato onde foram definidos, no meio de um parágrafo por exemplo. E a largura dele vai ocupar apenas o tamanho relativo ao seu conteúdo, sendo que não irá quebrar a linha ao terminar, continuando o conteúdo de forma direta (em um parágrafo por ex) sem pular para a linha de baixo. Exemplos de tags do tipo "inline-level":
Para quem tem noções de inglês, dica para lembrar: high = alto height - altura. Veja que as palavras alto e altura se parecem também em inglês, high e height.
Olá guanabara, cara eu não conheço muito bem o Curso em Vídeo porque eu o conheci através do seu curso de python que foi gravado há alguns anos atrás, então não sei se você vai ler minha mensagem, mas enfim. O que eu quero escrever aqui é justamente sobre o seu curso em vídeo, que trabalho HERÓICO que vocês fizeram cara, de coração, um negócio totalmente independente, que visa ajudar o próximo a aprender e você pode ter certeza que vocês ajudaram e ainda ajudam muitas pessoa, como eu. Estou na minha sexta aula e estou adorando o curso e eu só queria deixar o meu sincero obrigado! Foi muito bonito a construção desse curso, admiro muito todos vocês que fizeram parte disso, de verdade!
Não sei se ele vai ler, mas eu li e concordo com o que você disse ele se dedica muito ao curso em vídeo e acredito que só em você deixar essa mensagem e se ele chegar a ler deve dar mais gás ainda para continuar. Te sugiro depois ver o curso de Wordpress dele é muito TOP, muito do que fiz no meu trabalho peguei ideias do curso.
@@curtiuseucomentario6203 não posso dizer todos os cursos mais os de Wordpress já lhe dão uma bagagem boa para você criar e vender seus proprios sites.
@@curtiuseucomentario6203 Amigo, o que te coloca em qualquer lugar, é você mesmo! O curso tá aí pra ser absorvido, quem vai aprender, implementar e trabalhar com isso é você.
Esse conteúdo só entrou na minha cabeça definitivamente após as explicações dessas aulas maravilhosas do Guanabara. Já fiz curso na Udemy, Hotmart, dentre tantas outras plataformas, e nenhuma delas foi capaz de me fazer aprender como esse grande mestre. O grande problema disso é que, depois que você tem uma aula com o Gustavo, você dificilmente irá se acostumar com outro professor!
Eu fiz o que ele fez, eu assisti esta aula fiz as anotações assisti as outras 2 aulas onde a gente começa a botar em prática e depois de assistir a Parte 2 eu voltei pra esta aula, assisti novamente e acompanhei com as anotações que eu fiz, resultado? Eu entendi melhor, ficou mais claro e pra ficar mais claro ainda, vamos praticar!
Professor, queria vir aqui te dizer o meu sincero obrigado por tudo que o senhor faz e fez por todos nós, pelo seu trabalho incrível, o senhor mudou muito minha vida, descobri um grande talento meu !!!!!
estou assistindo as aulas lá no Curso em Video e comentando por aqui... engajamento é o mínimo que posso fazer para agradecer a este conteúdo incrível disponibilizado por vocês!!
Guanabara, muito obrigado por essa aula e por tudo que você tem feito! Havia passado um bom tempo quebrando a cabeça para entender essas propriedades e em apenas 16 minutos você conseguiu esclarecê-las de maneira bem detalhada. Ótima didática.
Guanabara, já pensou em montar um bootcamp online? com vários projetos pra fazer, etc. A forma como você ensina é excepcional. Estou aprendendo a programar com você!
As aulas continuam sensacionais! Primeiro curso que faço de HTML/CSS que vejo explicar sobre box-level e inline-level. É um assunto muito importante de entender pra saber lidar com as dores de cabeça com CSS.
Só pra fortalecer aqui, agradecer ao Guanabara para que ele continue até quando aguentar, Deus o abençoe sempre meu querido. Cursos todos em alta qualidade. Um grande abraço.
🎯 Key Takeaways for quick navigation: 00:00 📚 O vídeo começa a abordar o "modelo de caixas" em HTML e CSS. 00:42 📦 O modelo de caixas é fundamental para entender como os elementos são exibidos na web. 02:21 📏 O modelo de caixas é aplicável tanto ao HTML quanto ao CSS, permitindo organizar o design de um site. 03:03 🎁 O modelo de caixas permite criar hierarquias de caixas, semelhante a bonecas russas. 05:09 📐 O tamanho de uma caixa é especificado em altura e largura, e esses termos podem causar confusão, então é importante distingui-los. 07:00 📜 Além de altura e largura, você pode configurar borda, preenchimento (padding) e margem (margin) em uma caixa. 08:34 🖍️ Você também pode definir um traçado (outline) ao redor do conteúdo de uma caixa. 09:30 🎨 Os espectadores são incentivados a ajudar na divulgação do curso, criando ou compartilhando imagens promocionais. 11:10 📦 Existem dois tipos de caixas: "box level" e "inline level," com diferentes comportamentos de posicionamento e largura. 11:53 📦 Caixas do tipo "Box level" quebram para a próxima linha e ocupam a largura inteira da tela. 12:06 📏 Caixas do tipo "Inline level" não quebram linha, ocupam o espaço necessário e continuam na mesma linha. 13:16 📦 Tags como ` ` são exemplos de caixas do tipo "Box level" que quebram para a próxima linha. 13:45 📝 Tags como `` são exemplos de caixas do tipo "Inline level" que não quebram linha e ocupam apenas o espaço necessário. 15:08 🛠️ É importante entender a diferença entre os tipos de caixas e como configurá-las, pois isso será fundamental para a prática nos próximos vídeos. Made with HARPA AI
Aula sensacional, parabéns a todos os envolvidos por disponibilizarem tal conteúdo de forma gratuita e muito obrigado! Logo mais vou cadastrar como membro, pois o projeto do custo em vídeo é outro nível.
Mano eu entrei na alura mas esse assunto eu não conseguia aprender por lá, sem dúvidas o Guanabara possui a melhor didática e método de ensino da tecnologia da internet!
Todo elemento do HTML é renderizado pelo navegador como uma box. Essa box pode ser alterada com as propriedades CSS: margin, border, padding e height/width. O margin nada mais vai movimentar o elemento, para a esquerda, direita, para cima ou para baixo. O border é a borda, dá pra definir o tamanho de borda, cor e modo de exibição. O padding é o preencimento, ele vai colocar o um espaçamento dentro do elemento. Width/height representam o conteúdo do elemento, um texto, uma imagem, um vídeo....
@@henriquealves6389 Não trabalho na área, mas posso te garantir qie você precisa ter tempo e paciência se você quiser entrar, pois você vai passar por muito estresse, e isso é normal.
@@henriquealves6389 👍. Mas se você fizer tudo certo, de um ano pra frente você já tá no mercado, mas se você tentar aprender tudo sozinho... Vai demorar demais, infelizmente foi o wue eu fiz.
@@stomperhk9107 Entendo. Eu pretendo iniciar outros cursos online, lá eu terei o apoio da comunidade e do suporte, você acha que assim basta ou seria necessário uma graduação mesmo?
Primeiramente gostaria de agradecer e parabenizar pelo seu trabalho!!! Estou inscrito no Curso em Vídeo e estou no Módulo 2 deste curso e não possui este vídeo lá. Já havia feito o curso de HTML/CSS anterior ( quando tu ainda não era grisalho...hehehe ) e me inscrevi no site pois pretendo comprar os créditos de certificados futuramente.
📝 *VALE LEMBRAR* *Parâmetros:* height -> altura width -> largura border -> border padding -> espaçamento interno em volta do texto, separando da borda margin -> espaçamento externo em volta da borda outline -> contorno externo em volta da borda *Tipos de Caixas:* *- box-level:* pula pra linha de baixo, se iniciando em uma nova linha, ocupa a largura inteira da janela (100% do view port) e ao fim, pula mais uma linha, antes de começar o novo conteúdo. ex:
*- inline-level:* inicia a caixa na mesma linha onde termina o texto, tem tamanho suficiente para conter o conteúdo e ao fim, o texto continua na mesma linha após a caixa. ex:
Modelo de caixas = Uma boneca-russa. Todo o elemento visivel na tela, dentro de um site é uma caixa. border = uma linha que circunda o conteúdo padding =da borda pra dentro. margin = da borda pra fora. outline = contorno box-level = quebrar linha e criar um box que ocupa a largura inteira. ex: h1-h6; p; main; header; nav ;article; aside; footer; form; video inline-level = utiliza o espaço ao lado. ex: span; a; code; small; strong; em; sup ou sub; label; button; input; select;
Gostei bastante do vídeo, o curso está ótimo. Seria legal se você voltasse a nos chamar de gafanhotos. E sinto saudades do Guanacast, podia voltar a fazer.
Conceito geral: O modelo de caixa do CSS define como os elementos HTML são visualmente renderizados no navegador. Cada elemento é representado por uma caixa retangular que envolve seu conteúdo. Componentes da caixa: Conteúdo (Content): Refere-se ao próprio texto, imagem ou outros elementos dentro da caixa. Preenchimento (Padding): É uma área transparente entre o conteúdo e a borda da caixa. Controla o espaço entre o conteúdo e a borda da caixa. Bordas (Border): Circundam o preenchimento e o conteúdo. Podem ter estilos, larguras e cores diferentes. Margens (Margin): São áreas transparentes fora das bordas. Controlam o espaço entre a caixa atual e outros elementos na página. Tamanho total do elemento: A soma do conteúdo, preenchimento, bordas e margens determina a largura e altura total do elemento. As dimensões totais podem ser ajustadas usando propriedades CSS, como width (largura) e height (altura). Layout e espaçamento: O modelo de caixa permite controlar o espaçamento entre os elementos na página. As margens são usadas para criar espaçamento entre as caixas de elementos. O preenchimento interno pode criar espaçamento entre o conteúdo e a borda da caixa. Box-Level: Elementos box-level são aqueles que são formatados visualmente como caixas retangulares com propriedades como largura (width), altura (height), margens (margins) e bordas (borders). Eles ocupam todo o espaço horizontal disponível na largura da sua linha ou contêiner pai, e outros elementos não podem ser posicionados ao seu lado. Exemplos de elementos box-level incluem , , a , , , , entre outros. Inline-Level: Elementos inline-level são aqueles que são formatados em linha com o conteúdo textual e não formam caixas individuais. Em vez disso, eles fluem junto ao texto. Eles não suportam propriedades de dimensão como largura e altura, nem as propriedades de margem (margin) e borda (border) aplicadas em box-level. Elementos inline-level são considerados parte do conteúdo e permitem que outros elementos fiquem ao seu lado. Exemplos de elementos inline-level incluem , , , , , entre outros.
Pessoal uma dica aqui de ouro, anota tudo se quiser no bloco de notas da mi cloud(xiaomi), nesse bloco de notas vcs podem criar uma pasta para HTML, CSS e JS, alem de tirar a foto e poder por na propria anotaçao, acredito q tbm da pra por google keep, mas la use marcadores
Os conceitos do *Modelo de Caixas* ( *Box Model* ) são aplicáveis ao HTML e ao CSS. Se trata de conjuntos que irão facilitar muito na hora de organizarmos o design e as partes do nosso site.
Quando temos um documento HTML, tudo aquilo que é exibido na tela, é exibido em forma de caixa... De tal modo que a grande maioria das caixas na HTML podem estar uma dentro da outra. Dessa forma, podemos formar *hierarquias* de caixas.
Quando colocamos um elemento dentro do outro, o termo que descreve isso é o " *ANINHAMENTO* ", algo em forma de ninho, coisas que estão uma dentro da outra e assim por diante. Na prática, uma caixa seria todo elemento de um site visível na tela.
Considerando que todos os elementos de um site estão dentro de uma caixa, quando formatamos um elemento com o CSS através de seletores, na verdade estamos configurando a caixa que vai estar exibindo esse elemento.
*ANATOMIA DAS CAIXAS:*
*_PARTE DE CONTEÚDO_* : Toda caixa possui um tamanho, que é chamado de " *_PARTE DE CONTEÚDO_* ", esse tamanho é especificado em duas medidas muito importantes, que são: Altura ( " *height* " ) e Largura ( " *width* " )
*_BORDA_* : Podemos traçar uma linha em volta da _Parte de Conteúdo_ (que define o tamanho da caixa) e chamamos essa linha de " *_BORDA_* "... Sendo assim uma borda é uma linha que circunda o seu conteúdo.
*_PADDING_* : Por padrão, a *linha da Borda* irá ficar muito próxima da *Parte de Conteúdo* , e se quisermos dar um distanciamento, devemos adicionar um espaço de " *_PADDING_* " (acolchoamento), que seria uma pequena lacuna entre a _Parte de Conteúdo_ e a _Borda_ , para dar aquela engordada no elemento, mantendo a nossa borda distante do conteúdo.
*_MARGIN_* : Ao desenvolver um site, eventualmente iremos ter caixas uma embaixo da outra de forma seguida e, se uma dessas caixas estiver configurada com um espaçamento "padding", pode ser que elas fiquem muito próximas uma da outra e acabem "grudando" na borda do elemento de cima. Pensando nisso, podemos criar, além de um espaço interno (padding), um espaçamento EXTERNO logo *após a borda* , que seria um " *_MARGIN_* ".
*_OUTLINE/TRACEJADO_* : Outra coisa que podemos fazer dentro do margin (espaçamento externo), logo do lado de fora da borda, é criar um tracejado, que não seria uma segunda borda e sim uma área chamada de " *_OUTLINE_* " (contorno/traçado).
Sendo assim, ainda referente à anatomia das caixas, todo elemento e consequentemente toda caixa, tem a " *Parte de Conteúdo* ", tem uma " *Borda* ", dessa borda para dentro, temos o " *Padding* ", da borda para fora temos o " *Margin* " e, ainda dentro do margin e fora da borda, temos a área do " *Outline* ".
Nota: Todas essas características anatômicas das caixas (tirando a _Parte de Conteúdo_ ) geralmente só irão se manifestar se forem previamente configuradas no seu código.
*TIPOS DE CAIXA:*
Basicamente, existem dois tipos de caixas, as do tipo " _box-level / block-level_ " e " _inline-level_ ".
*box-level / block-level:* Em uma caixa do tipo "box-level / block-level", o dito elemento sempre irá se iniciar em uma nova linha e como padrão sempre ocupará a largura total da tela ou do elemento onde ele está contido (100% do viewport), sendo que irá pular para a próxima linha antes de continuar o conteúdo posterior e aí sim inserir outros boxes. As caixas desse tipo são isoladas e independentes.
Exemplos de tags do tipo "box-level / block-level":
*inline-level:* Já uma caixa do tipo "inline-level" não vai começar em uma nova linha, e sim no ponto exato onde foram definidos, no meio de um parágrafo por exemplo. E a largura dele vai ocupar apenas o tamanho relativo ao seu conteúdo, sendo que não irá quebrar a linha ao terminar, continuando o conteúdo de forma direta (em um parágrafo por ex) sem pular para a linha de baixo.
Exemplos de tags do tipo "inline-level":
boa garoto
Você é foda, mano!
obrigado, lindo
Esse sim é o último herói da terra. Muito obrigado.
Ameiiiiii❤
Uma dica q eu usei pra ficar height e width na mente: o h é alto e o w é bem largo
caraca, obrigadoo!!
boa👍
faço isso tbm, e pra n confundir weight com widht: o "we" é mais gordinho que o "wi", por isso é "peso" kkkkkkj
Para quem tem noções de inglês, dica para lembrar:
high = alto
height - altura.
Veja que as palavras alto e altura se parecem também em inglês, high e height.
Halto, e largw
Olá guanabara, cara eu não conheço muito bem o Curso em Vídeo porque eu o conheci através do seu curso de python que foi gravado há alguns anos atrás, então não sei se você vai ler minha mensagem, mas enfim.
O que eu quero escrever aqui é justamente sobre o seu curso em vídeo, que trabalho HERÓICO que vocês fizeram cara, de coração, um negócio totalmente independente, que visa ajudar o próximo a aprender e você pode ter certeza que vocês ajudaram e ainda ajudam muitas pessoa, como eu. Estou na minha sexta aula e estou adorando o curso e eu só queria deixar o meu sincero obrigado! Foi muito bonito a construção desse curso, admiro muito todos vocês que fizeram parte disso, de verdade!
Não sei se ele vai ler, mas eu li e concordo com o que você disse ele se dedica muito ao curso em vídeo e acredito que só em você deixar essa mensagem e se ele chegar a ler deve dar mais gás ainda para continuar. Te sugiro depois ver o curso de Wordpress dele é muito TOP, muito do que fiz no meu trabalho peguei ideias do curso.
@@ednetolls é possível entrar no mercado com esses cursos?
@@curtiuseucomentario6203 não posso dizer todos os cursos mais os de Wordpress já lhe dão uma bagagem boa para você criar e vender seus proprios sites.
@@curtiuseucomentario6203 Amigo, o que te coloca em qualquer lugar, é você mesmo!
O curso tá aí pra ser absorvido, quem vai aprender, implementar e trabalhar com isso é você.
Esse conteúdo só entrou na minha cabeça definitivamente após as explicações dessas aulas maravilhosas do Guanabara. Já fiz curso na Udemy, Hotmart, dentre tantas outras plataformas, e nenhuma delas foi capaz de me fazer aprender como esse grande mestre. O grande problema disso é que, depois que você tem uma aula com o Gustavo, você dificilmente irá se acostumar com outro professor!
Eu fiz o que ele fez, eu assisti esta aula fiz as anotações assisti as outras 2 aulas onde a gente começa a botar em prática e depois de assistir a Parte 2 eu voltei pra esta aula, assisti novamente e acompanhei com as anotações que eu fiz, resultado? Eu entendi melhor, ficou mais claro e pra ficar mais claro ainda, vamos praticar!
Guanabara, TE AMO!
Deus te abençoe, meu irmão!
Abraço!!
O cara tem o dom de ensinar! Gratidão pelo ensinamento guanabara!
Esse cara é muito massa!
Que professor incrível!!! Obrigado, Guanabara!
Tá ficando cada vez melhor :D
Ah, se fossem em vídeos assim, na época em que eu estudava HTML pelo site do Maujor... hahahaha...
Excelente aula!!
didática perfeita, esse cara nasceu pra ensinar!! só gratidão 🙏
Professor, queria vir aqui te dizer o meu sincero obrigado por tudo que o senhor faz e fez por todos nós, pelo seu trabalho incrível, o senhor mudou muito minha vida, descobri um grande talento meu !!!!!
obrigado por trazer tantos conhecimentos para nós.✅😇
Aula de hj muito bem detalhada, explicou conceitos que mesmo quem já trabalha com css deixa passar batido, parabéns pelo curso abçs
essas aulas onde deseja oque está explicando simplesmente me fascina.
Guanabara, que seu vida seja prospera, cara. Eu agradeço muito suas aulas. Abraço!
Nem assisti já dei like
Que vídeo incrível! Aplaudi por R$ 10,00 👏👏👏
voltando ao curso depois q desisti por uns meses, obrigado Guanabara por ser um ótimo professor!
estou assistindo as aulas lá no Curso em Video e comentando por aqui... engajamento é o mínimo que posso fazer para agradecer a este conteúdo incrível disponibilizado por vocês!!
meus sinceros agradecimentos guanabara. você está ajudando muitas pessoas com essas aulas. obrigado ^^
Showwwww demais a sua explicação e o conteúdo! Obrigado!
Nossa que aula incrivelmente produtiva e com muitas informações importantes, obrigado professor.
Guanabara, muito obrigado por essa aula e por tudo que você tem feito!
Havia passado um bom tempo quebrando a cabeça para entender essas propriedades e em apenas 16 minutos você conseguiu esclarecê-las de maneira bem detalhada.
Ótima didática.
Guanabara, já pensou em montar um bootcamp online? com vários projetos pra fazer, etc. A forma como você ensina é excepcional. Estou aprendendo a programar com você!
Obrigado pelo vídeo.
Esse Guanabara é um monstro na didática. O cara é muito bom! Parabéns!
um exemplo de é quando você ta lendo um texto e do lado tem uma imagem ilustrando o texto.
Valeu! Aula do Almoço completa!
Valeu Guanabara. Excelente conteúdo.
e por aulas como essa, simples mas de grande valor, que o curso em video passa o rodo em muito curso pago por ai, vlw guanabara
Esse cara e o melhor professor do UA-cam
Curso muito bem explicado, a explicação faz parecer até fácil kkk
Explicação perfeita do box model!
E quem não entendeu, na aula prática vai entender.
Obrigado, professor!
Vídeo precioso!!! Conteúdo magnífico!!!
Essencial pro aprendizado!!!
Esse curso tá caprichado demais.
Que curso meus amigos! Do mais alto nível
As aulas continuam sensacionais! Primeiro curso que faço de HTML/CSS que vejo explicar sobre box-level e inline-level. É um assunto muito importante de entender pra saber lidar com as dores de cabeça com CSS.
Eu amo esse curso e a explicação do professor Guanabara é top. Parabéns pelo belo trabalho
Obrigado pela aula professor
Parabéns, estou gostando muito do curso... Obrigado, você é fera!
Só pra fortalecer aqui, agradecer ao Guanabara para que ele continue até quando aguentar, Deus o abençoe sempre meu querido. Cursos todos em alta qualidade. Um grande abraço.
vc é diferenciado guanabara
mano nao vi um video que explique de uma forma facil assim algo que na miha mente era tao complexo
Muito boa explicação, esse curso está sendo muito didático.
Quando teremos atualização dos materiais em PDF? Eles são muito úteis para fazer anotações.
@rafael_oliveira, tenho estado a constatar e não tem tido atualização há 4 meses.
up
excelente aula! deu pra clarear bem a caixola.
🎯 Key Takeaways for quick navigation:
00:00 📚 O vídeo começa a abordar o "modelo de caixas" em HTML e CSS.
00:42 📦 O modelo de caixas é fundamental para entender como os elementos são exibidos na web.
02:21 📏 O modelo de caixas é aplicável tanto ao HTML quanto ao CSS, permitindo organizar o design de um site.
03:03 🎁 O modelo de caixas permite criar hierarquias de caixas, semelhante a bonecas russas.
05:09 📐 O tamanho de uma caixa é especificado em altura e largura, e esses termos podem causar confusão, então é importante distingui-los.
07:00 📜 Além de altura e largura, você pode configurar borda, preenchimento (padding) e margem (margin) em uma caixa.
08:34 🖍️ Você também pode definir um traçado (outline) ao redor do conteúdo de uma caixa.
09:30 🎨 Os espectadores são incentivados a ajudar na divulgação do curso, criando ou compartilhando imagens promocionais.
11:10 📦 Existem dois tipos de caixas: "box level" e "inline level," com diferentes comportamentos de posicionamento e largura.
11:53 📦 Caixas do tipo "Box level" quebram para a próxima linha e ocupam a largura inteira da tela.
12:06 📏 Caixas do tipo "Inline level" não quebram linha, ocupam o espaço necessário e continuam na mesma linha.
13:16 📦 Tags como `
` são exemplos de caixas do tipo "Box level" que quebram para a próxima linha.
13:45 📝 Tags como `` são exemplos de caixas do tipo "Inline level" que não quebram linha e ocupam apenas o espaço necessário.
15:08 🛠️ É importante entender a diferença entre os tipos de caixas e como configurá-las, pois isso será fundamental para a prática nos próximos vídeos.
Made with HARPA AI
Excelente curso !
Aula sensacional, parabéns a todos os envolvidos por disponibilizarem tal conteúdo de forma gratuita e muito obrigado!
Logo mais vou cadastrar como membro, pois o projeto do custo em vídeo é outro nível.
Mano eu entrei na alura mas esse assunto eu não conseguia aprender por lá, sem dúvidas o Guanabara possui a melhor didática e método de ensino da tecnologia da internet!
Só você pra me fazer entender e absorver o conteúdo.
Bom essa ideia é interessante assim se Trabalhar em qualquer área numa empresa vou usar essas expressões
Mais uma ótima aula, Guanabara! Obrigado por repassar tanto conteúdo de maneira inteligente e fácil de entender.
Obrigado professor!
To amando esse curso de HTML
Ótima aula professor, estou ansioso demais para ter mais aulas deste curso maravilhoso.
Que aula top!!!! Parabéns Guanabara!
amo as aulas, muito obrigado
Muito obrigado por tudo Professor e equipe!
Dando like antes de tudo e fortalecendo o melhor canal do youtube!
Vc é o melhor, bora pra cima gafanhoto.
Outra aula incrível, didática fantástica!
Aula excelente!! Obrigada, professor!
Execelente aula! Grato
finalmente entendi oq e border e padding.
vamo galera atingir os 2M logooo
Obrigado demais por essas aulas.
Excelente aula, prof!
Excelente!
cursinho ta muito bom, pena que não sou da área nem sei como entrar na área , mas vou até o final do curso
Vim por causa do sininho do canal mas adorei o conteúdo do vídeo. Agora tenho planos para começar esse curso tbm.
Todo elemento do HTML é renderizado pelo navegador como uma box. Essa box pode ser alterada com as propriedades CSS: margin, border, padding e height/width. O margin nada mais vai movimentar o elemento, para a esquerda, direita, para cima ou para baixo. O border é a borda, dá pra definir o tamanho de borda, cor e modo de exibição. O padding é o preencimento, ele vai colocar o um espaçamento dentro do elemento. Width/height representam o conteúdo do elemento, um texto, uma imagem, um vídeo....
Amigo, você trabalha na área? Estou estudando e gostaria de uma opinião se é muito difícil entrar ou não
Grato.
@@henriquealves6389 Não trabalho na área, mas posso te garantir qie você precisa ter tempo e paciência se você quiser entrar, pois você vai passar por muito estresse, e isso é normal.
@@stomperhk9107 Obrigado pela resposta!
@@henriquealves6389 👍. Mas se você fizer tudo certo, de um ano pra frente você já tá no mercado, mas se você tentar aprender tudo sozinho... Vai demorar demais, infelizmente foi o wue eu fiz.
@@stomperhk9107 Entendo. Eu pretendo iniciar outros cursos online, lá eu terei o apoio da comunidade e do suporte, você acha que assim basta ou seria necessário uma graduação mesmo?
ótimo professor!!!!
Primeiramente gostaria de agradecer e parabenizar pelo seu trabalho!!! Estou inscrito no Curso em Vídeo e estou no Módulo 2 deste curso e não possui este vídeo lá. Já havia feito o curso de HTML/CSS anterior ( quando tu ainda não era grisalho...hehehe ) e me inscrevi no site pois pretendo comprar os créditos de certificados futuramente.
Professor Guanabara o material em PDF ainda continua apenas até o 14, falta os demais pode verificar por favor, Obrigado!
mais um capítulo para explorar
ótima aula!
Muito bom! Obrigada
Obrigado!
Obrigado Guanabara.
Muito bom
Melhor notificação
Boneca Matriosca e é russa ;) grandes videos.
Atento!
📝 *VALE LEMBRAR*
*Parâmetros:*
height -> altura
width -> largura
border -> border
padding -> espaçamento interno em volta do texto, separando da borda
margin -> espaçamento externo em volta da borda
outline -> contorno externo em volta da borda
*Tipos de Caixas:*
*- box-level:* pula pra linha de baixo, se iniciando em uma nova linha, ocupa a largura inteira da janela (100% do view port) e ao fim, pula mais uma linha, antes de começar o novo conteúdo.
ex:
*- inline-level:* inicia a caixa na mesma linha onde termina o texto, tem tamanho suficiente para conter o conteúdo e ao fim, o texto continua na mesma linha após a caixa.
ex:
Top
Sempre com as melhores anotações, práticas e resumidas, muito bom!
Modelo de caixas = Uma boneca-russa.
Todo o elemento visivel na tela, dentro de um site é uma caixa.
border = uma linha que circunda o conteúdo
padding =da borda pra dentro.
margin = da borda pra fora.
outline = contorno
box-level = quebrar linha e criar um box que ocupa a largura inteira. ex: h1-h6; p; main; header; nav ;article; aside; footer; form; video
inline-level = utiliza o espaço ao lado. ex: span; a; code; small; strong; em; sup ou sub; label; button; input; select;
Gostei bastante do vídeo, o curso está ótimo.
Seria legal se você voltasse a nos chamar de gafanhotos. E sinto saudades do Guanacast, podia voltar a fazer.
BOA TARDE!!!! Por favor Guanabara, volta ao sistema antigo, tres aulas por semana.
Conceito geral:
O modelo de caixa do CSS define como os elementos HTML são visualmente renderizados no navegador.
Cada elemento é representado por uma caixa retangular que envolve seu conteúdo.
Componentes da caixa:
Conteúdo (Content):
Refere-se ao próprio texto, imagem ou outros elementos dentro da caixa.
Preenchimento (Padding):
É uma área transparente entre o conteúdo e a borda da caixa.
Controla o espaço entre o conteúdo e a borda da caixa.
Bordas (Border):
Circundam o preenchimento e o conteúdo.
Podem ter estilos, larguras e cores diferentes.
Margens (Margin):
São áreas transparentes fora das bordas.
Controlam o espaço entre a caixa atual e outros elementos na página.
Tamanho total do elemento:
A soma do conteúdo, preenchimento, bordas e margens determina a largura e altura total do elemento.
As dimensões totais podem ser ajustadas usando propriedades CSS, como width (largura) e height (altura).
Layout e espaçamento:
O modelo de caixa permite controlar o espaçamento entre os elementos na página.
As margens são usadas para criar espaçamento entre as caixas de elementos.
O preenchimento interno pode criar espaçamento entre o conteúdo e a borda da caixa.
Box-Level:
Elementos box-level são aqueles que são formatados visualmente como caixas retangulares com propriedades como largura (width), altura (height), margens (margins) e bordas (borders).
Eles ocupam todo o espaço horizontal disponível na largura da sua linha ou contêiner pai, e outros elementos não podem ser posicionados ao seu lado.
Exemplos de elementos box-level incluem , , a , , , , entre outros.
Inline-Level:
Elementos inline-level são aqueles que são formatados em linha com o conteúdo textual e não formam caixas individuais. Em vez disso, eles fluem junto ao texto.
Eles não suportam propriedades de dimensão como largura e altura, nem as propriedades de margem (margin) e borda (border) aplicadas em box-level.
Elementos inline-level são considerados parte do conteúdo e permitem que outros elementos fiquem ao seu lado.
Exemplos de elementos inline-level incluem , , , , , entre outros.
Tudo anotadinho aqui no meu caderno que o Guanabara BRIGOU pra eu comprar...... me senti compelida, na segunda aula já fui na papelaria...kkkkk
Né por nada não mas o Guanabara é outro nível!!!
o guanabara devia criar um curso chamado "Didática Guanabara - Como fazer seus alunos maratonar suas aulas"
12:56 um elemento empoderado 😅
sou o mais recente
Pessoal uma dica aqui de ouro, anota tudo se quiser no bloco de notas da mi cloud(xiaomi), nesse bloco de notas vcs podem criar uma pasta para HTML, CSS e JS, alem de tirar a foto e poder por na propria anotaçao, acredito q tbm da pra por google keep, mas la use marcadores
boa
👏👏👏🙌
O pode ser um box-level?