Quando si disegna HTML CSS, a volte il layout non è così buono come si pensa

Ho avuto esperienze in cui ho cercato molto su Google.

Di recente, guardando il video del Developer Talk di Zerocho, ho deciso di saperne di più sulle basi del CSS.

- Voglio capire gli elementi di blocco, gli elementi in linea, il margine e l'allineamento.

Lo so già per esperienza, ma ho bisogno di organizzarlo.

■ Devo modificare il css, ma se lo implemento solo visivamente applicando cose diverse in base all'esperienza, si verificheranno problemi con il design reattivo o sarà più complesso da manutenere in futuro.

1. Flusso normale

- Non c'è niente di speciale da considerare. Tutti gli elementi sono posizionati dall'alto verso il basso e da sinistra a destra.

* Quando si scrive un articolo su durumis, se si incolla un tag html, scompare, sapete come risolvere;;

 <div>
 	<p>Primo paragrafo</p>
 	<p>Secondo paragrafo</p>
 	<span>Elemento in linea 1</span>
 	<span>Elemento in linea 2</span>

- Vengono creati due blocchi con il tag p e il tag span viene disegnato su una riga.

 Primo paragrafo
 Secondo paragrafo

2. BFC (Block Formatting Context)

- Viene solitamente utilizzato per costruire il layout. (Costruisci il blocco e al suo interno costruisci la linea.)

- È il modo in cui gli elementi di livello blocco vengono impilati.

- Gli elementi di livello blocco sono i seguenti.

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

- Occupano l'intera larghezza dell'elemento padre indipendentemente dalla lunghezza del contenuto. (una linea)

- È possibile inserire blocchi o elementi in linea all'interno del blocco.

- È possibile impostare larghezza, altezza, margine e riempimento.

 <div style="padding :10px;"> 
 	<h1>Titolo</h1>
 	<p>Breve paragrafo. </p>

- Viene creata una riga all'interno del tag div.

- I casi in cui viene creato un BFC sono i seguenti. Basta cercare di volta in volta.

• Quando l'attributo float non è none
• Quando la posizione è assoluta o fissa
• Quando la visualizzazione è inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• Quando il valore di overflow non è visibile, ecc.
  

3. IFC (Inline Formatting Context)

<p>
	Ciao! <strong> durumis </strong> secondo articolo!
	<span style="color: pink;">Mi piace</button> clicca sul pulsante.

- È costruito all'interno di un elemento di blocco. (unità di linea X)

- Non è possibile impostare direttamente la larghezza e l'altezza. (occupa le dimensioni del contenuto)

- È possibile applicare solo il padding e il margine orizzontali.

- È possibile includere solo elementi in linea all'interno di un elemento in linea.

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

Allora, quando si usa?

- Il bfc viene utilizzato per gestire le interazioni di galleggiamento o l'annullamento del margine.

1. Interazione di galleggiamento

- Se si applica uno stile libero ai figli, i genitori non possono racchiuderli.

(float, posizione assoluta, fissa, display inline-block, ecc...)

- In questo caso, si utilizza il bfc sull'elemento padre per costruire il layout.

(Applica display: inline-block, overflow: auto, float: left al tag genitore)

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

2. Annullamento del margine

- Nel css, il margine superiore e inferiore di due tag adiacenti si sovrappone.

ad esempio) La spaziatura verticale tra i due tag div seguenti non è 150px ma 100px.

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

- In questa situazione, si aggiunge un nuovo elemento bfc tra i due tag.

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

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

ps. Sai come copiare e incollare l'html di durumis;;