Maison  >  Article  >  interface Web  >  Plusieurs techniques CSS classiques couramment utilisées_Échange d'expériences

Plusieurs techniques CSS classiques couramment utilisées_Échange d'expériences

WBOY
WBOYoriginal
2016-05-16 12:05:001159parcourir

Utilisez line-height pour le centrage vertical

line-height:24px;
Lorsque vous utilisez un conteneur à largeur fixe et que vous avez besoin qu'une ligne soit centrée verticalement, utilisez line-height (la hauteur est la identique au conteneur de couche parent), un résumé plus détaillé du centrage vertical peut être vu ici.

Effacer les flotteurs du conteneur

#main {
overflow:hidden;
}
Ce problème a également été mentionné auparavant. Pour plus d'informations, vous pouvez voir ici.

Ne pas autoriser le retour à la ligne des liens

a {
white-space:nowrap;
}
Les paramètres ci-dessus peuvent empêcher le retour à la ligne des liens, mais je recommande personnellement de long Le lien aura la ligne correspondante (pour une discussion sur les sauts de ligne, voir l'enregistrement au centre du cercle).

Toujours laisser Firefox afficher les barres de défilement

html {
overflow:-moz-scrollbars-vertical;
}
Pour plus de propriétés CSS privées Mozilla/Firefox, veuillez vous référer à ici. Pour la prise en charge de plusieurs navigateurs, vous pouvez également utiliser

body, html {
min-height:101%
}
pour centrer l'élément de bloc horizontalement

margin; : 0 auto;
En fait, c'est

margin-left: auto;
margin-right: auto
En gros, tous les manuels CSS expliqueront cette technique, n'oubliez pas de le faire. ajoutez-le en largeur. Vous pouvez également utiliser

body{
text-align: center;
}
puis définir le conteneur interne

text-align: left;
Restore; .

Masquer la barre de défilement de l'Explorateur textarea

textarea {
overflow:auto;
}
Explor textarea a une barre de défilement verticale par défaut (ne me demandez pas pourquoi ) .

Définir la pagination d'impression

h2 {
page-break-before:always;
} L'attribut
page-break-before peut définir la pagination lors de l'impression de pages Web.

Supprimez la case en pointillé sur le lien

a:active, a:focus {
outline:none
}
Firefox se concentrera sur le lien par défaut ( ou cliquez sur ), ajoutez un cadre en pointillés, qui peut être supprimé à l'aide des propriétés ci-dessus.

La réinitialisation CSS la plus simple

* {
margin: 0; padding: 0
}
Si vous voulez être "complexe", référez-vous à l'approche de YUI (également ici). Certains utilisateurs ont également exprimé leur point de vue dans le message original

Je dois être d'accord avec Niall Doherty, * {margin: 0px; padding: 0px;}
signifie essentiellement "parcourir chaque élément CSS et lui donner ces
attributs". C'est une charge très inutile sur le serveur et
une mauvaise pratique sémantique, car vous devez donner à certains éléments
padding/margin à nouveau, après les avoir supprimés.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn