Comment résoudre le problème de chevauchement des pages Web avec CSS

Méthode CSS pour résoudre le chevauchement de pages Web : 1. Définir une bordure pour l'élément parent ; 2. Ajouter un remplissage à l'élément parent ; 3. Ajouter un élément frère avec une largeur et une hauteur au-dessus de l'élément enfant ; Définissez la bordure de l'élément parent "overflow: Hidden;" attribut, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo CSS"

CSS pour résoudre le chevauchement des marges des pages Web

Ce qui suit présente comment utilisez CSS pour éviter les chevauchements Plusieurs façons de chevaucher les marges.

Supposons d'abord un ensemble de structures DOM

<div class="parent">
    <div class="child">
    </div>
</div>

Normalement, si la marge est définie pour un élément enfant, cet attribut aura le même effet sur l'élément parent, cependant

Ce n'est en fait pas le résultat que nous souhaitons. Nous voulons simplement définir une marge sur les éléments enfants, alors que devons-nous faire maintenant ?

1. Définissez une bordure sur l'élément parent

.parent { 
    width: 300px;       
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

2. Ajoutez un remplissage à l'élément parent

.parent {
    padding： 1px;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

3. Ajoutez un élément frère avec une largeur et une hauteur au-dessus de l'enfant. élément, rappelez-vous Il y a de la largeur et de la hauteur pour vivre.

<div class="parent">
     <div style="width: 20px;height: 20px;margin-top: "></div>
     <div class="child">
     </div>
</div>

4. Définissez l'attribut overflow: Hidden; sur l'élément parent

.parent {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

5. Définissez display: inline-block sur l'élément enfant (si l'élément enfant est un élément en ligne ou un élément en ligne au niveau du bloc) Il n'y aura aucun problème de marges qui se chevauchent)

.parent {
    width: 300px;
    height: 300px;
} 
.child {
    width: 200px;
    height: 200px;
    margin: 20px; 
    display: inline-block;
}

6. Il existe de nombreuses façons d'y parvenir en détachant les sous-éléments du flux de documents, tels que le flottement, le positionnement absolu, etc. . Je ne donnerai pas ici une explication détaillée.

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!