IE: Trident-Kernel
Firefox: Gecko-Kernel
Safari: Webkit-Kern
Opera: Früher war es der Presto-Kernel, aber Opera ist jetzt auf den Blink-Kernel von Google Chrome umgestiegen
Chrome:Blink (basierend auf Webkit, gemeinsam entwickelt von Google und Opera Software)
-Deklaration befindet sich ganz vorne im Dokument, vor dem Dieses Tag teilt dem Browser mit, welche HTML- oder XHTML-Spezifikation das Dokument verwendet. (Wichtiger Punkt: Teilen Sie dem Browser mit, nach welcher Spezifikation die Seite analysiert werden soll)
Ab IE6 wurde der Standardsmodus eingeführt. Im Standardsmodus versucht der Browser, Dokumente, die den Standards entsprechen, genauso korrekt zu verarbeiten wie im angegebenen Browser.
CSS war vor IE6 nicht ausgereift genug, daher hatten Browser vor IE5 eine schlechte Unterstützung für CSS. Allerdings tritt zu diesem Zeitpunkt das Problem auf, da viele Seiten darauf basieren Wenn IE6 CSS unterstützt, werden diese Seiten nicht ordnungsgemäß angezeigt. Wie kann sichergestellt werden, dass die vorhandenen Seiten nicht zerstört werden, und ein neuer Rendering-Mechanismus bereitgestellt werden?
Beim Schreiben von Programmen stoßen wir häufig auf dieses Problem: Wie kann sichergestellt werden, dass die ursprüngliche Schnittstelle unverändert bleibt und leistungsfähigere Funktionen bereitgestellt werden, insbesondere wenn die neuen Funktionen nicht mit den alten Funktionen kompatibel sind? Ein üblicher Ansatz bei solchen Problemen besteht darin, Parameter und Verzweigungen hinzuzufügen. Das heißt, wenn ein bestimmter Parameter wahr ist, verwenden wir die neue Funktion, und wenn der Parameter nicht wahr ist, verwenden wir die alte Funktion, sodass dies der Fall ist nicht zerstören Das Originalprogramm bietet auch neue Funktionen. IE6 macht etwas Ähnliches. Da niemand DTD auf vorherigen Seiten schreiben würde, geht IE6 davon aus, dass diese Seite eine bessere Unterstützung für das CSS-Layout verwendet , das vorherige Layout ist kompatibel. Dies ist der Quirks-Modus (Quirks-Modus, seltsamer Modus, seltsamer Modus).
Unterschied:
Im Allgemeinen gibt es drei Unterschiede in Bezug auf Layout, Stilanalyse und Skriptausführung.
Box-Modell: Wenn Sie im W3C-Standard die Breite und Höhe eines Elements festlegen, bezieht sich dies auf die Breite und Höhe des Inhalts des Elements. Im Quirks-Modus umfassen die Breite und Höhe des IE auch Abstand und Rand.
Legen Sie die Höhe und Breite von Inline-Elementen fest: Im Standardmodus wird die Einstellung von Breite und Höhe für Inline-Elemente wie nicht wirksam, im Quirks-Modus jedoch.
Legen Sie eine prozentuale Höhe fest: Im Standardmodus wird die Höhe eines Elements durch den darin enthaltenen Inhalt bestimmt. Wenn das übergeordnete Element keine prozentuale Höhe festlegt, ist es für das untergeordnete Element ungültig, mithilfe des Randes eine prozentuale Höhe festzulegen :0 Auto legt die horizontale Zentrierung fest: Mit margin:0 auto kann das Element im Standardmodus horizontal zentriert werden, im Quirks-Modus schlägt dies jedoch fehl.
(Es gibt noch viel mehr. Es spielt keine Rolle, was er antwortet. Der Schlüssel liegt darin, zu sehen, ob die Antworten, die er beantwortet hat, aus seiner eigenen Erfahrung stammen, oder ob er sie aus Artikeln gelesen hat oder sie gar nicht kannte alle.)
Es ist bequemer, die Version zu überarbeiten. Sie müssen nur die CSS-Datei ändern.
Die Seitenladegeschwindigkeit ist schneller, die Struktur ist klar und die Seitenanzeige ist prägnant.
Leistung ist von Struktur getrennt.
Einfach zu optimieren (SEO), die Suchmaschine ist benutzerfreundlicher und es ist einfacher, einen höheren Rang zu erreichen.
a:alt(alt text): Für Benutzeragenten (UA), die keine Bilder, Formulare oder Applets anzeigen können, wird das alt-Attribut verwendet, um Ersatztext anzugeben. Die Sprache des Ersetzungstextes wird durch das lang-Attribut angegeben. (Im IE-Browser wird Alt als Tooltip angezeigt, wenn kein Titel vorhanden ist)
Titel (Tooltip): Dieses Attribut bietet vorgeschlagene Informationen für das Element, für das dieses Attribut festgelegt ist.
stark: Fettgedrucktes Hervorhebungs-Tag, Hervorhebung, zeigt die Wichtigkeit des Inhalts an
em: kursives Hervorhebungs-Tag, das stärker hervorgehoben wird und den Schwerpunkt des Inhalts anzeigt
Progressive Verbesserung: Erstellen Sie Seiten für Browser mit niedriger Version, um die grundlegendsten Funktionen sicherzustellen, und verbessern Sie dann Effekte und Interaktionen und fügen Sie zusätzliche Funktionen für fortgeschrittene Browser hinzu, um eine bessere Benutzererfahrung zu erzielen.
Anmutige Verschlechterung: Erstellen Sie von Anfang an die vollständige Funktionalität und machen Sie sie dann mit Browsern niedrigerer Versionen kompatibel.
Unterschied: Graceful Degradation geht vom komplexen Status Quo aus und versucht, das Angebot an Benutzererfahrung zu reduzieren, während progressive Enhancement von einer sehr einfachen, funktionierenden Version ausgeht und diese kontinuierlich erweitert, um sich an die Bedürfnisse der zukünftigen Umgebung anzupassen. Degradation (funktionaler Verfall) bedeutet, nach hinten zu blicken; fortschreitende Verbesserung bedeutet, nach vorne zu blicken und gleichzeitig die Wurzeln in einem sicheren Bereich zu halten.
Die „anmutige Herabstufung“-Perspektive
Die „anmutige Verschlechterung“-Ansicht besagt, dass Websites für die fortschrittlichsten und vollständigsten Browser entworfen werden sollten. Ordnen Sie das Testen von Browsern, die als „veraltet“ gelten oder fehlende Funktionen aufweisen, in der letzten Phase des Entwicklungszyklus an und beschränken Sie die Testobjekte auf die Vorgängerversion gängiger Browser (wie IE, Mozilla usw.).
Nach diesem Designparadigma wird davon ausgegangen, dass ältere Browser nur ein „schlechtes, aber passables“ Surferlebnis bieten. Sie können einige kleine Anpassungen vornehmen, um sie an einen bestimmten Browser anzupassen. Da sie jedoch nicht im Mittelpunkt unserer Aufmerksamkeit stehen, werden andere Unterschiede außer der Behebung größerer Fehler ignoriert.
Die Perspektive der „progressiven Verbesserung“
Die Perspektive der „progressiven Verbesserung“ geht davon aus, dass der Fokus auf dem Inhalt selbst liegen sollte.
Inhalte sind der Grund, warum wir Websites erstellen. Einige Websites zeigen es an, andere sammeln es, einige suchen danach, einige betreiben es und einige Websites enthalten sogar alle oben genannten Informationen, aber das Gleiche ist, dass es sich bei allen um Inhalte handelt. Dies macht „progressive Verbesserung“ zu einem vernünftigeren Designparadigma. Aus diesem Grund wurde es sofort von Yahoo! übernommen und zum Aufbau seiner Strategie „Graded Browser Support“ (Graded Browser Support) verwendet.
Dann kommt die Frage. Jetzt sieht der Produktmanager, dass die Webseiteneffekte von IE6, 7 und 8 viel weniger abgerundete Ecken und Schatten (CSS3) haben als moderne Browser höherer Versionen und dass sie Kompatibilität erfordern (verwenden Sie Bildhintergründe und verzichten Sie auf CSS3). ihn überzeugen?
CDN-Caching ist bequemer
Brechen Sie die Browser-Parallelitätsgrenzen auf
Cookie-Bandbreite sparen
Speichern Sie die Anzahl der Verbindungen zum Hauptdomänennamen und optimieren Sie die Reaktionsgeschwindigkeit der Seite
Verhindern Sie unnötige Sicherheitsprobleme
Webstandards und Standardisierungsorganisationen sind alle darauf ausgelegt, die Entwicklung des Webs „gesünder“ zu machen. Entwickler folgen einheitlichen Standards, reduzieren Entwicklungsschwierigkeiten und Entwicklungskosten, SEO wird besser und es werden keine Probleme dadurch verursacht Der Missbrauch von Code führt letztendlich zu einer Verbesserung der Benutzerfreundlichkeit der Website.
sessionStorage wird zum lokalen Speichern von Daten in einer Sitzung verwendet. Auf diese Daten kann nur von Seiten in derselben Sitzung zugegriffen werden, und die Daten werden zerstört, wenn die Sitzung endet. Daher handelt es sich bei sessionStorage nicht um einen dauerhaften lokalen Speicher, sondern nur um einen Speicher auf Sitzungsebene. LocalStorage wird für die dauerhafte lokale Speicherung verwendet, sofern die Daten nicht aktiv gelöscht werden.
Der Unterschied zwischen Webspeicher und Cookies
Das Konzept von Web Storage ähnelt dem von Cookies, der Unterschied besteht jedoch darin, dass es für eine größere Speicherkapazität konzipiert ist. Die Größe des Cookies ist begrenzt und das Cookie wird jedes Mal gesendet, wenn Sie eine neue Seite anfordern, was Bandbreite verschwendet. Darüber hinaus muss das Cookie einen Bereich angeben und kann nicht domänenübergreifend aufgerufen werden.
Darüber hinaus verfügt Web Storage über setItem, getItem, removeItem, clear und andere Methoden. Im Gegensatz zu Cookies müssen Front-End-Entwickler setCookie und getCookie selbst kapseln. Aber auch Cookies sind unverzichtbar: Cookies dienen der Interaktion mit dem Server und existieren als Teil der HTTP-Spezifikation, während Web Storage nur dazu dient, Daten lokal zu „speichern“.
src wird verwendet, um das aktuelle Element zu ersetzen, und href wird verwendet, um eine Verbindung zwischen dem aktuellen Dokument und der referenzierten Ressource herzustellen.
src ist die Abkürzung für „Quelle“ und zeigt auf den Speicherort einer externen Ressource. Der verwiesene Inhalt wird an der Stelle des aktuellen Tags in das Dokument eingebettet, die Ressource, auf die verwiesen wird, wird heruntergeladen Auf das Dokument angewendet, beispielsweise ein JS-Skript, Elemente wie IMG-Bilder und Frames.
Wenn der Browser dieses Element analysiert, wird das Herunterladen und Verarbeiten anderer Ressourcen angehalten, bis die Ressource geladen, kompiliert und ausgeführt wird. Das Gleiche gilt für Elemente wie Bilder und Frames, ähnlich wie beim Einbetten der angezeigten Ressourcen Ressource in das aktuelle Tag. Aus diesem Grund wird das js-Skript auch unten und nicht im Kopf platziert.
href ist die Abkürzung für Hypertext Reference, die auf den Speicherort der Netzwerkressource verweist und einen Link zum aktuellen Element (Anker) oder aktuellen Dokument (Link) herstellt
Dann erkennt der Browser das Dokument als CSS-Datei, lädt die Ressourcen parallel herunter und stoppt die Verarbeitung des aktuellen Dokuments nicht. Aus diesem Grund wird empfohlen, zum Laden von CSS die Link-Methode anstelle der @import-Methode zu verwenden.
png-8, png-24, jpeg, gif, svg.
Aber keine der oben genannten Antworten sind die endgültigen Antworten, die der Interviewer haben möchte. Der Interviewer möchte hören, dass es sich um Webp handelt. (Achten Sie auf neue Technologien und neue Dinge)
Lernen wir etwas über Webp: WebP-Format, ein von Google entwickeltes Bildformat, um das Laden von Bildern zu beschleunigen. Das Bildkomprimierungsvolumen beträgt nur etwa 2/3 von JPEG und kann eine Menge Serverbandbreitenressourcen und Datenspeicherplatz einsparen. Bekannte Websites wie Facebook Ebay haben damit begonnen, das WebP-Format zu testen und zu verwenden.
Bei gleicher Qualität ist das Volumen von Bildern im WebP-Format 40 % kleiner als das von Bildern im JPEG-Format
Mikroformate sind eine Sammlung maschinenlesbaren semantischen XHTML-Vokabulars und ein offener Standard für strukturierte Daten. Es handelt sich um ein spezielles Format, das für spezielle Anwendungen entwickelt wurde.
Vorteile: Fügen Sie Webseiten intelligente Daten hinzu, damit Website-Inhalte zusätzliche Tipps in der Ergebnisoberfläche der Suchmaschine anzeigen können. (Anwendungsbeispiel: Douban, bei Interesse selbst googeln)
Antwort: DNS-Cache, CDN-Cache, Browser-Cache, Server-Cache.
Bilder werden träge geladen. Sie können dem unsichtbaren Bereich auf der Seite ein Bildlaufleistenereignis hinzufügen, um den Abstand zwischen der Bildposition und dem oberen Rand des Browsers sowie den Abstand zwischen der Seite und der Seite zu bestimmen kleiner als letzteres ist, wird es zuerst geladen.
Wenn es sich um eine Diashow, ein Fotoalbum usw. handelt, können Sie die Technologie zum Vorladen von Bildern verwenden, um zuerst das vorherige und das nächste Bild des aktuell angezeigten Bildes herunterzuladen.
Wenn es sich bei dem Bild um ein CSS-Bild handelt, können Sie CSSsprite, SVGsprite, Iconfont, Base64 und andere Technologien verwenden.
Wenn das Bild zu groß ist, können Sie ein speziell codiertes Bild verwenden. Beim Laden wird zuerst ein besonders komprimiertes Miniaturbild geladen, um das Benutzererlebnis zu verbessern.
Wenn der Bildanzeigebereich kleiner als die tatsächliche Größe des Bildes ist, wird das Bild zuerst auf der Serverseite entsprechend den Geschäftsanforderungen komprimiert, und die komprimierte Bildgröße stimmt mit der Anzeige überein.
Wenn die Seite entfernt wird oder verloren geht, kann sie eine klare Struktur aufweisen:
HTML selbst hat keine Leistung, und zwar mit einer Schriftgröße von 2em, und fett ist nicht die Leistung von HTML Dies sind eigentlich die Standardwerte von HTML, sodass die Seite eine klare Struktur aufweisen kann, wenn sie entfernt wird. Dies ist jedoch kein Vorteil der semantischen HTML-Struktur Der Zweck des Standardstils besteht auch darin, HTML besser auszudrücken. Man kann sagen, dass der Standardstil des Browsers und die semantische HTML-Struktur untrennbar miteinander verbunden sind.
Screenreader (wenn der Besucher sehbehindert ist) „lesen“ Ihre Seite vollständig auf der Grundlage Ihres Markups.
Wenn Sie beispielsweise semantisches Markup verwenden, „buchstabieren“ Screenreader Ihr Wort, anstatt zu versuchen, es vollständig auszusprechen.
PDAs, Mobiltelefone und andere Geräte sind möglicherweise nicht in der Lage, Webseiten wie normale Computerbrowser darzustellen (normalerweise, weil diese Geräte nur eine schwache CSS-Unterstützung bieten)
Durch die Verwendung von semantischem Markup wird sichergestellt, dass diese Geräte Webseiten auf sinnvolle Weise rendern. Im Idealfall hat das Anzeigegerät die Aufgabe, Webseiten im Einklang mit den Bedingungen des Geräts selbst darzustellen
Semantisches Markup stellt die relevanten Informationen bereit, die das Gerät benötigt, sodass Sie nicht alle möglichen Anzeigesituationen berücksichtigen müssen (einschließlich vorhandener oder neuer Geräte in der Zukunft). Ein Mobiltelefon kann beispielsweise einen Markup-Titeltext verwenden Wird auf einem Handheld-Computer möglicherweise in größerer Schrift angezeigt, sobald Sie den Text als Titel markiert haben, können Sie sicher sein, dass das Lesegerät ihn entsprechend seiner eigenen Bedingungen liest.Suchmaschinen-Crawler verlassen sich auch auf Markup, um den Kontext und die Gewichtung einzelner Schlüsselwörter zu bestimmen
In der Vergangenheit haben Sie vielleicht nicht daran gedacht, dass Suchmaschinen-Crawler auch „Besucher“ der Website sind, aber jetzt sind sie tatsächlich äußerst wertvolle Benutzer. Ohne sie können Suchmaschinen Ihre Website nicht indizieren Normale Benutzer werden sehr traurig sein, sie zu besuchen.
Es ist sehr wichtig, ob Ihre Seite für Crawler leicht verständlich ist, da Crawler das für die Präsentation verwendete Markup weitgehend ignorieren und sich nur auf semantisches Markup konzentrieren.
Wenn daher der Titel der Seitendatei mit einem Tag versehen ist, kann es sein, dass diese Seite in den Suchergebnissen weiter unten positioniert wird. Semantisches Markup erleichtert nicht nur die Benutzerfreundlichkeit, sondern erleichtert auch die korrekte Verwendung von CSS und JavaScript selbst Bietet viele „Hooks“, um den Stil und das Verhalten der Seite anzuwenden.
SEO verlässt sich hauptsächlich auf den Inhalt Ihrer Website und externe Links.
Einfach für die Teamentwicklung und -wartung
W3C hat einen guten Standard für uns festgelegt. Jeder im Team befolgt diesen Standard, der viele differenzierte Dinge reduzieren, Entwicklung und Wartung erleichtern, die Entwicklungseffizienz verbessern und sogar eine modulare Entwicklung erreichen kann.
Verstehen Sie, wie Suchmaschinen Webseiten crawlen und indizieren
Sie müssen die grundlegenden Funktionsprinzipien einiger Suchmaschinen, die Unterschiede zwischen Suchmaschinen, die Funktionsweise von Suchrobotern (SE-Robots oder Webcrawler), die Sortierung von Suchergebnissen durch Suchmaschinen usw. kennen.
Meta-Tag-Optimierung
Enthält hauptsächlich Thema (Titel), Website-Beschreibung (Beschreibung) und Schlüsselwörter (Schlüsselwörter). Es gibt auch andere versteckte Texte wie Autor (Autor), Kategorie (Verzeichnis), Sprache (Kodierungssprache) usw.
So wählen Sie Schlüsselwörter aus und platzieren sie auf Webseiten
Sie müssen bei der Suche Schlüsselwörter verwenden. Die Keyword-Analyse und -Auswahl ist eine der wichtigsten Aufgaben der Suchmaschinenoptimierung. Bestimmen Sie zunächst die Hauptschlüsselwörter für die Website (normalerweise etwa 5) und optimieren Sie diese Schlüsselwörter dann, einschließlich Keyword-Dichte (Density), Relevanz (Relavancy), Prominenz (Prominency) usw.
Erfahren Sie mehr über die wichtigsten Suchmaschinen
Obwohl es viele Suchmaschinen gibt, bestimmen nur wenige den Website-Traffic. Zu den englischen gehören beispielsweise hauptsächlich Google, Yahoo, Bing usw.; zu den chinesischen gehören Baidu, Sogou, Youdao usw. Verschiedene Suchmaschinen haben unterschiedliche Regeln für das Crawlen, Indizieren und Sortieren von Seiten. Sie müssen auch die Beziehung zwischen Suchportalen und Suchmaschinen verstehen. Beispielsweise verwendet AOL die Suchtechnologie von Google für die Websuche und MSN die Technologie von Bing.
Haupt-Internetverzeichnis
Open Directory selbst ist keine Suchmaschine, sondern ein großes Website-Verzeichnis. Der Hauptunterschied zwischen Open Directory und einer Suchmaschine besteht in der Art und Weise, wie Website-Inhalte erfasst werden. Das Verzeichnis wird manuell bearbeitet und umfasst hauptsächlich die Homepage der Website; die Suchmaschine sammelt diese automatisch und crawlt zusätzlich zur Homepage eine große Anzahl von Inhaltsseiten.
Pay-per-Click-Suchmaschine
Auch Suchmaschinen müssen überleben, da der Internethandel immer ausgereifter wird. Die typischsten sind Overture und Baidu und natürlich Googles Werbeprojekt Google Adwords. Immer mehr Menschen nutzen Suchmaschinen-Klickanzeigen, um kommerzielle Websites zu finden. Es gibt auch viel Wissen über Optimierung und Ranking. Man muss lernen, die meisten Klicks mit den geringsten Werbeinvestitionen zu erzielen.
Suchmaschinenanmeldung
Nachdem die Website fertig ist, sollten Sie nicht herumliegen und darauf warten, dass Kunden vom Himmel fallen. Der einfachste Weg, dass andere Sie finden, besteht darin, Ihre Website bei einer Suchmaschine einzureichen. Wenn Sie eine kommerzielle Website haben, müssen Sie für die Aufnahme in die großen Suchmaschinen und Verzeichnisse zahlen (z. B. verlangt Yahoo 299 US-Dollar). Die gute Nachricht ist jedoch, dass (zumindest bisher) die größte Suchmaschine, Google, derzeit kostenlos ist , und es dominiert über 60 % des Suchmarktes.
Linkaustausch und Linkpopularität (Linkpopularität)
Webinhalte sind in Form von Hypertext miteinander verknüpft, und das Gleiche gilt auch zwischen Websites. Zusätzlich zu Suchmaschinen surfen Menschen täglich über Links zwischen verschiedenen Websites. Je mehr Links andere Websites auf Ihre Website haben, desto mehr Traffic erhalten Sie. Noch wichtiger: Je mehr externe Links Ihre Website hat, desto wichtiger wird sie von Suchmaschinen berücksichtigt und Sie erhalten somit ein höheres Ranking.
Angemessene Tag-Nutzung
Externes Stylesheet, Einführung einer externen CSS-Datei
Internes Stylesheet, fügen Sie den CSS-Code in das
-Tag einInline-Stil, definieren Sie den CSS-Stil direkt im HTML-Element
Abgeleiteter Selektor (deklariert mit HTML-Tag)
ID-Selektor (deklariert mit DOM-ID)
Klassenselektor (deklariert mit einem Stilklassennamen)
Attributauswahl (mit DOM-Attributen deklariert, gehört zu CSS2, wird von IE6 nicht unterstützt, wird nicht häufig verwendet, vergessen Sie es, wenn Sie es nicht wissen)
Zusätzlich zu den ersten drei Basisselektoren gibt es auch einige erweiterte Selektoren, darunter
Nachkommenselektor (verwenden Sie eine Leerzeichentrennung, z. B. div .a{ })
Gruppenauswahl (verwenden Sie Komma-Trennung, z. B. p,div,#a{ })
Dann stellt sich die Frage: Wie wird die Priorität des CSS-Selektors definiert?
Grundprinzipien:
Im Allgemeinen gilt: Je spezifischer ein Selektor ist, desto höher ist seine Priorität. Das heißt, je genauer die Auswahlpunkte sind, desto höher ist ihre Priorität.
Komplexe Berechnungsmethode:
Verwenden Sie 1, um die Priorität des abgeleiteten Selektors anzugeben
Verwenden Sie 10, um die Priorität des Klassenselektors anzugeben
Verwenden Sie 100, um die Priorität des ID-Selektors anzugeben
div.test1 .span var priorität 1 10 10 1
span#xxx .songs li Priority 1 100 10 1
#xxx li Priorität 100 1
Dann stellt sich die Frage: Schauen Sie sich den folgenden Code an: Welche Farbe hat der Text im
-Tag?
123
Antwort: rot. Es hängt mit der Reihenfolge der Stildefinitionen in der Datei zusammen, d. h. die späteren überschreiben die vorherigen, und hat nichts mit der Reihenfolge in
zu tun.
Das Grundlegendste:
Setzen Sie das Anzeigeattribut auf „Keine“ oder setzen Sie das Sichtbarkeitsattribut auf „Ausgeblendet“
Technisch:
Setzen Sie die Breite und Höhe auf 0, die Transparenz auf 0 und die Z-Index-Position auf -1000
Antwort: Der Stil des angeklickten und besuchten Hyperlinks verfügt nicht mehr über „Hover“ und „Aktiv“. Die Lösung besteht darin, die Reihenfolge der CSS-Attribute zu ändern: L-V-H-A (Link, besucht, Hover, aktiv)
Antwort: Das Schreiben verschiedener CSS-Codes für verschiedene Browser ist CSS-Hack.
Ein Beispiel ist wie folgt:
|
#test { Breite:300px; Höhe: 300px; Hintergrundfarbe:blau; /*firefox*/ background-color:red9; /*all ie*/ Hintergrundfarbe:gelb; /*ie8*/ Hintergrundfarbe:rosa; /*ie7*/ _background-color:orange; /*ie6*/ } :root #test { background-color:purple9 } /*ie9*/ @media all and (min-width:0px){ #test {background-color:black;} } /*opera*/ @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/ |
Antwort: Ich weiß, dass Sie CSS3 verwenden müssen. Verwenden Sie Animationen, um einen einfachen Diashow-Effekt zu erstellen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/**HTML**/ div.ani /**CSS**/ .ani{ Breite:480px; Höhe:320px; margin:50px auto; Überlauf: versteckt; box-shadow:0 0 5px rgba(0,0,0,1); Hintergrundgröße: Cover; Hintergrundposition: Mitte; -webkit-animation-name: "loops"; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: unendlich; } @-webkit-keyframes „Schleifen“ { 0 % { Hintergrund:url(http://d.hiphotos.baidu.com/image/w=400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg ) keine Wiederholung; }25 % { Hintergrund:url(http://b.hiphotos.baidu.com/image/w=400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) keine Wiederholung; } 50 % { Hintergrund:url(http://b.hiphotos.baidu.com/image/w=400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no -repeat; } 75 % { Hintergrund:url(http://g.hiphotos.baidu.com/image/w=400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no -repeat; } 100 % { Hintergrund:url(http://c.hiphotos.baidu.com/image/w=400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) keine Wiederholung; } } |
Elementeigenschaften (Block) auf Blockebene:
belegt immer eine eigene Zeile, d. h. es beginnt in einer anderen Zeile, und die folgenden Elemente müssen ebenfalls in einer anderen Zeile beginnen;
Breite, Höhe, Abstand und Rand können alle gesteuert werdenEigenschaften des Inline-Elements (Inline):
befindet sich in derselben Zeile wie benachbarte Inline-Elemente;
Breite, Höhe, Ober-/Unterseite des inneren Randes (padding-top/padding-bottom) und Ober-/Unterseite des äußeren Randes (margin-top/margin-bottom) können nicht geändert werden (also auch links und rechts). (Abstand und Rand können eingestellt werden), also die Größe des Texts oder der darin enthaltenen Bilder.
Dann stellt sich die Frage: Was sind die standardmäßigen Inline-Block-Elemente, die Browser haben (die intrinsische Abmessungen haben und Höhe und Breite festlegen können, aber nicht automatisch umbrochen werden)?
Antwort: ,
25. Was ist Randüberlappung? Welche Folgen haben Überschneidungen?
In CSS können die Ränder zweier benachbarter Boxen (die Geschwister oder Vorfahren sein können) zu einem einzigen Rand zusammengefasst werden. Diese Art der Zusammenführung von Rändern wird als Reduzieren bezeichnet, und die resultierenden Ränder werden als kollabierte Ränder bezeichnet.
Das Faltergebnis folgt den folgenden Berechnungsregeln:
Wenn zwei benachbarte Ränder beide positive Zahlen sind, ist das Faltergebnis der größere Wert zwischen ihnen.
Wenn zwei benachbarte Ränder beide negativ sind, ist das Faltergebnis der größere der beiden Absolutwerte.
Wenn die beiden Ränder einmal positiv und einmal negativ sind, ist das Faltergebnis die Summe der beiden.
26. Was ist der Unterschied zwischen den Transparenzeffekten von rgba() und der Opazität?
Und rgba() wirkt sich nur auf die Farbe des Elements oder seine Hintergrundfarbe aus. (Untergeordnete Elemente von Elementen, die RGBA-Transparenz festlegen, erben den Transparenzeffekt nicht!)
27. Welche beiden Eigenschaften in CSS können dafür sorgen, dass Text vertikal und horizontal überlappt?
Horizontale Richtung: Buchstabenabstand
Dann stellt sich die Frage: Wissen Sie, welche wunderbaren Einsatzmöglichkeiten der Buchstabenabstand bietet?
Antwort: Es kann verwendet werden, um das Problem der Zeilenumbrüche zwischen Inline-Block-Elementen zu beseitigen.
28. Wie zentriert man ein schwebendes Element vertikal?
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| // Methode 1: Höhe und Breite des Elements kennen
#div1{ Hintergrundfarbe:#6699FF; Breite:200px; Höhe:200px; position: absolute; // Das übergeordnete Element benötigt eine relative Positionierung oben: 50 %; übrig: 50 %; margin-top:-100px; //Halbe Höhe, Breite Rand links: -100px; }
//Methode 2: Höhe und Breite des unbekannten Elements
#div1{ Breite: 200px; Höhe: 200px; Hintergrundfarbe: #6699FF;
margin:auto; position: absolute; // Das übergeordnete Element benötigt eine relative Positionierung links: 0; oben: 0; rechts: 0; unten: 0; } |
那么问题来了，如何垂直居中一个?（用更简便的方法。）
|
1 2 3 4 5 6 |
#container // { display:table-cell; text-align:center; vertical-align:middle; } |
Px und em sind beide Längeneinheiten. Der Unterschied besteht darin, dass der Wert von px fest ist, was immer Sie angeben, und er einfacher zu berechnen ist. Der Wert von em ist nicht festgelegt und em erbt die Schriftgröße des übergeordneten Elements.
Die Standardschrifthöhe des Browsers beträgt 16 Pixel. Daher gilt für unangepasste Browser: 1em=16px. Dann 12px=0,75em, 10px=0,625em.
Es gibt viele Reset-Stile. Jeder Front-End-Entwickler muss über eine häufig verwendete CSS-Datei zum Zurücksetzen verfügen und wissen, wie man sie verwendet. Tun sie es blind oder wissen sie, warum sie es tun? Der Grund dafür ist, dass verschiedene Browser unterschiedliche Standardstile für einige Elemente haben. Wenn Sie nicht damit umgehen, kann es bei verschiedenen Browsern zu notwendigen Risiken oder dramatischeren Konsequenzen kommen.
Sie können „Normalisieren“ verwenden, um Ihre Reset-Style-Datei zu ersetzen. Es werden nicht alle Stile zurückgesetzt, sondern nur ein angemessener Satz an Standardstilwerten bereitgestellt. Dies sorgt dafür, dass es in allen Browsern konsistent und sinnvoll ist, andere Dinge (z. B. fettgedruckte Titel) jedoch nicht gestört werden.
In dieser Hinsicht ist es unmöglich, bei jedem Reset einen Reset durchzuführen. Es ist auch wirklich etwas mehr als ein Reset und behebt Macken, über die Sie nie nachdenken müssten, wie inkonsistente Audioelemente oder inkonsistente Zeilenhöhen von HTML.
Sie sind CSS-Präprozessoren. Es ist eine Abstraktionsschicht auf CSS. Sie werden mit einer speziellen Syntax/Sprache in CSS kompiliert.
Less ist beispielsweise eine Sprache im dynamischen Stil, die über die Eigenschaften einer dynamischen Sprache verfügt, z. B. Variablen, Vererbung, Operationen und Funktionen, die auf dem Client ausgeführt werden können (unterstützt IE 6, Webkit, Firefox). , oder One läuft serverseitig (mit Node.js).
Warum sie verwenden?
Klare Struktur und einfache Erweiterung.
Unterschiede in der privaten Browser-Syntax können leicht blockiert werden. Es erübrigt sich zu erwähnen, dass dies die wiederholte Verarbeitung von Unterschieden in der Browser-Syntax einschließt und unnötige mechanische Arbeit reduziert.
Mehrfachvererbung kann problemlos implementiert werden.
Voll kompatibel mit CSS-Code und kann problemlos auf alte Projekte angewendet werden. LESS erweitert lediglich die CSS-Syntax, sodass auch alter CSS-Code mit LESS-Code kompiliert werden kann.
Anzeige: Blenden Sie das entsprechende Element aus, ohne den ursprünglichen Platz des Elements einzunehmen.
Sichtbarkeit: Das entsprechende Element ausblenden und den ursprünglichen Platz des Elements einnehmen.
Das heißt, nach Verwendung des CSS-Attributs „display:none“ gehen die Breite, Höhe und andere Attributwerte des HTML-Elements (Objekts) „verloren“ und nach Verwendung des Attributs „visibility:hidden“ gehen die Werte verloren Das HTML-Element (Objekt) ist nur optisch unsichtbar (völlig transparent), während die räumliche Position, die es einnimmt, erhalten bleibt.
Link gehört zum HTML-Tag, während @import in CSS bereitgestellt wird
Wenn die Seite geladen wird, wird gleichzeitig der Link geladen und das von @import referenzierte CSS wird erst geladen, wenn die Seite geladen ist
@import kann nur in IE5 oder höher erkannt werden und der Link ist ein HTML-Tag, sodass kein Problem mit der Browserkompatibilität besteht
Das Gewicht des von Link eingeführten Stils ist größer als die Referenz von @import (@import importiert den referenzierten Stil in die aktuelle Seite)
Es gibt zwei Arten von CSS-Boxmodellen: IE-Boxmodell und Standard-W3C-Boxmodell
Box-Modell: Inhalt, Polsterung, Ränder (im Allgemeinen nicht in der tatsächlichen Breite der Box enthalten), Rand
Aufgrund von Browserkompatibilitätsproblemen haben verschiedene Browser unterschiedliche Standardstilwerte für Tags. Wenn die Initialisierung fehlschlägt, führt dies zu Anzeigeunterschieden zwischen verschiedenen Browsern
Aber die Initialisierung von CSS wird einen kleinen Einfluss auf die Suchmaschinenoptimierung haben
BFC (Formatierungskontext auf Blockebene), eine Box, die einen neuen BFC erstellt, wird unabhängig angeordnet, und das Layout der Elemente innerhalb der Box hat keinen Einfluss auf die Elemente außerhalb der Box. Das Problem der Randüberlappung zwischen zwei benachbarten Boxen im selben BFC in vertikaler Richtung
BFC bedeutet, dass im Browser ein unabhängiger Rendering-Bereich erstellt wird. Das Layout aller Elemente in diesem Bereich hat keinen Einfluss auf das Layout von Elementen außerhalb des Bereichs. Dieser Rendering-Bereich funktioniert nur für Elemente auf Blockebene
38. Was ist HTML-Semantik?Es ist förderlich für die SEO-Optimierung und die Aufnahme in Suchmaschinen (bequemer für Suchmaschinen-Crawler-Programme zu identifizieren)
Erleichtert die Projektentwicklung und -wartung, macht den HTML-Code besser lesbar und einfacher auf anderen Geräten zu analysieren.
wird verwendet, um dem Browser mitzuteilen, in welchem Modus das Dokument gerendert werden soll
Im strikten Modus: Seitenlayout und JS-Parsing werden gemäß den höchsten vom Browser unterstützten Standards durchgeführt
Gemischter Modus: Nicht strikt gemäß dem Standard implementiert, hauptsächlich kompatibel mit alten Browsern und abwärtskompatibel
1. Alle Tags müssen ein entsprechendes Schluss-Tag haben
2. Die Namen aller Tag-Elemente und Attribute müssen in Kleinbuchstaben angegeben werden
3. Alle XML-Tags müssen ordnungsgemäß verschachtelt sein
4. Alle Attribute müssen in Anführungszeichen „“ gesetzt werden
5. Codieren Sie alle Sonderzeichen <
6. Weisen Sie allen Attributen einen Wert zu7. Verwenden Sie in Kommentaren kein „--“.
8. Bilder müssen Bildunterschriften haben
42. Häufige HTML-Kompatibilitätsprobleme?
2,3-Pixel-Problem, verursacht durch die Verwendung von float und dislpay:inline -3px
3. Der Hyperlink-Hover wird ungültig, nachdem darauf geklickt wurde. Verwenden Sie den Link „Hover aktiv“ in der richtigen Schreibreihenfolge
4. Das heißt, das Z-Index-Problem fügt position:relativedem übergeordneten Element hinzu
5.Png transparent verwendet js-Code zum Ändern6.Min-Höhe Mindesthöhe! Wichtige Lösung‘
7. Wählen Sie „Abdecken unter IE6“ und verwenden Sie die Iframe-Verschachtelung
8. Warum gibt es keine Möglichkeit, einen Container mit einer Breite von etwa 1 Pixel zu definieren (verursacht durch die Standardzeilenhöhe von IE6, verwenden Sie over:hidden, zoom:0.08 line-height:1px)
9.IE5-8 unterstützt keine Deckkraft, Lösung:
.opacity {
Deckkraft: 0,4
Filter: alpha(opacity=60); /* für IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)" /* für IE 8*/
}
10. IE6 unterstützt keinen transparenten PNG-Hintergrund, Lösung: Verwenden Sie GIF-Bilder unter IE6
43. Verständnis und Verständnis für WEB-Standards und W3C
Antwort: Schließen Sie Tags, Tags in Kleinbuchstaben, keine Verschachtelung, verbessern Sie die Suchwahrscheinlichkeit von Suchrobotern, verwenden Sie CSS- und JS-Skripte für externe Links, trennen Sie das Strukturverhalten, schnellere Dateidownloads und Seitengeschwindigkeiten und mehr Inhalte können angezeigt werden Der Inhalt kann Es ist für Benutzer zugänglich und kann von einer größeren Anzahl von Geräten abgerufen werden. Es ist nicht erforderlich, den Inhalt der Seite zu ändern und zu kopieren verbessert die Benutzerfreundlichkeit der Website.
Antwort: Element auf Blockebene: div p h1 h2 h3 h4 form ul
45. Was sind die drei Ebenen der Front-End-Seite? Welche Funktionen haben sie?
(1). Die -Deklaration befindet sich am Anfang des Dokuments, vor dem Teilt dem Parser des Browsers mit, welche Dokumenttypspezifikation zum Parsen dieses Dokuments verwendet werden soll.
(3) Im gemischten Modus wird die Seite lose abwärtskompatibel angezeigt. Emuliert das Verhalten älterer Browser, um zu verhindern, dass die Website nicht funktioniert.
(4). DOCTYPE existiert nicht oder das Format ist falsch, was dazu führt, dass das Dokument im gemischten Modus angezeigt wird.
47. Was sind die Inline-Elemente? Was sind Elemente auf Blockebene? Was sind die Leereelemente?
(1) CSS-Spezifikationen legen fest, dass jedes Element über ein Anzeigeattribut verfügt, das den Typ des Elements bestimmt. Der Standardanzeigeattributwert von div ist beispielsweise „block“. „block level“-Element; der Standardwert des Anzeigeattributs von span ist „inline“, was ein „inline“-Element ist.
(3) Bekannte leere Elemente:
48. CSS-Box-Modell?
(1) Zwei Typen, das IE-Box-Modell und das Standard-W3C-Box-Modell Rand und Polsterung;
(2) Box-Modell: Inhalt, Abstand, Rand, Rand.
* 1.id-Selektor (# myid)
2. Klassenauswahl (.myclassname)
3. Tag-Selektor (div, h1, p)
4. Angrenzender Selektor (h1 p)
5. Unterselektor (ul < li)
6. Nachkommenselektor (li a)
7. Wildcard-Selektor (*)
8. Attributselektor (a[rel = "external"])
9. Pseudoklassenselektor (a: hover, li: nth - child)
* Vererbbar: Schriftgröße, Schriftfamilienfarbe, UL LI DL DD DT;
* Nicht vererbbar: Randpolsterung, Randbreite, Höhe;
* Basierend auf dem Prinzip der nächstgelegenen Priorität hat diejenige mit der nächstgelegenen Stildefinition Vorrang
* Der Ladestil hängt von der zuletzt geladenen Positionierung ab;
Priorität ist:!important > id > tag
wichtig hat eine höhere Priorität als inline
Beispiele für neue Pseudoklassen in CSS3:
p:first-of-type wählt jedes
-Element aus, das das erste
-Element ist.
p:last-of-type Wählt jedes
-Element aus, das das letzte
-Element ist.
p:only-of-type Wählt jedes
-Element aus, das das einzige
-Element ist.
p:only-child Wählt jedes
-Element aus, das das einzige untergeordnete Element seines übergeordneten Elements ist.
p:nth-child(2) Wählt jedes
-Element aus, das das zweite untergeordnete Element seines übergeordneten Elements ist.
:enabled, :disabled steuern den deaktivierten Status von Formularsteuerelementen.
:aktiviert, das Optionsfeld oder Kontrollkästchen ist aktiviert.
50. Wie zentriert man ein Div, wie zentriert man ein schwebendes Element?
div{
Breite:200px;
margin:0 auto;
}
Ein schwebendes Element zentrieren
Bestimmen Sie die Breite und Höhe des Behälters Schicht 500 breit und 300 hoch
Legen Sie die Ränder der Ebene fest
.div {
Breite:500px; Höhe:300px;//Die Höhe muss nicht festgelegt werden
Rand: -150px 0 0 -250px;
position:relative; relative Positionierung
Hintergrundfarbe:rosa;//Der Effekt ist leicht zu erkennen
übrig: 50 %;
oben:50%;
}
51. Was sind die Kerne von Browsern? Welche Kompatibilität haben gängige Browser? Die Gründe, welche Lösungen es gibt und gängige Hack-Techniken ?
* Der Hintergrund erscheint im iE6-Browser, wenn das Bild PNG24 ist. Die Lösung besteht darin, es PNG8 zu machen.
* Der Standardrand und die Auffüllung der Browser sind unterschiedlich. Die Lösung besteht darin, zur Vereinheitlichung ein globales *{margin:0;padding:0;} hinzuzufügen.
* IE6-Fehler mit doppeltem Rand: Nachdem die Blockattributbezeichnung schwebt und ein horizontaler Rand vorhanden ist, ist der in IE6 angezeigte Rand größer als der eingestellte Wert.
Der durch Floating erzeugte doppelte Abstand, dh #box{ float:left:10px; margin:0 0 0 100px;}
In diesem Fall generiert der IE einen Abstand von 20 Pixel. Die Lösung besteht darin, ihn dem Float-Label-Stil-Steuerelement hinzuzufügen. ——_display:inline;Konvertieren Sie es in ein Inline-Attribut. (_Dieses Symbol wird nur von ie6 erkannt)
Die progressive Erkennungsmethode schließt nach und nach Teile vom Ganzen aus.
Zunächst einmal trennt die geschickte Verwendung der „9“-Marke den IE-Browser von allen Situationen.
Als nächstes verwenden Sie „ “ erneut, um IE8 von IE7 und IE6 zu trennen, sodass IE8 unabhängig erkannt wurde.
CSS
.bb{
Hintergrundfarbe:#f1ee18;/*Alle Erkennungen*/
.background-color:#00deff9; /*IE6, 7, 8 Erkennung*/
Hintergrundfarbe:#a200ff;/*IE6, 7 Erkennung*/
_background-color:#1e0bd1;/*IE6-Erkennung*/
}
* Unter IE können Sie die Methode zum Abrufen regulärer Attribute verwenden, um benutzerdefinierte Attribute abzurufen,
Sie können auch getAttribute() verwenden, um benutzerdefinierte Attribute abzurufen;
Unter Firefox können Sie getAttribute() nur verwenden, um benutzerdefinierte Attribute zu erhalten
Lösung: Benutzerdefinierte Attribute über getAttribute() abrufen.* Unter IE hat das gerade Objekt x- und y-Attribute, aber keine pageX- und pageY-Attribute
Unter Firefox hat das Ereignisobjekt die Attribute pageX und pageY, aber keine x- und y-Attribute.
* (Bedingter Kommentar) Der Nachteil besteht darin, dass unter dem IE-Browser möglicherweise zusätzliche HTTP-Anfragen hinzugefügt werden.
* Die chinesische Benutzeroberfläche von Chrome erzwingt, dass Text, der kleiner als 12 Pixel ist, standardmäßig als 12 Pixel angezeigt wird. Sie können CSS-Attribute hinzufügen -webkit-text-size-adjust: keine; Lösung.
Der Hover-Stil wird nicht angezeigt, nachdem der Hyperlink aufgerufen und besucht wurde. Die Lösung besteht darin, die Reihenfolge der CSS-Attribute zu ändern:
L-V-H-A: a:link {} a:visited {} a:hover {} a:active {}
52. Listen Sie die Anzeigewerte auf und erklären Sie ihre Funktionen. Welchen Wert haben Position, relativer und absoluter Positionierungsursprung?
keiner Standardwert. Wird als Inline-Elementtyp angezeigt.
Inline-Block wird wie ein Inline-Element angezeigt, sein Inhalt wird jedoch wie ein Blocktypelement angezeigt.
list-item wird wie ein Blocktypelement angezeigt und fügt Stillisten-Markup hinzu.
2. Der Wert der Position
*absolut
Erzeugt ein absolut positioniertes Element, das im Gegensatz zur statischen Positionierung relativ zum ersten übergeordneten Element positioniert ist.
*behoben (alter IE unterstützt nicht)
Erzeugen Sie ein absolut positioniertes Element, das relativ zum Browserfenster positioniert ist.
* relativ
Erzeugt ein relativ positioniertes Element, das relativ zu seiner normalen Position positioniert ist.
* statisch Standardwert. Es erfolgt keine Positionierung, das Element erscheint im normalen Fluss
* (oben, unten, links, rechts Z-Index-Deklarationen ignorieren).
* inherit gibt an, dass der Wert des Positionsattributs vom übergeordneten Element geerbt wird.
53. Wie unterscheidet sich die Berechnungsmethode des absoluten Einschlussblocks von der des normalen Durchflusses?
Selektor {Attribut 1: Wert 1; Attribut 2: Wert 2;…🎜>
Unterschiede in den Box-Modell-Rendering-Modi
58. Welche Attribute können in
CSS definiert werden, um zu verhindern, dass ein DOM-Element im sichtbaren Bereich des Browsers angezeigt wird?Technische Fähigkeiten:
Setzen Sie die Breite und Höhe auf 0, die Transparenz auf 0 und die Z-Index-Position auf -1000
59.
Was ist das Problem, dass der Hover-Stil nach dem Zugriff auf den Hyperlink nicht angezeigt wird? Wie kann man es lösen?#test {
Breite:300px;
Höhe: 300px;
Hintergrundfarbe:blau; /*firefox*/
background-color:red9; /*all ie*/
Hintergrundfarbe:gelb
Hintergrundfarbe:rosa; /*ie7*/_background-color:orange; /*ie6*/ }
:root #test { Hintergrundfarbe:lila9; } /*ie9*/
@media all and (min-width:0px){ #test {Hintergrundfarbe:schwarz
@media screen und (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome und safari*/
62/**HTML**/
div.ani
/**CSS**/
.ani{
Breite:480px;
Höhe:320px;
margin:50px auto;
Überlauf: versteckt;
box-shadow:0 0 5px rgba(0,0,0,1);
Hintergrundgröße: Cover;
Hintergrundposition: Mitte;
-webkit-animation-name: "Schleifen";
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: unendlich;
}
@-webkit-keyframes „Schleifen“ {
0 % { Hintergrund: URL (http://d.hiphotos.baidu.com/image/w=400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) keine Wiederholung;
}25 % {
Hintergrund: URL (http://b.hiphotos.baidu.com/image/w=400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) keine Wiederholung;
}
50 % {
Hintergrund: URL (http://b.hiphotos.baidu.com/image/w=400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) keine Wiederholung;
}
75 % {
Hintergrund:url(http://g.hiphotos.baidu.com/image/w=400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) keine Wiederholung;
}
100 % {
Hintergrund: URL (http://c.hiphotos.baidu.com/image/w=400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) keine Wiederholung;
}
}
63
belegt immer eine eigene Zeile, d. h. es beginnt in einer anderen Zeile, und die folgenden Elemente müssen ebenfalls in einer anderen Zeile beginnen;
Breite, Höhe, Abstand und Rand können alle gesteuert werden Browser haben auch standardmäßige Inline-Block-Elemente (die intrinsische Abmessungen haben und Höhe und Breite festlegen können, aber nicht automatisch umbrochen werden).
Antwort: ,
Was ist Randüberlappung? Welche Folgen haben Überschneidungen?
In CSS können die Ränder zweier benachbarter Felder (die Brüder oder Vorfahren sein können) zu einem einzigen Rand zusammengefasst werden. Diese Art der Zusammenführung von Rändern wird als Reduzieren bezeichnet, und die resultierenden Ränder werden als kollabierte Ränder bezeichnet.
Das Faltergebnis folgt den folgenden Berechnungsregeln:
Wenn zwei benachbarte Ränder beide positive Zahlen sind, ist das Faltergebnis der größere Wert zwischen ihnen.
65
66
Dann stellt sich die Frage: Wissen Sie, welche wunderbaren Einsatzmöglichkeiten der Buchstabenabstand bietet?
Antwort: Es kann verwendet werden, um das Problem der Zeilenumbruchlücke zwischen Inline-Blockelementen zu beseitigen.
67
Hintergrundfarbe:#6699FF;
Breite:200px;
Höhe:200px;
position: absolute; // Das übergeordnete Element benötigt eine relative Positionierung
oben: 50 %;
übrig: 50 %;
margin-top:-100px; //Halbe Höhe, Breite
Rand links: -100px;
}
//Methode 2: Höhe und Breite des unbekannten Elements
#div1{
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: #6699FF;
margin:auto;
position: absolute; // Das übergeordnete Element benötigt eine relative Positionierung
links: 0;
oben: 0;
rechts: 0;
unten: 0;
}
Dann stellt sich die Frage, wie man ein vertikal zentriert?
#container //s Containereinstellungen sind wie folgt
display:table-cell;
text-align:center;
vertikal-align:middle;
}
68
normalize.css
Es gibt viele Reset-Stile. Jeder Front-End-Entwickler muss über eine häufig verwendete CSS-Datei zum Zurücksetzen verfügen und wissen, wie man sie verwendet. Tun sie es blind oder wissen sie, warum sie es tun? Der Grund dafür ist, dass verschiedene Browser unterschiedliche Standardstile für einige Elemente haben. Wenn Sie nicht damit umgehen, kann es bei verschiedenen Browsern zu notwendigen Risiken oder dramatischeren Konsequenzen kommen.
In dieser Hinsicht ist es unmöglich, jedes Mal einen Reset durchzuführen. Es ist auch wirklich etwas mehr als ein Zurücksetzen und behebt Macken, über die Sie nie nachdenken müssten, wie zum Beispiel, dass HTML-
-Elemente inkonsistent sind oder
inkonsistent sind.
audio69. Was sind die Anzeigeattribute? Was kann getan werden? line-height
display:inline-block in Inline-Element konvertiert
Vererbbar: Schriftgröße, Schriftfamilienfarbe, ul li dl dd dt;
Nicht vererbbar: Randpolsterung, Randbreite, Höhe;
!important > id > tag
!important hat eine höhere Priorität als inline
*Prioritätsprinzip, die nächstgelegene Stildefinition hat Vorrang;
*Vorbehaltlich des zuletzt geladenen Stils;
Letzteres hat Semantik, Ersteres jedoch nicht.
1. Inline-Element
a – Anker
abbr – Abkürzung
Akronym – erstes Wort
b – fett (nicht empfohlen)
groß – große Schriftart
br – Zeilenumbruch
em – Betonung
Schriftart – Schriftarteinstellung (nicht empfohlen)
i – kursiv
img – Bild
Eingabe – Eingabefeld
Beschriftung – Tischbeschriftung
s – Unterstrich (nicht empfohlen)
Auswählen – Projektauswahl
klein – kleiner Schrifttext
span – häufig verwendeter Inline-Container zum Definieren von Blöcken innerhalb von Text
zuschlagen – durchschlagen
stark – Fette Hervorhebung
sub – tiefgestellt
sup – hochgestellt
textarea – mehrzeiliges Texteingabefeld
tt – Telex-Text
u – Unterstrich
var – Variablen definieren
2. Elemente auf Blockebene
Adresse – Adresse
Blockzitat – Blockzitat
Mitte – Ausrichtungsblock zentrieren
dir – Verzeichnisliste
div – Die häufig verwendete Blockebene ist auch das Haupt-Tag des CSS-Layouts
dl – Definitionsliste
Felder
403verbotene Lösung
die Funktionsnutzung
So lösen Sie das Problem der fehlenden ssleay32.dll
So stellen Sie den IE-Browser wieder her, um automatisch zu EDGE zu springen
Wie lösche ich den Speicherplatz für WPS-Cloud-Dokumente, wenn er voll ist?
Verwendung des Schlüsselworts Type in Go
So installieren Sie WordPress nach dem Herunterladen
So lösen Sie die Zeitüberschreitung
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
