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

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 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 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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn