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

Attributs de mise en page CSS : affichage, position et flotteur

CSS est un langage de balisage utilisé pour contrôler le style des pages Web. Les propriétés de mise en page sont très importantes lors de la conception de la mise en page d'une page Web. CSS fournit une variété de propriétés de mise en page, dont les plus couramment utilisées sont l'affichage, la position et le flotteur. Dans cet article, nous présenterons en détail ces trois propriétés de mise en page et fournirons des exemples de code spécifiques.

1. attribut display
   L'attribut display est utilisé pour spécifier le type d'affichage de l'élément. Les valeurs courantes des attributs d'affichage​​sont les suivantes :

1.1. block
L'élément block occupe une ligne exclusive, commence toujours à s'afficher à partir d'une nouvelle ligne et remplit la largeur de l'élément parent. Par exemple, l'élément dc6dce4a544fdca2df29d5ac0ea9906b est un élément de bloc typique.

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ément 45a2772a6b6107b401db3c9b82c049c2 est 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ément a1f02c36ba31691bcfe87b2722de723b est 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 position​​sont 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!