Front-End-Interviewfragen (HTML/CSS) von großen Internetunternehmen

Html-Version:

　1. In welchen Browsern wurden die von Ihnen erstellten Seiten getestet? Was sind die Kerne dieser Browser?

• IE: Trident-Kernel
• Firefox: Gecko-Kernel
• Safari: Webkit-Kernel
• 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)

　

　2. Am Anfang jeder HTML-Datei steht etwas sehr Wichtiges: Doctype. Wissen Sie, wozu das dient?

Antwort: Die -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)

　3.Was ist der Quirks-Modus? Was ist der Unterschied zwischen ihm und dem Standardmodus?

Antwort:

Ab IE6 wurde der Standardsmodus eingeführt. Im Standardsmodus versucht der Browser, standardkonforme Dokumente genauso korrekt zu verarbeiten wie im angegebenen Browser.

Vor IE6 war CSS nicht ausgereift genug, daher hatten Browser vor IE5 nur 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:

Generell gibt es drei Unterschiede im Layout, der Stilanalyse und der 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.

Festlegen der Höhe in Prozent: Im Standardmodus wird die Höhe eines Elements durch den darin enthaltenen Inhalt bestimmt. Wenn das übergeordnete Element keine Höhe in Prozent festlegt, ist es für das untergeordnete Element ungültig, eine Höhe von festzulegen Prozentsatz mit margin: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, auf die er gestoßen ist, aus seiner eigenen Erfahrung stammen, ob er sie nur aus Artikeln gelesen hat oder es gar nicht weiß sie überhaupt.)

　4.Was sind die Vorteile des Div-CSS-Layouts gegenüber dem Tabellenlayout?

• 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.

　5.a: Was sind die Gemeinsamkeiten und Unterschiede zwischen dem Alt und dem Titel von img? b: Was sind die Gemeinsamkeiten und Unterschiede zwischen Strong und Em?

Antwort:

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.

b:

• 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

　

　6. Können Sie den Unterschied zwischen progressiver Verbesserung und eleganter Degradation beschreiben?

• 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 die progressive Verbesserung von einer sehr einfachen, funktionalen Version ausgeht und sich weiter ausdehnt, 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.

„Graceful Downgrade“-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.

„Progressive Enhancement“-Perspektive

Die Perspektive der „progressiven Verbesserung“ geht davon aus, dass dem Inhalt selbst Aufmerksamkeit geschenkt werden sollte.

Inhalte sind der Grund, warum wir eine Website 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 hier das Problem. 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?

　（Freies Spielen）

　

　7. Warum ist es effektiver, mehrere Domainnamen zum Speichern von Website-Ressourcen zu verwenden?

• CDN-Caching ist bequemer
• Bahnbrechende Browser-Parallelitätsgrenzen
• Cookie-Bandbreite sparen
• Speichern Sie die Anzahl der Verbindungen zum Hauptdomänennamen und optimieren Sie die Seitenantwortgeschwindigkeit
• Verhindern Sie unnötige Sicherheitsprobleme

　8. Bitte sprechen Sie über Ihr Verständnis der Bedeutung von Webstandards und Standardsetzungsorganisationen.

(Keine Standardantwort) Webstandards und Standardisierungsorganisationen sind alle darauf ausgelegt, die Entwicklung des Webs „gesünder“ zu machen. Entwickler folgen einheitlichen Standards, reduzieren Entwicklungsschwierigkeiten und Entwicklungskosten und SEO wird besser Der Missbrauch von Code führt nicht zu verschiedenen Fehlern und Sicherheitsproblemen und verbessert letztendlich die Benutzerfreundlichkeit der Website.

　9.Bitte beschreiben Sie den Unterschied zwischen Cookies, sessionStorage und localStorage? 　

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“.

　10. Beschreiben Sie kurz den Unterschied zwischen src und href.

Antwort:

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“, die auf den Speicherort einer externen Ressource verweist. Der verwiesene Inhalt wird an der Stelle des aktuellen Tags in das Dokument eingebettet, und die Ressource, auf die verwiesen wird, wird heruntergeladen und auf das Dokument angewendet werden, 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 gezeigten 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, wenn wir

zum Dokument hinzufügen

　

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.

