Héritage CSS et auto

Une fable très simple, un arbre millénaire fut frappé par la foudre et resta immobile, mais fut détruit par l'invasion des fourmis. Les personnes qui pensent maîtriser CSS sont souvent déconcertées par de petits problèmes. Il s'agit généralement d'une très petite valeur. Après des couches d'amplification et de distorsion, la structure entière sera déformée. CSS est un langage très simple, facile à apprendre et à utiliser, mais c'est aussi le plus sujet au code indésirable. Cela est dû au fait de ne pas étudier la langue en profondeur. Selon moi, CSS est composé des trois blocs suivants : valeur par défaut, système d'héritage et système pondéré. La valeur par défaut est l'attribut spécifié par le navigateur par défaut si l'utilisateur ne définit pas l'attribut. Le framework CSS possède essentiellement un fichier appelé reset.css, qui est utilisé pour le réinitialiser et éliminer les différences entre les navigateurs. Le système d’héritage est ce sur quoi nous nous concentrerons ci-dessous. Le système de pondération, c’est-à-dire la question de la priorité, dépasse le cadre de cet article et ne sera pas abordé davantage.

En CSS, de nombreuses propriétés peuvent être héritées. Par exemple, si la police d'un paragraphe est définie sur blanc, la police de son élément n'a pas besoin d'être définie ou est définie pour hériter, elle sera blanche. . Ces attributs sont appelés propriétés héritées. Il obtiendra la valeur calculée et convertie de l'attribut correspondant de l'élément parent si l'élément parent est dans la même situation que lui, il continuera à rechercher, et enfin à utiliser la navigation si c'est le cas. introuvable. La valeur par défaut du périphérique.

Ce qui suit est une liste des propriétés héritées :

• border-collapse

• border-spacing

• côté légende

• couleur

• curseur

• direction

• cellules vides

• police

• famille de polices

• font-stretch

• font-size

• font-size-adjust

• font -style

• font-variant

• font-weight

• espacement des lettres

• hauteur de ligne

• style-liste

• opacité

• list-style-image

• list-style-type

• citations

• texte -align

• text-indent

• text-transform

• espace blanc

• espacement des mots

http://www.php.cn/

Nous donnons l'élément parent Le style de police est défini, mais le sous-élément n'est pas défini Lorsque le sous-élément est supprimé, on constate que sa valeur est convertie au format RVB (sauf IE, bien sûr !)

Cependant, dans IE7 et les versions précédentes, l'utilisation de l'héritage pour définir des attributs de style autres que la direction et la visibilité n'est pas prise en charge. Pour plus de détails, veuillez consulter ici et ici

Dans IE8, text-align, qui était à l'origine une propriété héritée, échoue dans th.

 <table>
  <tr>
    <th>Ruby</th>
    <th>Rouvre</th>
  </tr>
  <tr>
    <td>By</td>
    <td>司徒正美</td>
  </tr>
</table>

 
  table, tr, td, th {
    border-collapse: collapse;
    border: 1px solid #000;
  }
  table {
    text-align: right;
  } 
  td, th {
    width: 100px;
  }

À l'origine, cela devait hériter du paramètre de texte aligné à droite du tableau, mais cela a échoué...

Il est également possible de résoudre ce bug de retard mental dans IE8 C'est simple, il suffit de définir explicitement l'héritage.

 
  table, tr, td, th {
    border-collapse: collapse;
    border: 1px solid #000;
  }
  table {
    text-align: right;
  }
  td, th {
    width: 100px;
  }
  th {
    text-align: inherit;
  }

De plus, certaines propriétés CSS ne peuvent pas être héritées, les plus classiques sont la série border. C'est ce qu'on appelle une propriété non héritée. Si nous ne la définissons pas, nous ne pouvons obtenir que la valeur par défaut du navigateur. La valeur par défaut est appelée valeur initiale dans Firefox. Une bonne nouvelle connexe est que les valeurs par défaut peuvent également être spécifiées dans Firefox, nous n'avons donc pas besoin de réinitialiser le style !

Ce qui suit est une liste de propriétés non héritées :

• arrière-plan

• frontière

• bas

• clair

• affichage

• flotteur

• hauteur

• gauche

• marge

• contour

• débordement

• rembourrage

• position

• droite

• haut

• visibilité

• largeur

• z- index

Nous définissons la couleur d'arrière-plan de l'élément parent Si nous ne définissons pas l'élément enfant, la valeur par défaut du navigateur, transparente, sera obtenue (. Le W3C semble avoir seulement besoin que toutes les couleurs soient converties au format RVB, et le a supplémentaire est Alpha)

Regardons ensuite auto, qui est une valeur ambiguë mais a un concept de longueur. S'applique aux propriétés suivantes :

• débordement

• curseur

• hauteur

• largeur

• décalage du marqueur

• marge

• marge- * (gauche|bas|haut|droite|début|fin)

• haut

• bas

• gauche

• droite

• table-layout

• z-index

• -moz-column-width

• langues

dans un attribut mesurable d'un élément de niveau bloc ( par exemple width, height), si aucune valeur n'est définie, sa valeur par défaut est auto, mais elle peut facilement être écrasée par la valeur de l'élément parent, ce qui signifie qu'elle devient implicitement héritée. Dans les éléments en ligne, puisqu'il n'y a pas de modèle de boîte, même Firefox le renverra s'il n'est pas défini, ce qui est très préjudiciable au calcul précis de la largeur et de la hauteur de l'élément. Auto a également une symétrie, que nous utilisons souvent dans les mises en page centrées. Parmi les attributs non métriques, tels que le débordement, une analyse spécifique est requise.

Pour plus d'articles liés à l'héritage CSS et à l'auto, veuillez faire attention au site Web PHP chinois !