Lorsque je dessine du HTML CSS, la mise en page n'est pas aussi bien organisée que je le souhaite

J'ai souvent posé des questions à Google.

Récemment, j'ai regardé une vidéo de développeur de Zerocho et j'ai décidé d'apprendre les bases du CSS.

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

Je le sais déjà par expérience, mais j'ai besoin de l'organiser.

■ Il faut modifier le css, mais si on applique des choses de manière empirique en fonction de ce qu'on voit, des problèmes peuvent survenir dans la conception responsive, ou le processus de maintenance peut devenir complexe plus tard.

1. Flux normal

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

* Lorsque vous écrivez du texte dans durumis, si vous collez des balises html, elles disparaissent. Connaissez-vous la solution ?;;

 <div>
 	<p>Premier paragraphe</p>
 	<p>Deuxième paragraphe</p>
 	<span>Élément en ligne 1</span>
 	<span>Élément en ligne 2</span>

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

 Premier paragraphe
 Deuxième paragraphe

2. BFC (Block Formatting Context)

- Il est principalement utilisé pour composer la mise en page. (Composer un bloc et y inclure des éléments en ligne.)

- Il s'agit du mode d'empilement des éléments de niveau bloc.

- 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 de l'élément, il occupe toute la largeur de l'élément parent. (Une ligne)

- Vous pouvez insérer un bloc dans un bloc ou un élément en ligne.

- Vous pouvez définir la largeur, la hauteur, la marge et le rembourrage.

 <div style="padding :10px;"> 
 	<h1>Titre</h1>
 	<p>Court paragraphe. </p>

- Deux lignes sont générées dans la balise div.

- Voici les moments où un BFC est créé. Il faut le rechercher au cas par cas.

• Si l'attribut float n'est pas none
• Si la position est absolute ou fixed
• Si l'affichage est inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• Si le débordement n'est pas visible, etc.
  

3. IFC (Inline Formatting Context)

<p>
	Bonjour ! <strong> durumis </strong> Deuxième article !
	<span style="color: pink;">J'aime</button> cliquez sur le bouton.

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

- La largeur et la hauteur ne peuvent pas être définies directement. (Il prend la taille du contenu.)

- Vous ne pouvez appliquer que le rembourrage et la marge horizontaux.

- Vous ne pouvez inclure que des éléments en ligne à l'intérieur d'un élément en ligne.

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

Alors, quand l'utiliser ?

- Le bfc est utilisé pour gérer l'interaction des flotteurs ou la suppression de la marge.

1. Interaction des flotteurs

- Si vous appliquez un style libre à un enfant, le parent ne peut pas l'envelopper.

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

- Dans ce cas, appliquez un bfc à l'élément parent pour composer la mise en page.

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

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

2. Suppression de la marge

- Dans le css, la marge supérieure et inférieure de deux balises adjacentes se chevauchent.

ex) L'espacement entre les deux balises div ci-dessous est de 100px, et non de 150px.

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

- Dans cette situation, ajoutez un nouvel élément bfc entre les deux balises.

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

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

ps. Savez-vous comment copier-coller du html dans durumis ?;;