Basisregels van CSS (Normale flow, BFC, IFC)

Als je HTML en CSS ontwerpt, gebeurt het wel eens dat de lay-out niet helemaal naar wens is

Ik heb het in het verleden vaak op Google gezocht.

Onlangs keek ik naar een ontwikkelingsvideo van Zerocho en besloot ik om de basisprincipes van CSS te bestuderen.

- Ik wil blokelementen, inline-elementen, marges en uitlijning begrijpen.

Ik weet het al empirisch, maar het is nodig om het op te schrijven.

■ Als ik CSS moet aanpassen en het empirisch toepas, alleen op basis van wat ik zie, dan kan dit leiden tot problemen met responsief ontwerp of een complexere onderhoudssituatie in de toekomst.

1. Normale Flow

- Er is niets bijzonders om over na te denken. Alle elementen worden van boven naar beneden en van links naar rechts geplaatst.

* Bij durumis verdwijnt de html-tag die ik invoeg bij het schrijven van een bericht, weet je hoe je dit kunt oplossen?;;

- Er worden twee blokken gegenereerd met de p-tag en de span-tag wordt in één regel getekend.

2. BFC (Block Formatting Context)

- Wordt meestal gebruikt bij het ontwerpen van lay-outs. (Blokken structureren en daarbinnen inline-elementen.)

- De manier waarop blokelementen worden gestapeld.

- Blokelementen zijn als volgt.

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

- Ongeacht de lengte van de inhoud neemt het de volledige breedte van het bovenliggende element in beslag. (één regel)

- Je kunt blokken in blokken plaatsen of inline-elementen toevoegen.

- Je kunt width, height, margin en padding instellen.

- Er worden twee regels gegenereerd binnen de div-tag.

- Wanneer een BFC wordt gegenereerd, is als volgt. Je kunt het steeds opzoeken.

• Wanneer de float-eigenschap niet none is
• Wanneer de position-eigenschap absolute of fixed is
• Wanneer de display-eigenschap inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid is
• Wanneer de overflow-eigenschap niet visible is, etc.
  
  

3. IFC (Inline Formatting Context)

- Wordt gevormd binnen een blokelement. (Geen regelafstand)

- Je kunt width en height niet rechtstreeks instellen. (Neemt alleen de grootte van de inhoud in beslag.)

- Alleen horizontale padding en marge kunnen worden toegepast.

- Je kunt alleen inline-elementen in een inline-element opnemen.

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

Dus wanneer gebruik je het?

- BFC wordt gebruikt om interacties met float en het opheffen van marges af te handelen.

1. Float-interactie

- Als je een vrij stijlvolle stijl aan een kind toevoegt, kan de ouder het niet omsluiten.

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

- In dit geval wordt de lay-out geconfigureerd door een BFC aan het bovenliggende element toe te voegen.

(Pas display: inline-block, overflow: auto of float: left toe op de oudertag.)

2. Marge-opheffing

- CSS overlapt de boven- en ondermarge van twee aangrenzende tags.

Voorbeeld) De boven- en ondermarge tussen de twee div-tags hieronder is niet 150px, maar 100px.

- In de bovenstaande situatie wordt een nieuw BFC-element toegevoegd tussen de twee tags.

ps. Weet je hoe je html kunt kopiëren en plakken in durumis?;;