Liste complète des propriétés de mise en page CSS : affichage, position et float

div { display: block; }

1.2. Les éléments inline
inline n'occuperont pas une ligne par eux-mêmes, occuperont seulement l'espace dont ils ont besoin. Par exemple, l'élémentest un élément en ligne typique.

span { display: inline; }

1.3. Les éléments inline-block
inline-block n'occuperont pas de ligne, mais la largeur et la hauteur peuvent être définies. Par exemple, l'élémentest un élément de bloc en ligne typique.

img { display: inline-block; }

1.4. aucun
aucun élément ne sera pas affiché et sera supprimé du flux de documents. Par exemple, vous pouvez masquer un élément en définissant display: none.

.hidden { display: none; }

2. attribut position
   L'attribut position est utilisé pour spécifier comment un élément est positionné. Les valeurs courantes des attributs de positionsont les suivantes :

2.1. static
static est la méthode de positionnement par défaut et les éléments sont disposés dans l'ordre du flux de documents.

div { position: static; }

2.2. relative
Position relative par rapport à sa propre position initiale. La position d'un élément peut être ajustée en utilisant les propriétés haut, bas, gauche et droite.

div { position: relative; top: 10px; left: 20px; }

2.3. absolue
absolue Position relative à l'élément parent, ou position relative à l'élément ancêtre le plus proche avec des attributs de positionnement (la position n'est pas statique).

div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

2.4.fixed
fixed est positionné par rapport à la fenêtre du navigateur et ne changera pas de position lorsque la barre de défilement défile.

div { position: fixed; top: 0; right: 0; }

3. attribut float
   l'attribut float est utilisé pour spécifier comment un élément flotte. Lorsqu'un élément est défini pour flotter, il est retiré du flux de documents normal et flottant aussi loin à gauche ou à droite que possible. D'autres éléments seront disposés autour de l'élément flottant.

img { float: left; }

Ce qui précède est l'introduction et des exemples de code des trois propriétés de mise en page courantes : display, position et float. En pratique, nous pouvons choisir quel attribut de mise en page utiliser en fonction de besoins spécifiques pour réaliser la conception de la mise en page des pages Web. J'espère que cet article pourra fournir aux lecteurs une certaine aide dans la mise en page CSS.

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!