Huit compétences de mise en page CSS que vous devez maîtriser lors de la création de pages Web_Échange d'expériences

1. Si vous avez des questions, vérifiez immédiatement

Si vous pouvez effectuer une simple vérification du code d'origine lorsqu'une erreur se produit, vous pouvez éviter bien des maux de tête. Le W3C dispose d'outils de détection disponibles pour XHTML et CSS, veuillez consulter http://validator.w3.org. Veuillez noter que les erreurs au début du fichier peuvent provoquer davantage d'erreurs en raison d'une structure incorrecte et d'autres facteurs ; nous vous recommandons de corriger d'abord certaines des erreurs les plus évidentes, puis de revérifier, ce qui peut réduire le nombre d'erreurs.

2. N'oubliez pas d'effacer les instructions de manière appropriée lorsque vous utilisez la fonction flottante

Le flottement est une fonction dangereuse et peut ne pas produire les résultats que vous attendez. Si vous rencontrez des éléments flottants qui dépassent la limite du conteneur environnant ou d'autres situations inhabituelles, assurez-vous de le faire correctement. Voir le tutoriel d'Eric Meyer sur Complex Spiral Consulting Web.

3. Utilisez un remplissage ou une bordure pour éviter les bordures qui se chevauchent.

Vous avez peut-être du mal à obtenir un petit espace qui ne devrait pas être là, ou lorsque vous avez besoin d'un peu d'espace, vous ne pouvez pas. faites-le sortir quoi qu'il arrive. Si vous utilisez des marges, il est facile de chevaucher les limites ; Andy Budd explique ce qui est possible sur son site Web.

4. Essayez d'éviter de spécifier simultanément le remplissage/la bordure et la hauteur ou la largeur des éléments.

La version Windows d'IE provoque souvent des problèmes de calcul de largeur et de hauteur. Il existe plusieurs façons de résoudre ce problème, mais si l'élément parent doit spécifier la hauteur et la largeur, il est préférable d'appliquer une marge aux éléments enfants au sein de l'élément parent, ou lorsque l'élément enfant doit spécifier la hauteur et la largeur, appliquez un remplissage à l’élément parent pour obtenir cet effet.

5. Ne vous fiez pas à min-width/min-height

La version Windows d'IE ne prend pas en charge les deux syntaxes. Mais dans une certaine mesure, la version Windows d'IE peut obtenir un effet équivalent à min-width/min-height, donc tant que vous effectuez un filtrage sur IE, vous pouvez obtenir les résultats souhaités.

6. En cas de doute, réduisez d'abord le pourcentage.

Parfois, certaines erreurs feront que 50 % + 50 % deviennent 100,1 %, provoquant des problèmes sur la page Web. Essayez actuellement de modifier ces valeurs à 49 % ou même 49,9 %.

7. Rappelez-vous la méthode d'écriture de "TRouBLed"

Border, la syntaxe d'abréviation de margin et padding a un ordre spécifique, en partant du haut et en tournant dans le sens des aiguilles d'une montre : haut, droite, bas, left. Donc margin :0 1px 3px 5px; Le résultat est pas de bordure en haut, 1 pixel à droite, et ainsi de suite. Rappelez-vous "TRouBLE" et vous ne vous tromperez pas dans la séquence.

8. Tant que la valeur n'est pas nulle, l'unité doit être spécifiée.

CSS vous demande de spécifier l'unité pour chaque police, marge et autres valeurs. (La seule exception est la hauteur de ligne)