Grundlegende Interviewfragen im HTML+CSS-Teil-Frontend

1. Inline-Elemente und Block-Level-Elemente? Elemente: und Alle anderen Elemente befinden sich in einer Zeile und die Höhe, Zeilenhöhe, Außenränder und Innenränder können nicht geändert werden. Es können nur Text oder andere Inline-Elemente aufgenommen werden ein Linienelement Element auf Blockebene: Beginnt immer in einer neuen Zeile, Höhe, Zeilenhöhe, Ränder und Abstand können alle gesteuert werden und können Inline-Elemente und andere Elemente aufnehmen. Ebenenelemente: Anzeige: Block;

Besondere Empfehlung

:

Zusammenfassung der CSS-Interviewfragen 2020 (aktuell)

2. Mehrere Elemente festlegen Wie viele Möglichkeiten gibt es, Floats für dieselbe Zeile zu löschen?

Mehrere Elemente für dieselbe Zeile festlegen: Float, Inline-BlockSo löschen Sie Floats: Methode 1: Neue Elemente hinzufügen, Clear anwenden: Both; Methode 2: Übergeordnetes p definiert Überlauf: Hidden;

Methode 3: Verwenden Sie :after und :before, um zwei Elementblöcke in das Element einzufügen, um den Effekt des Löschens des Floats zu erzielen .

.clear{zoom:1;}
.clear:after{content:““;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}


3. Seltsame Box-Modell-Boxgröße? Flexibles Box-Modell |. Box-Layout?

Box-Modell im Standardmodus: Box-Gesamtbreite/Höhe=Breite/Höhe+Polsterung+Rand+RandUnter Box-Modell im seltsamen Modus die Gesamtbreite und Höhe der Box umfassen Polsterung und Randbreite. Die Gesamtbreite/Höhe der Box = Breite/Höhe + Rand = Breite/Höhe des Inhaltsbereichs + Polsterung + Rand + Rand;Box-Größe hat zwei Werte: einer ist Content-Box und die andere ist Border-Box.

Bei der Einstellung „box-sizing:content-box“ werden die Standardmodus-Analyse und -Berechnung verwendet.

Bei der Einstellung „box-sizing:border-box“ werden die seltsame Modus-Analyse und -Berechnung verwendet.


4. Beschreiben Sie kurz ein paar CSS-Hacks?

(1) Bildlücke Fügen Sie ein Bild in p ein, und das Bild wird am unteren Rand von p erweitert um 3px. hack1: Schreiben Sie e388a4556c0f65e1904146cc1a846bee und a1f02c36ba31691bcfe87b2722de723b Hack2: Anzeigeblock zur Bildlücke in dt li hinzufügen. Hack: Anzeige hinzufügen: Block zu

(2) Standardhöhe In Versionen unter IE6 haben einige Blockelemente eine Standardhöhe (weniger als 18 Pixel)

Hack1: Fügen Sie hinzu: Schriftgröße zum Element :0;
Hack2: Anweisung: Überlauf: versteckt;
Die Formularzeilenhöhe ist inkonsistent.
Hack1: Anweisung zum Formular hinzufügen: float: ; border: 0; Zeiger
Hack: Wenn der Mauszeiger eines bestimmten Elements in eine Handform umgewandelt wird: Cursor: Zeiger;
Wenn a in li in ein Blockelement umgewandelt wird, setzen Sie float auf a und eine Leiterform wird angezeigt im IE
Hack1: Anzeige zu einem : inline-block hinzufügen;


Der Unterschied zwischen href und src? 🎜>

href (Hypertext-Referenz) Gibt den Speicherort einer Webressource (Hypertext-Referenz) an und definiert so einen Link oder eine Beziehung zwischen dem aktuellen Element oder aktuellen Dokument und dem erforderlichen Anker oder der erforderlichen Ressource, die durch das aktuelle Attribut definiert wird. Wird für Elemente wie Link und a verwendet. Das Attribut
src (Quelle) bettet die aktuelle Ressource nur an der durch das aktuelle Dokumentelement definierten Position ein. Es ist ein wesentlicher Bestandteil der Seite und eine Einführung. Wird für IMG, Skript, Iframe und andere Elemente verwendet.

title: Es ist sowohl ein HTML-Tag als auch ein HTML-Attribut. Wenn title als Attribut verwendet wird, wird es verwendet, um zusätzliche beschreibende Informationen für das Element bereitzustellen.

