suchen
HeimWeb-FrontendCSS-TutorialCSS erben und automatisch

CSS erben und automatisch

Feb 10, 2017 pm 04:21 PM

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.

 
                               
RubyRouvre
By司徒正美
 
  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!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Wie wir Google -Schriftarten getaggt und Goofonts.com erstellt habenWie wir Google -Schriftarten getaggt und Goofonts.com erstellt habenApr 12, 2025 pm 12:02 PM

Goofonts ist ein Nebenprojekt, das von einer Entwicklerin und einem Designer-Ehemann signiert wurde, beide große Fans der Typografie. Wir haben Google markiert

Zeitlose Web -EntwicklerartikelZeitlose Web -EntwicklerartikelApr 12, 2025 am 11:44 AM

Pavithra Kodmad bat die Menschen um Empfehlungen zu den Angaben, die sie für einige der zeitlossten Artikel über Webentwicklung hielten, die ihre verändert haben

Der Deal mit dem AbschnittselementDer Deal mit dem AbschnittselementApr 12, 2025 am 11:39 AM

Zwei Artikel veröffentlichten genau den selben Tag:

Üben Sie GraphQL -Abfragen mit dem Status der JavaScript -APIÜben Sie GraphQL -Abfragen mit dem Status der JavaScript -APIApr 12, 2025 am 11:33 AM

Das Erstellen des Erstellens von GraphQL -APIs kann eine große Herausforderung sein. Sie können jedoch lernen, wie Sie GraphQL -APIs in 10 Minuten verwenden! Und es passiert so, dass ich das perfekte bekommen habe

CMSS auf KomponentenebeneCMSS auf KomponentenebeneApr 12, 2025 am 11:09 AM

Wenn eine Komponente in einer Umgebung lebt, in der die Datenabfragen sie in der Nähe leben, gibt es eine ziemlich direkte Grenze zwischen der visuellen Komponente und der

Geben Sie den Typ auf einen Kreis ein ... mit Offset-PfadGeben Sie den Typ auf einen Kreis ein ... mit Offset-PfadApr 12, 2025 am 11:00 AM

Hier ist einige legitime CSS -Tricks von Yuanchuan. Es gibt diesen CSS-Immobilien-Offset-Pfad. Es war einmal, es wurde als Bewegungspfad bezeichnet und dann umbenannt. ICH

Was macht 'Rückkehr' in CSS?Was macht 'Rückkehr' in CSS?Apr 12, 2025 am 10:59 AM

Miriam Suzanne erklärt in einem Mozilla -Entwickler -Video zu diesem Thema.

Die modernen LiebhaberDie modernen LiebhaberApr 12, 2025 am 10:58 AM

Ich liebe solche Sachen.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools