Espaçamentos e a mágica do CSS Box Model | Masterclass #10
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- Fala Dev Mayk Brito na área! 💜
Você já ouviu falar do conceito de caixas, containers ou Box Model no CSS?
Talvez não, mas certamente já precisou ou precisa trabalhar o tempo todo com espaçamentos no seu layout correto?
Pois bem! Vamos estudar um pouco esse conceito que se torna muito importante ao tratar com espaçamentos, tamanhos e montagem dos elementos aqui no CSS.
Entender que os elementos são enxergados como caixas irá fazer um baita sentido e te ajudará a dar o próximo passo no CSS.
Espero que esse conteúdo te ajude e bora codar! 🚀
-----
Acompanhe a Rocketseat nas redes sociais:
Site: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Ouça também:
Spotify: spoti.fi/2PwXeUp
Anchor.fm: anchor.fm/faladev
Apple Podcasts: apple.co/2pReOrN
Google Podcast: bit.ly/2Cgj077
Fala Maykão, como sugestão, seria legal um vídeo sobre HTML semântico, por exemplo, quando usar corretamente section, aside, nav dentre outras básicas ao invés da gente por div pra tuda hahaha. Parabéns pelo vídeo e grande abraço!
rt
Canal Curso em Vídeo tem um curso bem básico de HTML e CSS que ensina essa parte mais semântica do HTML
Aqui tem um vídeo bem legal sobre semântica HTML: th-cam.com/video/nVTqo48Fo3c/w-d-xo.html
Que aula sensacional, Mayk. Quando se aprende os fundamentos, os porquês, tudo se torna mais fácil e empolgante. Vídeos assim até ajudam as pessoas a não desistirem de programação. Parabéns, Mayk e equipe Rocket!
Muito obrigado pelo feedback Jonatas!!! 💜😍😍
cara muito bom, vc é muito dinâmico na explicação parabéns. Uma sugestão poderia trazer aula sobre scss
Que vídeo bom. Muito explicativo embora meio rápido pra mim kkk. Mas aprendi o que precisava!
Eu tava aqui quase arremessando o computador na parede, mas o seu video me salvou! Que aula fenomenal, fico eternamente grato.
Essas aulas são ouro pra programadores iniciantes, valeu rocketseat
Muito bom, aprendi dms com esse vídeo!!! Obg Maykii
Já assisti várias aulas do Mayk Brito, mas eu sempre me surpreendo com a excelente didática dele.
Pela primeira vez consegui entender os conceitos de padding, border a fundo. Excelente aula!
Parabéns Mayk, sua didática de ensino é muito boa! já consegui aprender muitos conteúdos que antes tinha dificuldade. Obrigado pela excelente aula e continue com o bom trabalho :)
Que massa Emannuel!! Muito obrigado pelo feedback! 💜💜
Excelente ! Tudo Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
Faaaaaala, dev! Beleza? Que massa que curtiu! É tudo preparado com muito carinho pra vocês! Valeu pelo feedback! 😍 💜
Legal os video Mayk, espero que continúe trazendo videos sobre CSS e responsividade.
valeu cara, muito boa aula, nao tinha entendido certo sobre box model, e vi que é bastante necessario saber como usar os espaçamentos em paginas, valeu pela aula!
boa aula curti bastante
CSS tem sido uma dor de cabeça principalmente em posicionamento de elementos obrigado maykão por trazer este conteudo .
Bem na hora que precisava, obrigado
Caraca, com você ensinando parece fácil ... Muito bom pra quem sofre com o front-end! Traz mais dicas, tipo efeitos, animações, etc
Parabéns, excelente!
SENSACIONAL !! Consegui entender muito bem o função do box-sizing, meu sonho seria um vídeo com posicionamento de elementos com flexbox!! Nova inscrita 💜
muito obrigada,mano! ajudou muito
fiz um workshop seu, agora to caçando aulas suas, muito top!
Vc explica muito bem, Parabéns
Curtiu, Cintia? Valeu demais pelo feedback! 💜 🚀
Vídeo maravilhoso, ajudou muito, muito obrigado, esse conteúdo estava muito obscuro na minha mente e agora clareou.
muito bom, obrigado, me ajudou bastante, estava batendo cabeça aqui num layout, já que não sou muito bom em front-end, hehe
Show man!. Só por mais vídeos com suas dicas..
Simplesmente incrível a didática desse fera, vulgo Mayk Brito. rs
Ele é brabo demais, Jefferson! 😍 💜
Top, aprendi aprendi em 15 minutos o q não aprendi em um curso.
Wooow! Bacana demais ler isso, Nelson! 😍 💜
fala da tag nao sei qual a diferença entre só sei que uma quebra linha e a outra nao, ne?
Muito bom o conteúdo, irá ajudar muitos iniciantes e pessoas com dúvidas, obrigado !!!!!
Mais uma aula fenomenal do Maykão, o cara manda muito bem!!
Ele arrasa, né? 💜
Você é fera, Mayk. Gratidão!
Mayk Brito é uma maquina de fazer CSS complexo ser convertido para CSS mel na chupeta :D Parabens Mayk SUCESSO!
Excelente aula, muito esclarecedora!
Muito bom, tirou muitas dúvidas
Shooow, Marcos! 💜 🚀
Comprei um curso de HTML E CSS por um preço razoavelmente alto e que não explica 1/3 do que aprendi aqui. Parabéns irmão! Acompanharei outros vídeos.
Voltando aqui pra falar sobre essa aula incrível! Assistindo ela mais uma vez e dando aquela revisada :D
Fala Marykão! Parabéns pelo seu trabalho.
Uma dica, seria interessante você falar sobre os bugs que acontecem no Internet Explorer, por ele não compreender algumas propriedades do Flex.
Parabéns pelo ótimo conteúdo!! Fez muito sentido para mim e eu consegui entender muitas coisas que antes pareciam impossíveis. Muito obrigado!!
Vídeo top e muito bem explicado! Show de bola..
Top demais valeu
Que show este video assim, faz mais videos assim mais especificos sobre CSS e HTML! Valeww
Muito bom o conteúdo. Parabéns pela didática!
muito bom
*Obrigado Maykão me ajudou bastante*
Que aula sensacional! Parabéns, irmão
Wooow! Vaaleu, Cadu! 😍
29:17 nas laterais o margin: auto funciona pq o css tem acesso ao valor máximo do WIDTH da página e consegue calcular o centro, já o HEIGHT máximo da página é defeituoso(ao meu ver) e o css não consegue calcular o HEIGHT máximo da página.
Tô errado? Bota uma div em um body vazio, sem estilo prévio, e bota width: 100%; height: 100%; pra ver. A div preenche o width todo, mas o height não.
Mas pq? Pois, por padrão, o componente raiz da página tem width = largura da janela do navegador, mas isso não acontece no height. O height do componente raiz é indefinido por padrão.
@Vinicius Isso mesmo. Pq quando defini um height que tenha valor diferente de indefinido pra um comportamento, o componente filho consegue calcular o height baseado no pai...
Muito Bom
Que massa que curtiu! Valeeu Augusto! 💜
Sensacional!
Muito bom conteúdo!! Valeu!
top demais não perco mais tempo ajustando margin, padding e ficando nervoso pq não funcionou kkkk
pq? o facilita e substitui?
Salvou demaiiiis
Maykão, tem algum video do boxmodel para ensinar os modelos de alinhamento com css box model ?
Adorei o video!
Para os ícones do terminal funcionarem no visual code, é preciso usar uma das fontes nerd. 👊🏽
Show de bola... ops... de código
Clean
💜
Fala Maikão, qual extensão esta usando para grifar os erros/warnings no css ( como as propriedades ignoradas ). Valeu!!!
02:15 - Mas os elementos não são o conteúdo? Tipo, tag são tags, ex: é uma tag, já a imagem que aparece é o elemento, a mesma coisa para o audio, o audio é o elemento?
então o (box-sizing: border-borx) faz o elemento deixar de adicionar a propriedade de padding pra fora do elemento e coloca pra dentro do elemento ? é isso ?
Faaala, dev! 💜💜 Exatamente.. a propriedade border-box faz com que o tamanho seja a soma do conteúdo com border, padding 💜
Cara, tudo bem ? só um pergunta bem idiota, mas enfim.
Qual a configuração você esta usando em seu Vs Code para não haver linhas em branco entre as próximas tag's, por exemplo no meu Vscode fica uma linha em branco entre a tag de fechamento do para o fechamento da tag . Não sei se você conseguiu entender rsrs, é algum tipo de layout especifico dos Macs ? no meu caso eu estou o Vs no Windows. Tentei achar aqui nas confiurações porem só acho a opção de mudar o tamanho e a tipografia da fonte.
Qual a diferença entre: display: inline-block e display: flex ?
29:40 seria 20% de que?
Como sempre as melhores dicas..
Qual o nome desse editor?
VS Code
Visual Studio Code
achei que meu discord tava aberto varias vezes kkk até sacar que era no vídeo rsrsrs
ALGUEM PODE ME AJUDAR? ESTOU USANDO ESSE CODIGO PRA ALTERAR O ESPAÇAMENTO ENTRE AS LINHAS DO MEU BLOG E NÃO FUNCIONA... MAS QUANDO COLOCO SÓ MARTIN OU MARGIN-LEFT OU RIGHT AI FUNCIONA.. alguem sabe porque?
.entry-content {
margin-bottom:48px !important;
}
e o outline? no que ele impacta dentro dessa estrutura?
Nada; outline não faz parte de Box Model e não "ocupa" nenhum espaço (ou seja, não influencia no tamanho ou posição da "caixa").
Justamente por isso, é bastante comum em debugs de CSS, porque dá para destacar elementos sem influenciar seu posicionamento/flow.
primeira linha de CSS dos meu projetos é *box-sizing: border-box;* kkkkkk
box-sizing: border-box faz parte do meu my_reset pessoal
Eu não conhecia essa dica. Sempre fiquei muito puto por colocar o padding e o layout zoar todo, já tinha pesquisado na internet sobre o que poderia ser e nunca achei a resposta. Ainda bem que cliquei nesse vídeo, minha vida melhorou 100% agora kkkkkkk.
@@GuilhermeReisKart aprendi a pouco tempo também. Mas lembre-se do porque ele teve que usar o "overwerflow"... Xiii esqueci como escrever...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
eu vou ficar olhando quantas vezes for necessário até entender isso kkkk
Tenho certeza que logo vai entender! 💜
Uma das coisas mais enjuadas de pegar
Só consigo dar um like. Queria dar 70 =/
parabéns não entendi nada
Opaaaa, tenta ver de novo dando pausas e anotando os pontos mais importantes! 💜
É um pouco complexo no começo mesmo... 😥
Passando pra vc avisar que eu aprendi Rocketseat kkkkkk