CSS erben und automatisch

Eine sehr einfache Fabel: Ein tausend Jahre alter Baum wurde vom Blitz getroffen und blieb stehen, wurde aber durch die Invasion von Ameisen zerstört. Menschen, die denken, sie beherrschen CSS, werden oft durch kleine Probleme verwirrt. Es handelt sich normalerweise um einen sehr kleinen Wert. Nach Verstärkungs- und Verzerrungsschichten ist die gesamte Struktur außer Form. CSS ist eine sehr einfache Sprache, leicht zu erlernen und zu verwenden, aber auch am anfälligsten für Junk-Code. Dies liegt daran, dass die Sprache nicht gründlich erlernt wird. Meiner Meinung nach besteht CSS aus den folgenden drei Blöcken: Standardwert, Vererbungssystem und gewichtetes System. Der Standardwert ist das vom Browser standardmäßig angegebene Attribut, wenn der Benutzer das Attribut nicht festlegt. Das CSS-Framework verfügt grundsätzlich über eine Datei namens „reset.css“, mit der es zurückgesetzt und die Unterschiede zwischen Browsern beseitigt werden können. Auf das Vererbungssystem konzentrieren wir uns im Folgenden. Das Gewichtungssystem, also die Frage der Priorität, geht über den Rahmen dieses Artikels hinaus und wird nicht weiter besprochen.

In CSS können viele Eigenschaften vererbt werden. Wenn beispielsweise die Schriftart eines bestimmten Absatzes auf Weiß eingestellt ist, muss die Schriftart seines Elements nicht festgelegt werden oder ist auf „Erben“ eingestellt Weiß. Diese Attribute werden als geerbte Eigenschaften bezeichnet. Der berechnete und konvertierte Wert des entsprechenden Attributs wird vom übergeordneten Element abgerufen. Befindet sich das übergeordnete Element in der gleichen Situation wie es, wird die Suche fortgesetzt und schließlich die Funktion „Durchsuchen“ verwendet nicht gefunden. Der Standardwert des Geräts.

Das Folgende ist eine Liste der geerbten Eigenschaften:

• border-collapse

• border-spacing

• Beschriftungsseite

• Farbe

• Cursor

• Richtung

• leere-zellen

• Schriftart

• Schriftfamilie

• Schriftdehnung

• Schriftgröße

• Schriftgröße anpassen

• Schriftstil

• Schriftvariante

• Schriftstärke

• Buchstabenabstand

• Linienhöhe

• Listenstil

• Deckkraft

• Listenstil-Bild

• Listenstil-Typ

• Zitate

• text -align

• text-indent

• text-transform

• white-space

• Wortabstand

http://www.php.cn/

Wir geben Der Schriftstil des übergeordneten Elements ist festgelegt, das untergeordnete Element jedoch nicht. Wenn das untergeordnete Element herausgenommen wird, wird festgestellt, dass sein Wert in das RGB-Format konvertiert wird (außer natürlich im IE!)

Allerdings wird in IE7 und früheren Versionen die Verwendung der Vererbung zum Festlegen anderer Stilattribute als Richtung und Sichtbarkeit nicht unterstützt. Einzelheiten finden Sie hier und hier

In IE8 schlägt text-align, das ursprünglich eine geerbte Eigenschaft war, in th fehl.

 <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;
  }

Ursprünglich sollte die Einstellung für rechtsbündigen Text aus der Tabelle übernommen werden, aber das ist fehlgeschlagen...

Es ist auch möglich, das Problem zu lösen Dieser geistig zurückgebliebene Fehler im IE8 ist einfach, setzen Sie einfach inherit explizit.

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

Darüber hinaus gibt es einige CSS-Eigenschaften, die nicht vererbt werden können, die klassischsten sind die Border-Serien. Es wird als nicht vererbte Eigenschaft bezeichnet. Wenn wir sie nicht festlegen, können wir nur den Standardwert des Browsers abrufen. Der Standardwert wird in Firefox als Anfangswert bezeichnet. Eine damit verbundene gute Nachricht ist, dass in Firefox auch Standardwerte angegeben werden können, sodass wir den Stil nicht zurücksetzen müssen!

Das Folgende ist eine Liste nicht vererbter Eigenschaften:

• Hintergrund

• Rahmen

• unten

• klar

• Anzeige

• schwebend

• Höhe

• links

• Rand

• Umriss

• Überlauf

• Auffüllung

• Position

• rechts

• Oben

• Sichtbarkeit

• Breite

• z-Index

Wir legen die Hintergrundfarbe für das übergeordnete Element fest. Wenn wir das untergeordnete Element nicht festlegen, wird der Standardwert des Browsers von transparent erhalten (. W3C scheint nur zu benötigen, dass alle Farben in das RGB-Format konvertiert werden, und das zusätzliche a ist Alpha)

Dann schauen wir uns auto an, was ein mehrdeutiger Wert ist, aber ein Längenkonzept hat. Gilt für die folgenden Eigenschaften:

• Überlauf

• Cursor

• Höhe

• Breite

• Marker-Offset

• Rand

• Rand- * (links|unten|oben|rechts|anfang|ende)

• oben

• unten

• links

• rechts

• Tabellenlayout

• z-Index

• -moz-column-width

• Sprachen

in einem messbaren Attribut eines Elements auf Blockebene ( Wenn kein Wert festgelegt ist, ist der Standardwert auto, er kann jedoch leicht durch den Wert des übergeordneten Elements überschrieben werden, was bedeutet, dass er implizit geerbt wird. Da es in Inline-Elementen kein Box-Modell gibt, gibt Firefox es zurück, wenn es nicht festgelegt ist, was sich sehr nachteilig auf die genaue Berechnung der Breite und Höhe des Elements auswirkt. Auto hat auch Symmetrie, die wir oft in zentrierten Layouts verwenden. Bei nicht-metrischen Attributen wie Überlauf ist eine spezifische Analyse erforderlich.

Weitere Artikel zum Thema CSS-Vererbung und Auto finden Sie auf der chinesischen PHP-Website!