alt: alt ist ein Attribut des HTML-Tags. und das Alt-Attribut wird verwendet, um Ersatztext anzugeben. Es kann nur in IMG-, Area- und Eingabeelementen (einschließlich Applet-Elementen) verwendet werden. Es wird verwendet, um Textbeschreibungen bereitzustellen, damit Benutzer die Bildinformationen auf der Webseite verstehen kann nicht normal angezeigt werden

6.transformieren? Animation? Der Unterschied? Animationsdauer

Transformation: Wie width und left definiert es viele statische Stile von Elementen, um Funktionen wie Verformung, Drehung, Skalierung, Verschiebung und Perspektive durch die Kombination einer Reihe zu implementieren Mit vielen Funktionen können wir sehr coole statische Effekte erzielen (nicht animiert).
Animation: Wirkt auf das Element selbst und nicht auf das Stilattribut. Es wird verwendet, um einen rein ausdrucksstarken Javascript-Code zu ersetzen. Der Attributwert des aktuellen Frames kann explizit sein gesteuert durch Keyframe.

animationsdauer: Gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden.

7.n-ter-Typ |103d2ed9afd06aadce2c4f0ddddcb4953bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 Das li-Element ist das zweite Element unter ul (kann nicht gefunden werden).

Es wird empfohlen, im Allgemeinen den n-ten Typ zu verwenden, da die Wahrscheinlichkeit geringer ist, dass Probleme auftreten.


8. Was ist der Unterschied zwischen :before und ::before?

Einzelner Doppelpunkt (:) wird für CSS3-Pseudoklassen verwendet und ein doppelter Doppelpunkt (: :) wird für CSS3-Pseudoelemente verwendet. Bei Pseudoelementen, die vor CSS2 existierten, wie z. B. :before, haben der einzelne Doppelpunkt und der doppelte Doppelpunkt::before die gleiche Wirkung.

9. Wie zentriert man ein P nach oben, unten, links und rechts?

Antwort: Es gibt drei Methoden.