　11. Welche Bildformate werden Ihrer Meinung nach bei der Webseitenproduktion verwendet?

Antwort:

　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 Webp, Apng hören. (Achten Sie auf neue Technologien und neue Dinge)

Populärwissenschaft 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.

　Apng: Der vollständige Name lautet "Animated Portable Network Graphics", eine Bitmap-Animationserweiterung von PNG, mit der dynamische Bildeffekte im PNG-Format erzielt werden können. Es wurde 2004 geboren, wurde jedoch von großen Browserherstellern nicht unterstützt. Bis es kürzlich von iOS Safari 8 unterstützt wurde, wird erwartet, dass es GIF ersetzt und zum dynamischen Grafikstandard der nächsten Generation wird.

　12. Wissen Sie, was Mikroformate sind? Sprechen Sie über Verständnis. Sollten Mikroformate in Front-End-Builds berücksichtigt werden?

Antwort:

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 intelligente Daten zu Webseiten hinzu, sodass Website-Inhalte zusätzliche Tipps in der Ergebnisoberfläche der Suchmaschine anzeigen können. (Anwendungsbeispiel: Douban, bei Interesse selbst googeln)

　

　13. Nachdem der CSS/JS-Code online ist, optimieren Entwickler häufig die Leistung. Ab dem Zeitpunkt, an dem der Benutzer die Webseite aktualisiert, wird eine JS-Anfrage normalerweise zwischengespeichert.

Antwort: DNS-Cache, CDN-Cache, Browser-Cache, Server-Cache.

　14. Es gibt eine große Anzahl von Bildern auf einer Seite (große E-Commerce-Website) und das Laden ist sehr langsam. Welche Methoden müssen Sie verwenden, um das Laden dieser Bilder zu optimieren? Erfahrung.

• 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.

　

　15. Wie verstehen Sie die Semantik der HTML-Struktur?

• 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 semantische Tags 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

Früher haben Sie vielleicht nicht bedacht, 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 stattdessen der Titel der Seitendatei markiert wird, erscheint die Seite möglicherweise weiter unten in den Suchergebnissen. Semantisches Markup erleichtert nicht nur die Benutzerfreundlichkeit, sondern erleichtert auch die korrekte Verwendung von CSS und JavaScript, da es selbst viele bietet „Hooks“, um den Stil und das Verhalten der Seite anzuwenden.

SEO hängt hauptsächlich vom Inhalt Ihrer Website und externen Links ab.

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.

　

16. Sprechen Sie darüber, was bei SEO aus der Front-End-Perspektive berücksichtigt werden muss.

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

Bei der Suche müssen Sie 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, spielen nur wenige eine entscheidende Rolle für 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

CSS:

　1. Gibt es eine Möglichkeit, den CSS-Stil eines DOM festzulegen?

• Externes Stylesheet, Einführung einer externen CSS-Datei
• Internes Stylesheet, fügen Sie den CSS-Code in das -Tag ein
• Inline-Stil, definieren Sie den CSS-Stil direkt im HTML-Element

　

　2. Welche Selektoren gibt es in CSS?

• 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:

Generell gilt: Je spezieller der Selektor, 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? .

 1 <style>
 2 .classA{ color:blue;}
 3 
 4 .classB{ color:red;}
 5 </style>
 6 
 7 
 8 
 9 <p class="classB classA"> 123 </p>
10 
11 

　　答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在

中的先后关系无关。 

　　

　　3.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？　　

　　最基本的：

　　设置display属性为none，或者设置visibility属性为hidden

　　技巧性：

　　设置宽高为0，设置透明度为0，设置z-index位置在-1000

 

　　4.超链接访问过后hover样式就不出现的问题是什么？如何解决？

　　答案：被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

 

　　5.什么是Css Hack？ie6,7,8的hack分别是什么？

　　答案：针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

　　示例如下：

 1  #test       {   
 2         width:300px;   
 3         height:300px;   
 4           
 5         background-color:blue;      /*firefox*/
 6         background-color:red\9;      /*all ie*/
 7         background-color:yellow\0;    /*ie8*/
 8         +background-color:pink;        /*ie7*/
 9         _background-color:orange;       /*ie6*/    }  
