Le regole fondamentali del CSS (Normal flow, BFC, IFC)

Quando si crea HTML e CSS, capita spesso che il layout non venga composto come desiderato

e che mi sia capitato di fare molte ricerche su Google.

Recentemente, guardando un video di un talk di uno sviluppatore di Zerocho, ho deciso di approfondire le basi del CSS.

- Voglio capire gli elementi di blocco, gli elementi in linea, i margini e l'allineamento.

Li conosco già per esperienza, ma è necessario riordinare le idee.

■ Se devo modificare il CSS, se lo implemento solo in base a ciò che vedo, applicando varie modifiche in modo empirico, possono sorgere problemi con il design reattivo o complicare la manutenzione in futuro.

1. Flusso Normale

- Non c'è niente di particolare a cui pensare. Tutti gli elementi vengono posizionati dall'alto verso il basso e da sinistra verso destra.

* Quando si scrive un articolo su durumis, se si incolla il tag HTML, scompare, sai come risolvere questo problema?;;

- Il tag p crea due blocchi e il tag span viene disegnato su una riga.

2. BFC (Block Formatting Context)

- Viene principalmente utilizzato per comporre il layout. (Si compone un blocco e al suo interno si compone una 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>

- Indipendentemente dalla lunghezza del contenuto, occupa l'intera larghezza dell'elemento padre. (Una riga)

- È possibile inserire un blocco all'interno di un blocco o un elemento in linea.

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

- All'interno del tag div vengono generate due righe.

- I casi in cui viene creato un BFC sono i seguenti. È possibile cercarli di volta in volta.

• Quando l'attributo float non è none
• Quando position è absolute o fixed
• Quando display è inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• Quando overflow non è visible, ecc.
  
  

3. IFC (Inline Formatting Context)

- Viene composto all'interno di un elemento di blocco. (Non per riga)

- Non è possibile impostare direttamente larghezza e altezza. (Occupa solo la dimensione del contenuto.)

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

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

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

Quindi, quando si usa?

- BFC viene utilizzato per gestire l'interazione tra float e l'annullamento del margine.

1. Interazione float

- Se si applica uno stile libero ai figli, il genitore non li conterrà.

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

- In questo caso, si utilizza BFC per comporre il layout.

(Si applica display: inline-block, overflow: auto, float: left, ecc. al tag padre.)

2. Annullamento margine

- In CSS, i margini superiore e inferiore di due tag adiacenti si sovrappongono.

es) Lo spazio tra i due tag div seguenti non è 150px, ma 100px.

- Nella situazione sopra, si aggiunge un nuovo elemento BFC tra i due tag.

ps. Sai come copiare e incollare HTML su durumis?;;