方法1： .p1{ width:400px;  height:400px;  border:#CCC 1px solid;   background:#99f;  position:absolute;  left:50%;   top:50%;   transform: translate(-50%,-50%); }   8eb75804e58375c7a2a4dd2914b2cc8394b3e26ee717c64999d7867364b1b4a3 方法2： .p2{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#99f;  position: absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto; }  25fdd61924ec43f68f6d130ac257deb194b3e26ee717c64999d7867364b1b4a3 方法3： .p3{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#9f9;  position: absolute;  left: 50%;  top:50%;  margin-left:-200px;  margin-top: -200px;  }   2b9d554b5f57adf913ed7fb08b7f273594b3e26ee717c64999d7867364b1b4a3

10.css2.0 und css3.0

Antwort: CSS3 stärkt die Funktionen von CSS2, fügt neue Attribute und neue Tags hinzu und löscht einige redundante Tags die Menge des Codes in Bezug auf das Layout. Das bisher komplizierte Layout kann nun mit nur einem Attribut (Attribute wie Spalten) gelöst werden. Weitere Effekte wurden hinzugefügt (abgerundete Ecken, Animationen usw.) und es wurden Verbesserungen am Boxmodell und den Listenmodulen vorgenommen. Allerdings ist die CSS3-Kompatibilität nicht gut und wird nur von einigen erweiterten Browserversionen unterstützt.

11. Der Unterschied zwischen Flex|Box?

(1) Der Zweck der Einführung des flexiblen Box-Layout-Modells besteht darin, eine effektivere Möglichkeit zu bieten Um ein Layout zu erstellen, werden Elemente im Container angeordnet, ausgerichtet und Leerraum zugewiesen. Das Flexbox-Layoutmodell kann normal funktionieren, auch wenn die Größe der Elemente im Container unbekannt ist oder sich dynamisch ändert. In diesem Layout-Modell passt ein Container die Größe und Reihenfolge der darin enthaltenen Elemente an, um den gesamten verfügbaren Platz entsprechend den Anforderungen des Layouts bestmöglich auszufüllen.

Wenn sich die Größe des Containers aufgrund der Bildschirmgröße oder Fenstergröße ändert, werden auch die darin enthaltenen Elemente dynamisch angepasst. Wenn beispielsweise die Behältergröße größer wird, werden die darin enthaltenen Gegenstände gestreckt, um den überschüssigen leeren Raum zu füllen. Wenn die Behältergröße kleiner wird, werden die Gegenstände geschrumpft, um zu verhindern, dass sie den Umfang des Behälters überschreiten. Das Flexbox-Layout ist richtungsunabhängig.

Bei der herkömmlichen Layoutmethode ordnet das Blocklayout die Blöcke in vertikaler Richtung von oben nach unten an.
Beim Inline-Layout werden die Blöcke in horizontaler Richtung angeordnet. Das Flexbox-Layout weist keine solchen inhärenten Richtungsbeschränkungen auf und kann von Entwicklern frei manipuliert werden.

(2) Der Unterschied zwischen Flex und Box: Display: Box ist ein alter Standard. Wenn Sie die antike Maschine berücksichtigen möchten, fügen Sie sie hinzu, nachdem das übergeordnete Element das Attribut display: box hat. Fügen Sie das Box-Flex-Attribut zu seinen untergeordneten Elementen hinzu. Sie können zulassen, dass untergeordnete Elemente entsprechend der Breite des übergeordneten Elements einen bestimmten Raumanteil einnehmen. Flex ist die neueste Version und wird von Dong Jis alten Maschinen nicht unterstützt.

Nachdem das übergeordnete Element display:flex festgelegt hat, ändert sich die Breite des untergeordneten Elements mit der Breite des übergeordneten Elements, display:box jedoch nicht. Der Android-UC-Browser unterstützt nur die Display:Box-Syntax, während der iOS-UC-Browser beide Methoden unterstützt.


12.viewport alle Attribute?

(1)width: Legen Sie die Breite des Layout-Ansichtsfensters fest, die eine positive Ganzzahl oder die Zeichenfolge „device-width“ ist;(2)initial-scale: Legen Sie den Anfangsmaßstab fest Skalierungswert der Seite, ist eine Zahl, wobei Dezimalstellen zulässig sind. (3)Minimum-Skalierung: Der vom Benutzer zulässige minimale Skalierungswert, der eine Zahl ist und Dezimalstellen enthalten kann.

(4)maximum-scale: Der vom Benutzer maximal zulässige Zoomwert, der eine Zahl ist und Dezimalstellen enthalten kann.

(5)Höhe: Legen Sie die Höhe des Layout-Ansichtsfensters fest. Dieses Attribut ist für uns nicht wichtig und wird selten verwendet.
(6)Benutzerskalierbar: Gibt an, ob dem Benutzer das Zoomen gestattet werden soll. nein‘ oder ‚ja‘ .
Android unterstützt auch: target-densitydpi, das die Dichtestufe des Zielgeräts darstellt. Seine Funktion besteht darin, zu bestimmen, wie viele physische Pixel 1px in CSS darstellt.
(7) target-densitydpi: Der Wert kann a sein numerischer Wert oder hohe Auflösung, eine der Zeichenfolgen mittlere Auflösung, niedrige Auflösung, Geräteauflösung


13. Wie versteht man die Semantik der HTML-Struktur?

Die sogenannte Etikettensemantik bezieht sich auf die Bedeutung des Etiketts. Der Hauptzweck der Semantik besteht darin, jedem den Zweck und die Funktion von Tags (Markups) und Attributen (Attributen) intuitiv verständlich zu machen und für Suchmaschinen geeignet zu sein. Mit einer guten Struktur und Semantik können unsere Webseiteninhalte natürlich leicht gecrawlt werden Dieser Ansatz, der den Suchmaschinen-Retrieval-Regeln entspricht, kann viel Aufwand bei der Website-Werbung einsparen und ist wartbarer, da die Struktur klar und sehr einfach zu lesen ist. Dies ist auch ein wichtiger Schritt in der Suchmaschinenoptimierung (SEO).

14. Pseudoklassenselektoren und Pseudoelemente? Gibt es in c3 eingeführte Pseudoklassenselektoren? Was sind die Pseudoelemente in c3?

Pseudoklassen werden durch einen Doppelpunkt dargestellt, während Pseudoelemente durch zwei Doppelpunkte dargestellt werden.

Pseudoklassenselektor:
Da sich der Status dynamisch ändert, kann es sein, dass ein Element einen Pseudoklassenstil erhält, wenn sich der Status ändert.

Pseudo-Element-Selektor:
ist kein Selektor für echte Elemente, sondern ein Selektor für Pseudo-Elemente, die in CSS definiert wurden

Eingeführt in c3 Pseudo-Klassen-Selektor:
:root()-Selektor, Root-Selektor, stimmt mit dem Root-Element des Dokuments überein, in dem sich Element E befindet. In einem HTML-Dokument ist das Stammelement immer 100db36a723c770d327fc0aef2ce13b1. Der :root-Selektor entspricht dem 100db36a723c770d327fc0aef2ce13b1-Element. Der

:not()-Selektor wird als negativer Selektor bezeichnet und ist genau derselbe wie der :not-Selektor in jQuery. Er kann alle Elemente außer einem bestimmten Element auswählen.

:empty() Selektor steht für leer. Wird verwendet, um Elemente ohne Inhalt auszuwählen, was bedeutet, dass überhaupt kein Inhalt vorhanden ist, auch kein Leerzeichen.

: Der target()-Selektor wird verwendet, um einen Stil für ein Zielelement auf der Seite anzugeben (die ID des Elements wird als Hyperlink auf der Seite verwendet. Dieser Stil wird nur verwendet, wenn der Benutzer klickt). auf den Hyperlink auf der Seite. Und es funktioniert, nachdem zum Zielelement gesprungen wurde.

:first-child() Selektor bedeutet, das Element E des ersten untergeordneten Elements des übergeordneten Elements auszuwählen. Ein einfaches Verständnis besteht darin, das erste untergeordnete Element im Element auszuwählen. Denken Sie daran, dass es sich um ein untergeordnetes Element und nicht um ein untergeordnetes Element handelt.

:nth-child() wählt ein oder mehrere spezifische untergeordnete Elemente eines Elements aus.

:nth-last-child() beginnt beim letzten untergeordneten Element eines übergeordneten Elements, um ein bestimmtes Element auszuwählen

:nth-of-type(n) Selektor und: Der nth- Der Child(n)-Selektor ist sehr ähnlich, außer dass er nur untergeordnete Elemente eines bestimmten Typs zählt, der im übergeordneten Element angegeben ist.

:only-child bedeutet, dass ein Element das einzige untergeordnete Element seines übergeordneten Elements ist.

:first-line Verwenden Sie Stile für die erste Textzeile eines Elements.

:first-letter Verwenden Sie Stile für den ersten Buchstaben oder das erste Wort des Textes in einem Element.

:before Fügt vor einem Element etwas Inhalt ein.

:after fügt nach einem Element etwas Inhalt ein.

Pseudoelement in c3:
::first-line wählt die erste Zeile des Elements aus und ändert beispielsweise den Stil der ersten Textzeile in jedem Absatz
::before und: :after Die beiden werden hauptsächlich zum Einfügen von Inhalten vor oder hinter dem Element verwendet. Der häufigste, den ich gesehen habe, ist Clear Floating.
::selection wird verwendet, um den Standardeffekt zu ändern der Auswahl von Text beim Durchsuchen von Webseiten

15.Was sind die neuen Funktionen von HTML5 und welche Elemente wurden entfernt? Wie gehe ich mit Browserkompatibilitätsproblemen mit neuen HTML5-Tags um? Wie kann man zwischen HTML und HTML5 unterscheiden?

* HTML5 ist keine Teilmenge von SGML mehr, es geht hauptsächlich um das Hinzufügen von Bildern, Standort, Speicherung, Multitasking und anderen Funktionen.
* Drag-and-Drop-API Bessere semantische Inhalts-Tags (Kopfzeile, Navigation, Fußzeile, Seite, Artikel, Abschnitt) Audio-, Video-API (Audio, Video) Canvas-API Geolocation) API Lokale Offline-Speicherung LocalStorage Langzeitspeicherung von Daten, Die Daten gehen nach dem Schließen des Browsers nicht verloren;
Sitzungsspeicherdaten werden nach dem Schließen des Browsers automatisch gelöscht. Formularsteuerelemente, Kalender, Datum, Uhrzeit, E-Mail, URL, Suche. Neue Technologie Webworker, Websocket, Geolocation
* Entfernt Elemente Rein ausdrucksstarke Elemente: Basefont, Big, Center, Font, s, Strike, Tt, U;
Elemente, die sich negativ auf die Benutzerfreundlichkeit auswirken: Frame, Frameset, Noframes; IE7/IE6 unterstützt Tags, die von der document.createElement-Methode generiert werden. Mit dieser Funktion können Sie dafür sorgen, dass diese Browser neue HTML5-Tags unterstützen. Nachdem der Browser die neuen Tags unterstützt, müssen Sie noch den Standardstil des Tags hinzufügen * Natürlich ist es am besten, ein ausgereiftes Framework zu verwenden. Das am häufigsten verwendete ist das html5shim-Frameworkf800c958742ca1ef46c68446aed32406 🎜>
html5shim.googlecode.com