10         :root #test { background-color:purple\9; }  /*ie9*/
11     @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/
12     @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }       /*chrome and safari*/

 

　　6.请用Css写一个简单的幻灯片效果页面

　　答案：知道是要用css3。使用animation动画实现一个简单的幻灯片效果。

 1         /**HTML**/
 2         div.ani
 3 
 4         /**css**/
 5         .ani{
 6           width:480px;
 7           height:320px;
 8           margin:50px auto;
 9           overflow: hidden;
10           box-shadow:0 0 5px rgba(0,0,0,1);
11           background-size: cover;
12           background-position: center;
13           -webkit-animation-name: "loops";
14           -webkit-animation-duration: 20s;
15           -webkit-animation-iteration-count: infinite;
16         }
17         @-webkit-keyframes "loops" {
18             0% {
19                 background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;             
20             }
21             25% {
22                 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
23             }
24             50% {
25                 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
26             }
27             75% {
28                 background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
29             }
30             100% {
31                 background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
32             }
33         }

 

　　7.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

　　块级元素(block)特性：

• 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
• 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

　　内联元素(inline)特性：

• 和相邻的内联元素在同一行;
• 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

　　那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

　　答案： 、 、 、 、<label>。</label>

 

　　8.什么是外边距重叠？重叠的结果是什么？

　　答案：

　　外边距重叠就是margin-collapse。

　　在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

　　折叠结果遵循下列计算规则：

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

　　

　　9.rgba()和opacity的透明效果有什么不同？

　　答案：

　　rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

　　而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

 

　　10.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

　　答案：

　　垂直方向：line-height

　　水平方向：letter-spacing

 

　　那么问题来了，关于letter-spacing的妙用知道有哪些么？

　　答案:可以用于消除inline-block元素间的换行符空格间隙问题。

 

　　11.如何垂直居中一个浮动元素？

 1 // 方法一：已知元素的高宽
 2 
 3 #div1{
 4     background-color:#6699FF;
 5     width:200px;
 6     height:200px;
 7 
 8     position: absolute;        //父元素需要相对定位
 9     top: 50%;
10     left: 50%;
11     margin-top:-100px ;   //二分之一的height，width
12     margin-left: -100px;
13     }
14 
15 //方法二:
16 
17   #div1{
18     width: 200px;
19     height: 200px;
20     background-color: #6699FF;
21 
22     margin:auto;
23     position: absolute;        //父元素需要相对定位
24     left: 0;
25     top: 0;
26     right: 0;
27     bottom: 0;
28     }

 　　那么问题来了，如何垂直居中一个?（用更简便的方法。）

1 #container     //<img  alt="Front-End-Interviewfragen (HTML/CSS) von großen Internetunternehmen" >的容器设置如下
2 {
3     display:table-cell;
4     text-align:center;
5     vertical-align:middle;
6 }

 

　　12.px和em的区别。

　　px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

　　浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

 

　　13.描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？　

　　重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。

　　你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。

　　在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML的audio元素不一致或line-height不一致。

 

　　14.Sass、LESS是什么？大家为什么要使用他们？

　　他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

　　例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

　　为什么要使用它们？

• 结构清晰，便于扩展。
• 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
• 可以轻松实现多重继承。
• 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

　　

　　15.display:none与visibility:hidden的区别是什么？

• display : 隐藏对应的元素但不挤占该元素原来的空间。
• visibility: 隐藏对应的元素并且挤占该元素原来的空间。

 　　即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

　　

　　16.知道css有个content属性吗？有什么作用？有什么应用？

　　答案：

　　知道。css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。

　　最常见的应用是利用伪类清除浮动。

 1 //一种常见利用伪类清除浮动的代码
 2  .clearfix:after {
 3     content:".";       //这里利用到了content属性
 4     display:block; 
 5     height:0;
 6     visibility:hidden; 
 7     clear:both; }
 8 
 9 .clearfix { 
10     *zoom:1; 
11 }

　　after伪元素通过 content 在元素的后面生成了内容为一个点的块级元素，再利用clear:both清除浮动。

　　那么问题继续还有，知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？

　　答案：css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。 

　　具体实现方案：请戳张鑫旭大大的博文CSS计数器(序列数字字符自动递增)详解