Bem vindo de volta! Se você acompanha semana após semana, deve ter notado que essa série teve uma pequena pausa! Se você está acompanhando, sinto muito!

Alguns dos meus trabalhos em um projeto pessoal ocuparam uma parte significativa da minha atenção, além disso, acabei de me casar, então vou usar isso como desculpa. Se você quiser ver no que estou trabalhando, confira Build In Public: Roast, série que documenta meu processo desde o conceito até a implantação de um aplicativo que rastreia seus assados ​​​​caseiros.

Tudo bem, tudo bem. Pare de se autopromover, vamos voltar a mover nossas caixas pela tela!

Obtenha seu CodePen!

Assim como na primeira parte, você poderá acompanhar seu modelo CodePen! Se você ainda não leu a Parte 1, confira aqui. E se precisar de um novo modelo, clique aqui.

Qual é a propriedade de exibição?

Com as propriedades de exibição e posição, pode parecer que elas estão afetando a mesma coisa: onde algo aparece na página da web. Mas eles têm uma diferença sutil. As propriedades de posicionamento controlam como um elemento é posicionado no documento que o contém. Seja no fluxo normal, em relação a outros elementos, ou ignorando tudo!

Display é diferente porque afeta a

forma como o layout é interpretado: o tipo de exibição. A propriedade display para CSS é um pouco complicada no início, porque ela não apenas define o tipo de exibição do elemento ao qual é aplicado (um tipo de exibição externo), mas também define os comportamentos de exibição dos elementos contidos na propriedade do elemento é aplicado a (um tipo de exibição interno).

Inline vs. Bloco

A maioria dos elementos que usamos até agora tem um tipo de bloco de exibição externa padrão. Isso significa que nenhum outro elemento ocupará o mesmo espaço vertical que esse elemento; efetivamente, qualquer novo elemento adicionado criará uma "nova linha".

Nem todos os elementos são assim. Por exemplo, as tags