/svn/trunk/html5.js"2cacc6d41bbb37262a98f745aa00fbf0 e36618a46e73719fa35d390715ebcac0`

* 上下margin重合问题
ie和ff都存在，相邻的两个p的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

* ie6对png图片格式支持不好(引用一段脚本处理)

18.简述前端优化的方式 旧的雅虎34条|h5新添加的方式

1. Minimieren Sie die Anzahl der HTTP-Anfragen
3. Vermeiden Sie Sprünge
Verzögern Sie das Laden von Inhalten
- Laden
7. Reduzieren Sie die Anzahl der DOM-Elemente
8. Teilen Sie den Seiteninhalt nach Domainnamen
Minimieren Sie die Anzahl der Iframes
11 . Verwenden Sie das Inhaltsverteilungsnetzwerk
12. Geben Sie „Expires“ oder „Cache-Control“ für den Dateiheader an. 14. Konfigurieren Sie den ETag so früh wie möglich.
16. Verwenden Sie GET, um AJAX-Anfragen zu vervollständigen
18. Vermeiden Sie die Verwendung von CSS-Ausdrücken (Ausdruck)
20 JavaScript und CSS
21. Verwenden Sie 2cdf5bf648cf2f33323966d7f58a7f3f
23. Platzieren Sie Skripte am Ende der Seite


