Les meilleures compétences CSS sont publiées, vous devez connaître div+css layout_Experience Exchange

Les meilleures compétences CSS sont publiées, vous devez connaître div+css layout_Experience Exchange

Utilisez px pour la taille de la police

Déclarez CSS sur une seule ligne
Comparez ci-dessous Deux :

h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} 
h2 { 
   font-size:18px; 
   border:1px solid blue; 
   color:#000; 
   background-color:#FFF; 
   }

Le second semble formaté, mais il n'aidera pas à la lecture. Écrire sur une seule ligne vous permet de trouver plus rapidement la pièce dont vous avez besoin.

J'avais l'habitude d'écrire de la même manière que la deuxième méthode, mais petit à petit j'ai trouvé que ce n'était pas très utile comme le disait l'article. Une ligne semble nette, économise de l'espace et réduit la taille du fichier.

Écrire du code en blocs
Écrire du code de cette manière peut rendre le CSS plus semblable à une page, et lorsqu'un problème survient, le problème peut être trouvé dans les plus brefs délais. Comme ceci :

#content {float:left;} 
   #content p { … } 
#sidebar {float:left;} 
   #sidebar p { … } 
#footer {clear:both;} 
   #sidebar p { … }

Prise en charge des navigateurs
Prend uniquement en charge les derniers navigateurs. Cela signifie abandonner IE5 et IE5.5. Cela fait gagner beaucoup de temps. Pour IE6, il n’est pas nécessaire d’utiliser le modèle de boîte Hack. Si vous ciblez uniquement les navigateurs populaires, vous n’avez besoin que de quelques hacks pour obtenir le même effet.

J'ai prêté attention au CSS de la nouvelle page d'accueil de NetEase, et il n'y a pas de !important ou de Hack dedans, mais il s'affiche très bien dans FF et IE. Une utilisation raisonnable du CSS peut éviter les piratages. Bien entendu, le débogage prendra plus de temps.

Contient des éléments flottants
Tout le contenu du conteneur doit être conçu pour être cohérent avec le conteneur. S'il est trop grand, il glissera dans la mauvaise position. L'utilisation de marges négatives pour ajuster à l'extérieur du conteneur entraînera également un glissement.

Comprendre le débordement
S'il y a deux éléments flottants sur la page, la sortie de trop de contenu dans le conteneur de gauche entraînera l'exécution du conteneur de droite en dessous. Cela signifie que vos paramètres de marge, de largeur ou de remplissage sont erronés, mais cela ne sera pas reflété dans FF. Utilisez overflow:hidden ou overflow:scroll pour empêcher IE d'autoriser le contenu à sortir du conteneur.

Autoriser les éléments de bloc à remplir automatiquement les espaces

CSS abrégé
Beaucoup de gens utilisent un tas de marge supérieure, marge droite, marge inférieure et marge gauche. En fait, c'est le plus basique. Margin peut être directement abrégé en margin : valeur supérieure droite inférieure gauche. Un résumé des abréviations CSS peut être consulté ici.
Évitez les sélecteurs inutiles
Réduisez les sélecteurs de style au minimum. Si vous vous retrouvez à écrire constamment ul li {} ou table tr td{}, cela prouve que vous écrivez trop détaillé. Moins de sélecteurs facilitent la détection des problèmes.

Je ne l'ai pas entièrement traduit, et il contient beaucoup de mes propres mots, haha.

Ce qui précède est la publication des meilleures compétences CSS, du contenu d'échange de mise en page div+css must-know_experience, pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php. cn) !