Quando desenho HTML CSS, o layout não é tão bom quanto eu esperava,

Tive muitas vezes que procurar no Google.

Recentemente, enquanto assistia ao vídeo do desenvolvedor do Zerocho, decidi aprender sobre os fundamentos do CSS.

- Quero entender elementos de bloco, elementos inline, margem e alinhamento.

Já sei disso por experiência, mas preciso organizar.

■ Se precisar modificar o css, aplicando várias coisas empiricamente e implementando apenas o que é visível, pode haver problemas com o design responsivo ou pode ficar complicado de manter no futuro.

1. Fluxo normal

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

* Quando você cola uma tag html ao escrever no durumis, ela desaparece. Você sabe como resolver isso?

 <div>
     <p>Primeiro parágrafo</p>
     <p>Segundo parágrafo</p>
     <span>Elemento inline 1</span>
     <span>Elemento inline 2</span>

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

 Primeiro parágrafo
 Segundo parágrafo

2. BFC (Contexto de formatação de bloco)

- É usado principalmente para construir layouts. (Construa blocos e, em seguida, construa elementos inline dentro deles.)

- É 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>

- Ocupa a largura total do elemento pai, independentemente do comprimento do conteúdo dentro do elemento. (uma linha)

- Você pode colocar um bloco dentro de um bloco ou um elemento inline dentro de um bloco.

- Você pode definir largura, altura, margem e preenchimento.

 <div style="padding :10px;"> 
     <h1>Título</h1>
     <p>Parágrafo curto. </p>

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

- Quando um BFC é criado é o seguinte. Basta procurar a cada momento.

• Quando o atributo float não é none
• Quando a posição é absoluta ou fixa
• Quando o display é inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• Quando o overflow não é visível, etc.
  
  

3. IFC (Contexto de formatação inline)

<p>
    Olá! <strong> durumis </strong> o segundo artigo!
    <span style="color: pink;">Gosto</button> pressione o botão.

- É construído dentro de um elemento de bloco. (sem divisão de linha)

- A largura e a altura não podem ser definidas diretamente. (Ocupa o tamanho do conteúdo.)

- Somente preenchimento e margem horizontais podem ser aplicados.

- Somente elementos inline podem ser incluídos dentro de elementos inline.

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

Então, quando você o usa?

- bfc é usado para lidar com interação float ou margem de compensação.

1. Interação flutuante

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

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

- Neste caso, você dá ao elemento pai um bfc para construir o layout.

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

<div class="pai" style="display: inline-block;">
    <div class="filho" style="float: left;">...</div>

2. Margem de compensação

- css faz com que a margem superior e inferior de duas tags adjacentes se sobreponham.

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

<div style="margin-bottom: 100px;">
..
</div>
<div style="margin-top: 50px;">
,,

- Adicione um novo elemento bfc entre as duas tags na situação acima.

<div style="margin-bottom: 100px;"></div> 

<div style="overflow: auto;"></div> <!-- novo bfc-->

ps. Você sabe como colar html no durumis?