19.jQuery-Version? 1.11 kompatibel?


Query 2.x-Serie hat die gleiche API wie jQuery 1.x, unterstützt aber nicht mehr IE6, 7 und 8.
Es wird empfohlen, die Version 1.x zu verwenden, es sei denn, Sie sind sicher, dass IE6-, 7- und 8-Benutzer nicht mehr auf die Website zugreifen.
jquery1.11 ist Version 1.x, die mit IE6, 7 und 8 kompatibel ist und daher auch IE9 unterstützt.

20. Innerhalb der Branche? Leere Elemente?

Inline-Elemente: Alle anderen Elemente befinden sich in derselben Zeile. Die Höhe, Zeilenhöhe, Außenränder und Innenränder können nicht geändert werden nur Text aufnehmen.

Elemente auf Blockebene: immer in einer neuen Zeile beginnen, Höhe, Zeilenhöhe, Ränder und Abstand können gesteuert werden, können Inline-Elemente und andere Elemente aufnehmen: in HTML-Elemente, HTML-Elemente ohne Inhalt werden als leere Elemente bezeichnet. Leere Elemente werden im öffnenden Tag geschlossen. 0c6dc11e160d3b678d68754cc175188a ist ein leeres Element ohne schließendes Tag.

21.Medienattribut? Bildschirm? Alle? Das Medienattribut max-width?min-width?

gibt das Gerät an, auf dem das verknüpfte Dokument angezeigt wird. Das Medienattribut wird verwendet, um verschiedene Stile für verschiedene Medientypen anzugeben. Der Bildschirm ist der Standardbildschirm des Computers. Alle gelten für alle Geräte. Die maximale Breite wird nicht ausgeführt, wenn sie die maximale Breite überschreitet, und die minimale Breite muss vor der Ausführung größer als die minimale Breite sein.

22. Was ist der Namensattributwert des Meta-Tags? Das

Name-Attribut wird hauptsächlich zur Beschreibung von Webseiten verwendet, und der entsprechende Attributwert ist Inhalt. Der Inhalt im Inhalt wird hauptsächlich von Suchmaschinenrobotern verwendet, um Informationen zu finden und zu klassifizieren. Das Syntaxformat des Namensattributs des Meta-Tags lautet: . Das Namensattribut hat hauptsächlich die folgenden Parameter:

A. Schlüsselwörter (Schlüsselwörter) Beschreibung: Schlüsselwörter werden verwendet, um Suchmaschinen mitzuteilen, welche Schlüsselwörter Ihre Webseite enthält.

B, Beschreibung (Beschreibung des Website-Inhalts) Beschreibung: Die Beschreibung wird verwendet, um Suchmaschinen den Hauptinhalt Ihrer Website mitzuteilen.

C, Roboter (Roboterführer) Beschreibung: Roboter werden verwendet, um Suchrobotern mitzuteilen, welche Seiten benötigt werden indiziert werden und welche Seiten Es ist kein Index erforderlich.

Zu den Parametern des Inhalts gehören „all“, „none“, „index“, „noindex“, „follow“, „nofollow“ und der Standardwert ist „all“. Beispiel: ＜meta name="robots" content="none"＞D, Autor(Autor)

23. Wie viele Möglichkeiten gibt es, Bilder auf mobilen Seiten auszuschneiden?


Responsives Layout, flexible Layout-Anzeige: Flex, verwenden Sie js zum Schreiben und Festlegen der Proportionen, legen Sie Pixel für das Stammelement fest und verwenden Sie rem als Einheit.


