Regras Básicas do CSS (Fluxo Normal, BFC, IFC)

Ao criar HTML e CSS, às vezes o layout não fica como o esperado

e eu recorri muitas vezes ao Google para buscar soluções.

Recentemente, enquanto assistia a um vídeo de conversa com desenvolvedores do Jezerocho, decidi rever os conceitos básicos do CSS.

- Pretendo entender os elementos de bloco, elementos inline, margens e alinhamento.

Embora eu já tenha alguma experiência prática com isso, é importante organizar e documentar esses conhecimentos.

■ Se eu precisar modificar o CSS e simplesmente aplicar diversas soluções empiricamente, apenas com base no que vejo visualmente, isso pode causar problemas em designs responsivos ou tornar a manutenção mais complexa no futuro.

1. Fluxo Normal

- Não há muito o que pensar. Todos os elementos são posicionados de cima para baixo e da esquerda para a direita.

* Quando você cola tags HTML ao escrever um post no durumis, elas desaparecem. Você sabe como resolver isso? ;;

- A tag p cria dois blocos, e a tag span é renderizada em uma única linha.

2. BFC (Block Formatting Context)

- É frequentemente usado para criar layouts. (Cria-se um bloco e, dentro dele, elementos inline.)

- É a forma como os elementos de nível de bloco são empilhados.

- Os elementos de nível de bloco são os seguintes:

<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>

- Independentemente do comprimento do conteúdo, ele ocupa toda a largura do elemento pai. (Uma linha)

- É possível inserir blocos dentro de um bloco ou elementos inline dentro dele.

- É possível definir width, height, margin e padding.

- Duas linhas são geradas dentro da tag div.

- Os casos em que um BFC é gerado são os seguintes. Consulte-os conforme necessário.

• Quando a propriedade float não é none
• Quando a propriedade position é absolute ou fixed
• Quando a propriedade display é inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• Quando a propriedade overflow não é visible, etc.
  
  

3. IFC (Inline Formatting Context)

- É formado dentro de um elemento de bloco. (Sem quebra de linha)

- Não é possível definir width e height diretamente. (Ocupa apenas o tamanho do conteúdo.)

- É possível aplicar apenas padding e margin horizontais.

- É possível incluir apenas elementos inline dentro de um elemento inline.

<span>, <a>, , <img>, <input>, etc.

Então, quando é usado?

- O BFC é usado para lidar com a interação de elementos float ou com o colapso de margens.

1. Interação de elementos float

- Se você aplicar um estilo livre a um filho, o pai não será capaz de envolvê-lo.

(float, position absolute, fixed, display inline-block, etc...)

- Nesse caso, aplique um BFC ao elemento pai para construir o layout.

(Aplique display: inline-block, overflow: auto ou float: left à tag pai.)

2. Colapso de margens

- No CSS, as margens superior e inferior de duas tags adjacentes se sobrepõem.

ex) O espaço entre as duas tags div abaixo não é 150px, mas sim 100px.

- Na situação acima, adicione um novo elemento BFC entre as duas tags.

ps. Você sabe como copiar e colar HTML no durumis? ;;