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

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

WBOY

Libérer： 2023-10-20 17:36:25

original

935 Les gens l'ont consulté

CSS 布局属性大全：display，position 和 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.

attribut display
L'attribut display est utilisé pour spécifier le type d'affichage de l'élément. Les valeurs courantes des attributs d'affichagesont 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;
}

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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%);
}

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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!