24. Was ist der Unterschied zwischen px/em/rem? Warum ist die Schriftgröße normalerweise auf 62,5 % eingestellt?

Die Schriftgröße relativ zum Text im aktuellen Objekt. Wenn die aktuelle Schriftgröße für Inline-Text nicht manuell festgelegt wurde, ist sie relativ zur Standardschriftgröße des Browsers. 1. Der Wert von em ist nicht festgelegt; 2. Wenn Sie rem verwenden, um die Schriftgröße für ein Element festzulegen, handelt es sich immer noch um eine relative Größe, jedoch nur relativ zum HTML-Stammelement. Man kann sagen, dass diese Einheit die Vorteile der relativen Größe und der absoluten Größe kombiniert. Dadurch können Sie alle Schriftgrößen proportional anpassen, indem Sie nur das Stammelement ändern, und Sie können die Kettenreaktion der zusammengesetzten Schriftgrößen Schicht für Schicht vermeiden.

rem wird relativ zum Browser skaliert. Der Standardwert von 1rem ist 16px. Im responsiven Layout ist es zu mühsam, rem

body{font-size=62.5% } zu diesem Zeitpunkt auf 1rem = 10px zurückzusetzen , es ist 1.2rem .

Was ist der Unterschied zwischen sass und scss?

Die Dateierweiterungen sind unterschiedlich Als Erweiterung wird das Suffix „.sass“ verwendet, und die Syntax von Sass wird mit strengen eingerückten Syntaxregeln ohne geschweifte Klammern ({}) und Semikolons (;) geschrieben. während SCSSs Das Syntaxschreiben ist unserem CSS-Syntaxschreiben sehr ähnlich.


26. Was tun, wenn CSS optimiert ist?

Komprimieren und verpacken, Bilder integrieren, Hacks vermeiden, Kompatibilitätsprobleme lösen, Abkürzungen verwenden, um die zukünftige Wartung von CSS sicherzustellen.

27. Wie komprimiere und füge ich CSS-Dateien zusammen?

