L'introduction et la meilleure méthode de traitement du style par défaut du navigateur

Récemment, j'ai ajusté le format de la page Web pour constater qu'il y a toujours un espace d'environ 10 pixels au bas de la page Web.

On constate qu'il y a une marge-botton: 1em;

J'ai trouvé que cette feuille de styles d'agent utilisateur est l'un des styles par défaut de l'égard. La solution la plus simple à être insatisfaite de ce style par défaut est de repenser les attributs de ce style, car la priorité de la feuille de style de l'agent utilisateur est très faible et sera couverte. La marge-fond est définie sur 0px.

Différents navigateurs sont incompatibles avec le style par défaut du même élément, c'est pourquoi nous devons écrire au début de CSS * {padding: 0;

Mais maintenant ce n'est pas seulement ça. Fondamentalement, il y aura des différences dans les performances de deux navigateurs de noyaux différents dans certains éléments, tels que la taille, la sélection des polices et le style d'indentation du caractère. Peut-être qu'une très belle table de style CSS est bien effectuée sur un navigateur.

Par conséquent, lorsque nous générons les règles de style CSS, une étape incontournable consiste à repenser le style par défaut du navigateur, c'est-à-dire le style par défaut du navigateur. Différent de l'utilisation de * {rembourrage: 0; marge: 0}, tous les éléments n'existent pas dans le rembourrage et la marge.

Par exemple, le paragraphe suivant:

La police utilisée dans ce code dans Internet Explorer est Times New Roman, et la police par défaut du système est utilisée dans Firefox et Opera. Par conséquent, nous devons définir un style unifié pour <h1> dans CSS.

Cependant, si nous utilisons le style-the-the-best si nous utilisons * {padding: 0; , etc. Certains navigateurs en ignoreront la refonte, et plus important encore, cela endommagera gravement l'apparence de ces éléments, vous devez donc définir manuellement une valeur de rembourrage et une valeur de marge pour eux un par un. Nous devons donc abandonner simplement l'utilisation *, mais rejouer le premier élément avec des incohérences existantes, telles que le corps, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h5, h5, h6 , Pré, etc.

Dans le même temps, le style par défaut de l'élément peut détruire l'apparence de la page. Par exemple, <b> les éléments épaissiront le texte, <lockQuote> l'indentation dans une grande section, <em> inclinera le texte, etc. Si vous souhaitez demander l'apparence du texte de la page Re -Set. Dans le même temps, nous avons parfois besoin de l'apparence de ces éléments comme élément parent, et nous pouvons utiliser directement un héritage pour hériter de l'élément parent.

Quant à quels éléments devraient être re -set? Yahoo! a fait un résumé pour nous. Selon la suggestion de Yahoo, vous devez mettre ces règles dans un fichier appelé reset.css seul (recommander cette méthode):

 html {couleur: # 000; , Td {margin: 0; padding: 0;} Table , Var {Style de police: normal; SIZE DE POLIÈRE: 100%;

Ce que vous devez faire est de simplement enregistrer ces règles dans la reset.css et de l'utiliser dans la page. Lorsque vous devez ajouter de nouveaux styles à ces éléments, il n'est pas différent du réglage des autres éléments.

Ce qui précède est tout le contenu de cet article.