Wanneer je met HTML en CSS werkt, gebeurt het wel eens dat je layout niet zo goed wordt als je wilt.

Ik heb in het verleden veel vragen gesteld op Google.

Onlangs keek ik naar een video van ontwikkelaar Zerocho over CSS en besloot ik de basisprincipes te bekijken.

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

Ik weet het al empirisch, maar ik moet het opschrijven.

■ Als je CSS moet aanpassen en je probeert dingen op basis van ervaringen te implementeren, kan dit problemen veroorzaken met responsief ontwerp of het later moeilijk maken om te onderhouden.

1. Normale stroom

- Je hoeft er niet over na te denken. Alle elementen worden van boven naar beneden en van links naar rechts geplaatst.

* Weet je hoe je HTML-tags in Durumis kunt plakken zonder dat ze verdwijnen? ;;

 <div>
     <p>Eerste alinea</p>
     <p>Tweede alinea</p>
     <span>Inline-element 1</span>
     <span>Inline-element 2</span>

- Er worden twee blokken met p-tags gemaakt en de span-tags worden in één regel getekend.

 Eerste alinea
 Tweede alinea

2. BFC (Block Formatting Context)

- Dit wordt meestal gebruikt om layouts te maken. (Maak een blok en plaats daarin een inline-element.)

- De manier waarop blokelementen worden gestapeld.

- Blokelementen zijn als volgt:

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

- De elementen nemen de volledige breedte van het bovenliggende element in, ongeacht de lengte van de inhoud. (één regel)

- Je kunt blokken binnen blokken plaatsen of inline-elementen plaatsen.

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

 <div style="padding :10px;"> 
     <h1>Titel</h1>
     <p>Dit is een korte alinea. </p>

- Er worden twee regels gemaakt in de div-tag.

- BFC wordt gegenereerd in de volgende gevallen. Zoek het van tijd tot tijd op.

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

3. IFC (Inline Formatting Context)

<p>
    Hallo! <strong> Durumis </strong> tweede artikel!
    <span style="color: pink;">Leuk</button> knop indrukken.

- Dit wordt gemaakt binnen een blokelement. (geen regelafstand)

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

- Je kunt alleen horizontale padding en marge toepassen.

- Je kunt alleen inline-elementen in inline-elementen plaatsen.

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

Dus wanneer gebruik je het?

- bfc wordt gebruikt om interacties met float of margin-compensatie te behandelen.

1. Interactie met float

- Als je een onafhankelijke stijl aan een kind geeft, kan de ouder het niet insluiten.

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

- Geef het bovenliggende element in deze gevallen een bfc om de layout te maken.

(Pas display: inline-block, overflow: auto, float: left etc. toe op de bovenliggende tag.)

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

2. Margevergoeding

- CSS overlapt de bovenste en onderste marges van twee aangrenzende tags.

Bijv. De verticale afstand tussen de twee div-tags hieronder is 100px, niet 150px.

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

- Voeg een nieuw bfc-element toe tussen de twee tags in deze situatie.

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

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

ps. Weet je hoe je HTML naar Durumis kunt plakken? ;;