Verwenden Sie gulp und installieren Sie gulp global auf der Startseite.
1. npm install --global gulp
2. Zweitens: gulp lokal installieren. npm install gulp --save-dev
3. Erstellen Sie eine Datei mit dem Namen gulpfile.js im Projektstammverzeichnis
var gulp = require('gulp');
gulp.task('default' , function () {
//Geben Sie hier Ihren Standard-Aufgabencode ein});
4. (Die Standardaufgabe namens default wird ausgeführt. Wenn Sie eine bestimmte Aufgabe separat ausführen möchten, geben Sie bitte gulp 5a3616b73b29b6ef8523164b750a7aee 7d6b528363c38dfdf8956b7f1cce7869 ein)
gulp
JS- und CSS-Dateien zusammenführen und komprimieren
komprimieren JS- und CSS-Dateien müssen auf die folgenden Komponenten verweisen:
gulp-minify-css: CSS komprimieren

28. Komponenten? Modulare Programmierung?

Komponentenprogrammierung: JS-CSS-HTML zusammenpacken, um Methoden und Effekte bereitzustellen;
Modularisierung: Dieselben Funktionen extrahieren und an einem Ort für die Programmierung speichern

29 . Bilder und Text in derselben Zeile anzeigen?

1 Fügen Sie das Attribut „vertical-align:middle“ zu p in CSS hinzu.
2 Platzieren Sie das Bild und den Text jeweils in unterschiedlichen p und positionieren Sie sie dann mit dem Attribut „margin“ so, dass sie in derselben Zeile angezeigt werden können.
3 Legen Sie das Bild als Hintergrundbild fest.

30. Ereignissprudeln deaktivieren

event.stopPropagation()

31. Standardereignis deaktivieren

event.preventDefault()

32. Was ist die richtige Einstellungsreihenfolge für den aktiven Hover-Link im Tag a

Link, besucht, Hover, aktiv? hat eine bestimmte Reihenfolge
a:link
a:visited
a:hover
a:active

33. So deaktivieren Sie die href-Sprungseite in einem Tag oder lokalisieren der Link

e.preventDefault();
href="javascript:void(0);

34. Langfristige Klicks auf Bilder auf dem Handy Das Telefon führt dazu, wie mit ausgewählten Bildern umgegangen wird

src: URL des Videoposters: Videocover, Bild wird angezeigt, wenn keine Wiedergabe erfolgt. Vorladen: Vorladen der automatischen Wiedergabe: Automatische Wiedergabeschleife: Schleife für die Wiedergabesteuerung: Browsereigene Steuerleistenbreite: Videobreite, Höhe: Videohöhe

36. Wie viele gängige Videokodierungsformate gibt es?

Videoformate: MPEG-1, MPEG-2 und MPEG4, AVI , RM-, ASF- und WMV-Formate

Videokodierungsformate: H.264, MPEG-4, MPEG-2, WMA-HD und VC-1

37.canvas auf dem Etikett Was ist Der Unterschied zwischen der Festlegung der Breite und Höhe im Stil?

Die Breite und Höhe des Canvas-Tags sind die tatsächliche Breite und Höhe der Leinwand, und die Breite und Höhe des Stils basieren darauf Dies ist die Höhe und Breite der Leinwand, wenn sie im Browser gerendert wird. Wenn die Breite und Höhe der Leinwand nicht angegeben ist, werden sie auf die Standardwerte gesetzt 🎜>

38.Rahmengröße?

Border-image: Grafischer RahmenBox-sizing: Mit dieser Eigenschaft können Sie bestimmte Elemente definieren, die einem bestimmten Bereich in einem bestimmten Bereich entsprechen Weg. Syntax: box-sizing: content-box |. border-box

Content-box: padding und border sind nicht in der definierten Breite und Höhe enthalten. Die tatsächliche Breite des Objekts entspricht der Summe aus eingestelltem Breitenwert, Rand und Innenabstand, d. h. (Elementbreite = Breite + Rand + Innenabstand). Dieses Attribut verhält sich im Standardmodus wie ein Boxmodell

Rand-. Box: Polsterung und Rand sind innerhalb der definierten Breite und Höhe enthalten. Die tatsächliche Breite des Objekts entspricht dem eingestellten Breitenwert. Auch wenn Rand und Abstand definiert sind, wird die tatsächliche Breite des Objekts nicht geändert, d. h. (Elementbreite = Breite). seltsamer Modus.

39. Progressive Verbesserung und sanfte Degradierung

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 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, zurückzublicken; fortschreitende Verbesserung bedeutet, nach vorne zu blicken und gleichzeitig die Wurzeln in einem sicheren Bereich zu halten.
Der Standpunkt der „graceful degradation“
Der Standpunkt der „graceful degradation“ geht davon aus, dass Websites für die fortschrittlichsten und umfassendsten Browser gestaltet werden sollten. Das Testen von Browsern, die als „veraltet“ gelten oder über fehlende Funktionen verfügen, wird in der letzten Phase des Entwicklungszyklus angeordnet und die Testobjekte sind auf die Vorgängerversion gängiger Browser (wie IE, Mozilla usw.) beschränkt.
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.
Der Standpunkt „Progressive Enhancement“
Der Standpunkt „Progressive Enhancement“ ist der Ansicht, dass dem Inhalt selbst Aufmerksamkeit geschenkt werden 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 „Graded Browser Support“-Strategie verwendet.
Dann kommt die Frage. Da der Produktmanager nun sieht, dass die Webseiteneffekte von IE6, 7 und 8 weitaus weniger abgerundete Ecken und Schatten (CSS3) als moderne Browser haben und Kompatibilität erfordern (verwenden Sie Bildhintergründe und verzichten Sie auf CSS3), wie können Sie ihn dann überzeugen? ?

40. Erklären Sie das seltsame Boxmodell und das flexible Boxmodell von c3 in niedrigeren Versionen von IE.

IE, wenn der Wert von padding+border ist kleiner als Breite oder Höhe:
Breite des Boxmodells = Rand (links und rechts) + Breite (Breite beinhaltet bereits die Werte von Polsterung und Rand)
Höhe des Boxmodells = Rand (oben und unten) + Höhe (Höhe enthält bereits Innenabstand und Rand)
Wenn der Wert von Innenabstand + Rand größer als Breite oder Höhe ist:
Breite des Boxmodells = Rand (links und rechts) + Innenabstand (links). und rechts) + Rand (links und rechts)
Höhe des Boxmodells = Rand (oben und unten) )+Padding(oben und unten)+Rahmen(oben und unten)+19px (plus eine Standardlinienhöhe von 19px ) Es entspricht also dem Vergleich von padding+border mit width oder height, je nachdem, welcher Wert größer ist.
Die oben genannten DOCTYPEs sind alle Standarddokumenttypen, unabhängig davon, welcher Modus zur vollständigen Definition des DOCTYPE verwendet wird, wird der Standardmodus ausgelöst. Wenn der DOCTYPE fehlt, wird der seltsame Modus (Quirks-Modus) ausgelöst. ie7 und ie8 CSS3box -sizing hat zwei Werte, einer ist content-box und der andere ist border-box.
Bei der Einstellung box-sizing:content-box wird der Standardmodus für die Analyse und Berechnung verwendet, der auch der Standardmodus ist.
Bei der Einstellung box-sizing:border-box wird der seltsame Modus verwendet zur Analyse und Berechnung verwendet werden;
Das CSS3-Flexbox-Modell führt ein neues Box-Modell ein – das Flexbox-Modell, das bestimmt, wie eine Box auf andere Boxen verteilt wird und wie mit dem verfügbaren Platz umgegangen wird. Mit diesem Modell können Sie problemlos ein flüssiges Layout erstellen, das sich an das Browserfenster anpasst, oder ein flexibles Layout, das sich an die Schriftgröße anpasst.

