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 und Hack2: Anzeigeblock zur Bildlücke in
Hack1: Fügen Sie hinzu: Schriftgröße zum Element :0;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.
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.
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? Animationsdaueranimationsdauer: Gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden.
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.
7.n-ter-Typ |< ;li>3 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%); } <p class="p1"></p> 方法2： .p2{ width:400px; height:400px; border:#CCC 1px solid; background:#99f; position: absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } <p class="p2"></p> 方法3： .p3{ width:400px; height:400px; border:#CCC 1px solid; background:#9f9; position: absolute; left: 50%; top:50%; margin-left:-200px; margin-top: -200px; } <p class="p3"></p>
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 . Der :root-Selektor entspricht dem -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-Framework方法一：
首先判断浏览器是否支持placeholder属性，如果不支持的话，就遍历所有input输入框，获取placeholder属性的值填充进输入框作为提示信息，同时字体设置成灰色。
当输入框获得焦点( focus )同时输入框内文字等于设置的提示信息时，就把输入框内清空；
当输入框失去焦点( blur )同时输入框内文字为空时，再把获取的placeholder属性的值填充
进输入框作为提示信息，同时字体设置成灰色；
当输入框内有输入( keydown )时，此时输入框内的提示信息已经由focus事件清除，此时只需要把字体再恢复成黑色即可
此方法的缺点是，不适用于加载完DOM时即获得焦点的输入框，因为在用户的角度，加载完页面时看到的获得焦点的那个输入框，它的提示文字是看不到的。HTML：<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>CSS：.phcolor{ color:#999;}JS$(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('input'), placeholder=function(input){ var text = input.attr('placeholder'), defaultValue = input.defaultValue; if(!defaultValue){ input.val(text).addClass("phcolor"); } input.focus(function(){ if(input.val() == text){ $(this).val(""); } }); input.blur(function(){ if(input.val() == ""){ $(this).val(text).addClass("phcolor"); } }); //输入的字符不为灰色 input.keydown(function(){ $(this).removeClass("phcolor"); }); }; //当浏览器不支持placeholder属性时，调用placeholder函数 if(!supportPlaceholder){ $('input').each(function(){ text = $(this).attr("placeholder"); if($(this).attr("type") == "text"){ placeholder($(this)); } }); }});Nach dem Login kopieren方法二：
此方法的思路是做一张含有提示文字的图片作为input输入框的背景图，初始时获得焦点同时加载背景图；
当输入框不为空时，去掉背景图；
当输入框为空时，加载背景图；
当用户键盘按键且输入框不为空( 输入字符 )时，去掉背景图；
当用户键盘按键且输入框为空( 删除字符 )时，加载背景图。
此方法的缺点是：需要为每一个提示文字不同的input制作背景图片，并且设置input的样式。CSS：.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}JS$(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder' in document.createElement('input'); if(!supportPlaceholder){ //初始状态添加背景图片 $("#uname").attr("class","phbg"); //初始状态获得焦点 $("#uname").focus; function destyle(){ if($("#uname").val() != ""){ $("#uname").removeClass("phbg"); }else{ $("#uname").attr("class","phbg"); } } //当输入框为空时，添加背景图片；有值时去掉背景图片 destyle(); $("#uname").keyup(function(){ //当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片 destyle(); }); $("#uname").keydown(function(){ //keydown事件可以在按键按下的第一时间去掉背景图片 $("#uname").removeClass("phbg"); }); }});Nach dem Login kopieren方法三：
使用插件：Placeholders.js17.常见兼容性问题？
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理。
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
* 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
* 渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css// .bb{ background-color:#f1ee18; .background-color:#00deff\9; +background-color:#a200ff; _background-color:#1e0bd1; }
* IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性。
* IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. * 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
* 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
* 怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推荐的写法：``
* 上下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
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.21.Medienattribut? Bildschirm? Alle? Das Medienattribut max-width?min-width?
ist ein leeres Element ohne schließendes Tag.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? DasName-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, rembody{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 gulpein)
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 komprimieren28. 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 speichern29 . 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:active33. 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öhe36. 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-137.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 BoxmodellRand-. 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、search44.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>Nach dem Login kopieren45.所用bootstap版本？
3.046.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:table47.为什么要初始化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-image49.解释下 CSS sprites，以及你要如何在页面或网站中使用它。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。50.什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
FOUC - Flash Of Unstyled Content 文档样式闪烁
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法：只要在之间加入一个或者Beliebte TutorialsMehr>
CSS深入理解之border视频教程12552
CSS 2.0中文手册6116
CSS 3.0参考手册3773
2016年新课程体系html+css视频245099Neueste DownloadsMehr>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
