Maison > Article > interface Web > Plusieurs techniques CSS classiques couramment utilisées_Échange d'expériences
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.