41.Animation entsprechende Attribute

Schreiben: Animation: Name Dauer Timing-Funktion Verzögerung Iteration-Zählung Richtung
Das Folgende ist eine Einführung in die entsprechenden Attribute
animation-name gibt den Keyframe-Namen an, der an den Selektor gebunden werden muss.
animation-duration gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden.
animation-timing-function gibt die Geschwindigkeitskurve der Animation an.
animation-delay gibt die Verzögerung vor dem Start der Animation an.
animation-iteration-count gibt an, wie oft die Animation abgespielt werden soll.
animation-direction gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll.

42.transition?

Der CSS-Übergang ermöglicht einen reibungslosen Übergang von CSS-Attributwerten innerhalb eines bestimmten Zeitintervalls. Dieser Effekt kann durch einen Mausklick, Fokus, Klick oder eine beliebige Änderung des Elements ausgelöst werden und ändert den CSS-Eigenschaftswert mit einem Animationseffekt. Beachten Sie den Unterschied zwischen Transformation, z. B. Bewegung, Skalierung und Inversion. Überkommen, drehen und strecken Sie Elemente.

43.h5 neue Funktionen?

1、绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素，比如 article、footer、header、nav、section 5、新的表单控件，比如 calendar、date、time、email、url、search

44.canvas 如何绘制一个三角形|正方形  

moveto 是移动到某个坐标， lineto 是从当前坐标连线到某个坐标。
这两个函数加起来就是画一条直线。 画线要用“笔”，那么MoveTo()把笔要画的起始位置固定了（x,y）然后要固定终止位置要用到LineTo函数确定终止位置（xend,yend）,这样一条线就画出来了。 每次与前面一个坐标相连 。
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

<!DOCTYPE HTML5><html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>画布</title>
  </head> <body>
     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
     Your browser does not support the canvas element.     </canvas>
     <script type="text/javascript">
         var c=document.getElementById("myCanvas");//三角形         var cxt=c.getContext("2d");
         cxt.moveTo(10,10);
         cxt.lineTo(50,50);
         cxt.lineTo(10,50);
         cxt.lineTo(10,10);
         cxt.stroke();//正方形         var cxt2=c.getContext("2d");
         cxt2.moveTo(60,10);
         cxt2.lineTo(100,10);
         cxt2.lineTo(100,50);
         cxt2.lineTo(60,50);
         cxt2.lineTo(60,10);
         cxt2.stroke(); 
     </script></body></html>

45.所用bootstap版本？

3.0

46.css清除浮动的几种方式？

1、父级p定义 height
2、结尾处加空p标签 clear:both
3、父级p定义 伪类:after 和 zoom  
4、父级p定义 overflow:hidden  
5、父级p定义 overflow:auto  
6、父级p 也一起浮动
7、父级p定义 display:table

47.为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

48.CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋转,缩放,定位,倾斜增加了更多的CSS选择器  多背景 rgba 在CSS3中唯一引入的伪元素是::selection.媒体查询，多栏布局 border-image

49.解释下 CSS sprites，以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。

50.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁
6e4c09dfadbdc8532a2121b9890677a7@import "../fouc.css";531ac245ce3e4fe3d50054a55f265927
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法：只要在93f0f5c25f18dab9d176bd4f6de5d30e之间加入一个2cdf5bf648cf2f33323966d7f58a7f3f或者3f1c4e4b6b16bbbd69b2ee476dc4f83a元素就可以了。

51.a点击出现框，解决方法:

a,a:hover,a:active,a:visited,a:link,a:focus{ 
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
 outline:none;background: none;
 text-decoration: none;border:none;
 -webkit-appearance: none; }

相关教程推荐：CSS视频教程

Das obige ist der detaillierte Inhalt vonGrundlegende Interviewfragen im HTML+CSS-Teil-Frontend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!