Les règles de base du CSS (Flux normal, BFC, IFC)

Lorsqu'on conçoit du HTML et du CSS, il arrive que la mise en page ne soit pas aussi bien structurée qu'on le souhaite.

J'ai eu recours à de nombreuses recherches sur Google dans le passé.

Récemment, en regardant une vidéo de discussion avec des développeurs de Zerocho, j'ai décidé d'approfondir les bases du CSS.

- Je souhaite comprendre les éléments de bloc, les éléments en ligne, la marge et l'alignement.

Je connais déjà ces concepts par expérience, mais il est nécessaire de les consigner.

■ Si je dois modifier le CSS en appliquant des éléments au hasard en fonction de ce que je vois, cela peut entraîner des problèmes de conception adaptative ou complexifier la maintenance ultérieure.

1. Flux normal

- Il n'y a rien de particulier à considérer. Tous les éléments sont placés de haut en bas et de gauche à droite.

* Lorsque j'insère des balises HTML dans durumis pour écrire un article, elles disparaissent. Connaissez-vous une solution à ce problème ?;;

- Deux blocs sont créés avec la balise p, et la balise span est affichée sur une seule ligne.

2. BFC (Block Formatting Context)

- Il est principalement utilisé pour structurer la mise en page. (On structure un bloc et on y inclut des éléments en ligne.)

- C'est la façon dont les éléments de niveau bloc sont empilés.

- Les éléments de niveau bloc sont les suivants :

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

- Indépendamment de la longueur du contenu, il occupe toute la largeur de l'élément parent. (Une seule ligne)

- On peut insérer un bloc dans un bloc ou un élément en ligne.

- On peut définir width, height, margin et padding.

- Deux lignes sont générées à l'intérieur de la balise div.

- Voici les cas où un BFC est créé. Il suffit de les consulter au cas par cas.

• Lorsque la propriété float n'est pas none
• Lorsque la propriété position est absolute ou fixed
• Lorsque la propriété display est inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• Lorsque la propriété overflow n'est pas visible, etc.
  
  

3. IFC (Inline Formatting Context)

- Il est structuré à l'intérieur d'un élément de bloc. (Pas par ligne)

- On ne peut pas définir directement width et height. (Il prend la taille du contenu.)

- Seuls padding et margin horizontaux peuvent être appliqués.

- On ne peut inclure que des éléments en ligne dans un élément en ligne.

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

Alors, quand est-ce qu'on l'utilise ?

- Le BFC est utilisé pour gérer les interactions float et l'effondrement des marges.

1. Interaction float

- Si on applique un style libre à un enfant, le parent ne peut pas l'entourer.

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

- Dans ce cas, on utilise un BFC pour structurer la mise en page.

(On applique display: inline-block, overflow: auto, float: left, etc. à la balise parent.)

2. Effondrement des marges

- En CSS, les marges supérieure et inférieure de deux balises adjacentes se chevauchent.

Exemple : l'espacement vertical entre les deux balises div ci-dessous est de 100 px et non de 150 px.

- Dans ce cas, on ajoute un nouvel élément BFC entre les deux balises.

PS : savez-vous comment copier-coller du code HTML dans durumis ?;;