Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Não entendi o comportamento de width e background no exemplo

Não entendi porque o comportamento do background do mapa mostrado em 3:41 mudou quando foi envolvido na tag div

O que eu entendi do comportamento foi:

  • O background vermelho foi aplicado sobre a largura da section com a classe mapa, que era elemento pai do iframe, por isso ficou sobrando espaço nos lados

  • Quando se removeu a definição de width da classe mapa , pelo que entendi a width 100% definida no iframe passou a ser sendo calculada sobre a largura da tela como elemento pai raiz

  • Então criou-se a div com a classe mapa-conteudo para ser elemento pai do iframe e se definiu witdh ali. Agora o 100% do iframe deveria ser aplicado a largura desse elemento pai, presumo, o que fez o mapa centralizar

Se esse meu raciocínio está correto o novo background laranja mostrado em 5:34 também deveria se aplicar à largura do elemento pai (div) , como aconteceu com a width do iframe. Mas não foi o que aconteceu :/

Não entendi qual o erro do meu raciocínio e como explicar esse comportamento... A Hierarquia dos elementos não é relevante? Só as classes estão importando? Como funciona isso?

2 respostas
solução!

Boa noite, Douglas! Como vai?

O background laranja foi aplicado na classe .mapa e quem tem essa classe é a section e não a div que envolve o iframe. Por isso o laranja fica na largura toda da página.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Ok, vacilo meu... UHAUhaUAH Não acompanhei o raciocínio na hora mas agora revendo percebi

Obrigado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software