erreur de dessin CSS

"Erreur" de peinture CSS

Dans la conception Web, CSS est un outil important qui peut être utilisé pour définir le style de la page, tel que la taille de la police, la couleur, l'arrière-plan, la bordure, etc. Cependant, avec le développement continu de la technologie Web, les fonctions CSS deviennent de plus en plus puissantes. Les utilisateurs peuvent utiliser CSS pour obtenir de nombreux effets qui ne pourraient être obtenus qu'en utilisant des technologies telles que JavaScript ou Flash. Cependant, nous rencontrons parfois aussi des pièges CSS. Aujourd'hui, parlons des « erreurs » de dessin en CSS.

1. Marge et remplissage dans le modèle de boîte

En CSS, le modèle de boîte est un concept très courant et important. Le modèle de boîte se compose de quatre parties : la zone de contenu, le remplissage, les bordures et les marges de l'élément. Parmi elles, margin et padding sont deux propriétés qui contrôlent l'espacement extérieur et intérieur de la boîte. Cependant, leur utilisation est également sujette à des erreurs.

Par exemple, dans une page contenant des divs, si on veut avoir une certaine distance entre la balise div et la page, on peut généralement utiliser la marge :

div {
  margin: 20px;
}

Cependant, si on ajoute une balise p à l'intérieur de la balise div à ce moment , Ensuite, la marge de la balise p sera superposée à la marge du div, ce qui rendra l'espacement plus grand que prévu.

À ce stade, la bonne approche consiste à définir le remplissage au lieu de la marge pour le div :

div {
  padding: 20px;
}

De cette façon, la marge de la balise p sera superposée à l'intérieur du remplissage du div au lieu de se superposer à la marge du div. div, obtenant ainsi l’effet souhaité.

2. Calcul de la largeur

En CSS, la largeur est calculée via la zone de contenu d'un élément. Autrement dit, si un élément div a une largeur de 500 px, sa zone de contenu aura également une largeur de 500 px. Cependant, si l'élément div a une bordure de 5 px, l'élément div sera alors 10 px plus large que prévu.

Ce problème peut être résolu en ajoutant l'attribut box-sizing à l'élément. Si box-sizing est défini sur border-box, la largeur inclut la bordure et le remplissage, pas seulement la zone de contenu. Comme indiqué ci-dessous :

div {
  width: 500px;
  border: 5px solid black;
  box-sizing: border-box;
}

3. Propriété z-index

En CSS, la propriété z-index permet à un élément de couvrir d'autres éléments sur l'axe z (profondeur). Cependant, nous constatons parfois que l’effet du z-index n’est pas celui attendu.

Par exemple, dans le code suivant, nous nous attendons à ce que le contenu de #box2 couvre le contenu de #box1 :

<div id="box1"></div>
<div id="box2"></div>

#box1 {
  position: relative;
  z-index: 1;
  background-color: red;
}
#box2 {
  position: relative;
  z-index: 2;
  background-color: blue;
}

Cependant, lorsque nous avons réellement exécuté ce code, nous avons constaté que #box2 ne couvrait pas complètement #box1. En effet, #box1 et #box2 sont des éléments relativement positionnés et se trouvent dans le même flux de documents. Leur relation hiérarchique est donc en réalité déterminée par l’ordre dans lequel ils apparaissent dans le code HTML. C'est-à-dire que bien que #box2 ait un z-index plus grand que #box1, il ne couvre pas complètement #box1.

Si nous voulons que #box2 recouvre complètement #box1, alors nous pouvons transformer #box1 en un élément absolument positionné :

#box1 {
  position: absolute;
  z-index: 1;
  background-color: red;
}
#box2 {
  position: relative;
  z-index: 2;
  background-color: blue;
}

De cette façon, #box1 n'est plus un élément dans le flux documentaire, mais par rapport à l'élément parent (C'est aussi l'élément qui est positionné (élément body) de manière à ce que le z-index de #box2 puisse couvrir complètement #box1.

Résumé

CSS est un outil très puissant, mais il est inévitable de rencontrer quelques pièges lors de son utilisation. Cet article couvre certaines erreurs courantes en CSS, notamment la marge et le remplissage dans le modèle de boîte, les calculs de largeur et l'utilisation de la propriété z-index. Comprendre ces erreurs courantes peut nous permettre d'éviter des erreurs inutiles dans le développement quotidien et d'améliorer l'efficacité du travail.

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!