Comment utiliser l'identifiant pour le positionnement en CSS

Le sélecteur

id peut spécifier un style spécifique pour les éléments HTML marqués avec un identifiant spécifique.

Le sélecteur d'identifiant est défini avec "#". Pour les deux sélecteurs d'identifiant ci-dessous, le premier peut définir la couleur de l'élément en rouge, et le second peut définir la couleur de l'élément en vert :

#red {color:red;}
#green {color:green;}

Dans le code HTML suivant, l'élément p avec l'attribut id de rouge est affiché en rouge, et l'élément p dont l'attribut id est vert est affiché en vert.

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

Remarque : L'attribut id ne peut apparaître qu'une seule fois par document HTML.

CSS fournit certaines propriétés de positionnement et de flottement. Avec ces propriétés, vous pouvez créer une disposition de colonnes, superposer une partie de la disposition avec une autre et également faire ce qui a été. couramment effectuées au fil des ans. Tâches qui nécessitent l’utilisation de plusieurs formulaires.

L'idée de base du positionnement est simple, elle permet de définir où doit apparaître la case d'un élément par rapport à sa position normale, ou par rapport à un élément parent, un autre élément ou même la fenêtre du navigateur elle-même. Evidemment, cette fonctionnalité 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.

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.

Propriété de position CSS

En utilisant la propriété position, nous pouvons choisir parmi 4 types de positionnement différents, qui affectent la façon dont la boîte d'élément est générée.

La signification de la valeur de l'attribut position :

statique

La boîte d'élément est générée normalement. Les éléments de niveau bloc créent une zone rectangulaire dans le cadre du flux de documents, tandis que les éléments en ligne créent une ou plusieurs zones de ligne placées dans leur élément parent.

relatif

La boîte à éléments est décalée d'une certaine distance. L'élément conserve sa forme non positionnée et l'espace qu'il occupait initialement. La zone d'élément

absolu

est complètement supprimée du flux de documents et positionnée par rapport à son bloc conteneur. Le bloc conteneur peut être un autre élément du document ou le bloc conteneur initial. L'espace précédemment occupé par l'élément dans le flux de documents normal est fermé, comme si l'élément n'existait pas. L'élément génère une boîte au niveau du bloc après le positionnement, quel que soit le type de boîte qu'il a généré à l'origine dans le flux normal. La boîte d'éléments

fixed

se comporte comme si la position était définie sur absolue, sauf que son bloc conteneur est la fenêtre elle-même.

Conseil : le positionnement relatif est en fait considéré comme faisant partie du modèle de positionnement du flux normal, puisque la position d'un élément est relative à sa position dans le flux normal.

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!