Comment comprendre le positionnement CSS ?

La propriété CSS Positioning permet de positionner des éléments.

Positionnement CSS et flottant

CSS fournit certaines propriétés de positionnement et de flottement. En utilisant ces propriétés, vous pouvez créer une disposition de colonnes et combiner une partie de la disposition. L'autre partie se chevauche et peut également accomplir des tâches qui ont souvent nécessité l'utilisation de plusieurs formulaires au fil des ans. (Apprentissage recommandé : Tutoriel d'introduction CSS)

L'idée de base du positionnement est simple. Elle permet de définir où la boîte de l'élément doit apparaître par rapport à sa position normale, ou par rapport à son parent. La position d'un élément, d'un autre élément ou même de la fenêtre du navigateur elle-même.

Evidemment, cette fonction est très puissante et surprenante. Il ne devrait pas être surprenant de savoir que les agents utilisateurs prennent bien mieux en charge le positionnement dans CSS2 que d'autres aspects.

Les flotteurs, quant à eux, ont été introduits pour la première fois dans CSS1 et étaient basés sur une fonctionnalité ajoutée par Netscape aux débuts du Web. Flotter n'est pas exactement un positionnement, mais ce n'est certainement pas non plus une disposition de flux normale. Nous clarifierons la signification de float dans un chapitre ultérieur.

Tout est une boîte

Un élément div, h1 ou p est souvent appelé élément de niveau bloc. Cela signifie que ces éléments apparaissent comme un bloc de contenu, une « block box ». En revanche, des éléments tels que span et strong sont appelés « éléments en ligne » car leur contenu apparaît dans une ligne, une « boîte en ligne ».

Vous pouvez changer le type de boîte générée en utilisant la propriété display. Cela signifie que vous pouvez faire en sorte que les éléments en ligne (tels que les éléments ) se comportent comme des éléments de niveau bloc en définissant la propriété display sur block.

Vous pouvez également définir l'affichage sur aucun afin que l'élément généré n'ait aucun cadre. De cette façon, la boîte et tout son contenu ne sont plus visibles et ne prennent pas de place dans le document.

Mais dans un cas, un élément de niveau bloc est créé même sans définition explicite. Cela se produit lorsque vous ajoutez du texte au début d'un élément de niveau bloc (comme un div). Même si le texte n'est pas défini comme un paragraphe, il sera traité comme tel :

<div>
some text
<p>Some more text.</p>
</div>

Dans ce cas, la boîte est appelée boîte de bloc sans nom car elle n'est pas associée à un élément spécifiquement défini. Une situation similaire se produit avec les lignes de texte pour les éléments

de niveau bloc. Supposons que vous ayez un paragraphe contenant trois lignes de texte. Chaque ligne de texte forme une case sans nom. Vous ne pouvez pas appliquer directement des styles à des blocs ou à des zones de ligne sans nom, car il n'y a aucun endroit pour appliquer des styles (notez que les zones de ligne et les zones en ligne sont deux concepts différents). Cependant, il est utile de comprendre que tout ce que vous voyez à l’écran forme une sorte de boîte.

Mécanisme de positionnement CSS

CSS dispose de trois mécanismes de positionnement de base : flux normal, positionnement flottant et absolu.

Toutes les boîtes sont positionnées en flux normal sauf indication contraire. Autrement dit, la position d'un élément dans le flux normal est déterminée par la position de l'élément dans (X)HTML.

Les boîtes au niveau des blocs sont disposées les unes après les autres de haut en bas, et la distance verticale entre les boîtes est calculée à partir de la marge verticale de la boîte.

Les boîtes en ligne sont disposées horizontalement dans une rangée. Leur espacement peut être ajusté à l’aide d’un remplissage horizontal, de bordures et de marges. Toutefois, le remplissage vertical, les bordures et les marges n'affectent pas la hauteur de la boîte en ligne. La boîte horizontale formée par une ligne est appelée boîte de ligne. La hauteur d'une boîte de ligne est toujours suffisamment élevée pour accueillir toutes les boîtes en ligne qu'elle contient. Cependant, la définition de la hauteur de ligne peut augmenter la hauteur de cette boîte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!