1. BFC

2. Schwimmer löschen

Wird häufig zum Löschen von Schwimmern verwendet

3. Welches mobile Terminal-Layout

Antwort: Prozentsatz des Flusslayouts, flexibler Box-Flex, Rasterlayout-Raster, rem / em, vm / vh
rem em
em relative Längeneinheit, die sich auf die Schriftgröße des aktuellen Elements bezieht und wenn die Schriftgröße nicht festgelegt ist Für das aktuelle Element wird es vererbt. Die Schriftgröße der Vorgängerelemente. Beispiel: box {Schriftgröße: 16px;} dann 1em = 16px .box {Schriftgröße: 32px;} dann 1em = 32px, 0.5em = 16px

Die relative Längeneinheit von rem, die sich auf die Schriftgröße des Stammelements (html) bezieht. Beispiel: html {Schriftgröße: 16px;}, dann 1rem = 16px html {Schriftgröße: 32px;}, dann 1rem = 32px 0,5rem = 16px

vw ist relativ zur Breite des Ansichtsfensters. Das Ansichtsfenster ist gleichmäßig in 100 Einheiten vw (dh den vom Browser sichtbaren Bereich) unterteilt. 100vw = die Breite des sichtbaren Bereichs

vh ist relativ zur Höhe des Ansichtsfensters. Das Ansichtsfenster ist zu gleichen Teilen in 100 Einheiten vh (dh den vom Browser sichtbaren Bereich) unterteilt. 100vh = die Höhe des sichtbaren Bereichs

Four.flex Layout

flex: 1, wobei 1 das Breitenverhältnis darstellt, hängt der spezifische Wert vom Flex-Wert anderer Boxen ab, da die Breite anderer Boxen hier festgelegt ist, sodass die mittlere Spalte automatisch mit Flex gefüllt wird Flex-Basis-
Bestellung: Definiert die Artikel-Bestellung. Je kleiner der Wert ist,
desto höher ist die Anordnung. Mit dem Attribut allign-self: allign-self kann ein einzelnes Element eine andere Ausrichtung als andere Elemente aufweisen
und das Attribut align-items überschreiben. Der Standardwert ist auto. Dies bedeutet, dass
das Attribut align-items des übergeordneten Elements vererbt wird . Wenn kein übergeordnetes Element vorhanden ist, entspricht es dem Dehnen.

In Bezug auf die Methode zur Verwendung von Flex to Center finden
Sie im MDN-Dokument Einzelheiten zum Flex-Layout. Ich werde hier nur häufig auftretende Probleme auflisten.

V. Zentrierungsproblem (Schwerpunkt)

Das Problem der Zentrierung ist wirklich ein häufiges Thema. Grundsätzlich wird jedes Interview gefragt. Schließlich ist die Zentrierung in Bezug auf Stile wirklich allgegenwärtig. Artikel über die Zentrierung gibt es überall im Internet. Denken Sie an 4-5 Arten von ihnen, und Sie werden es tun Es gibt kein Problem mit der Arbeit. Es gibt viele gemeinsame Zentrierungspunkte
für das Portal für guten Text in
der Mitte, z. B. horizontale Zentrierung, vertikale Zentrierung, horizontale und vertikale Zentrierung, feste Breite und Höhe sowie variable Breite und Höhe Lassen Sie es uns in fester Breite und Höhe diskutieren. Verschiedene Möglichkeiten, horizontal und vertikal zu zentrieren

1. Feste Breite und Höhe

定位 + Rand: Auto + links + rechts + oben + unten

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
    
    
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto ;
        }
    </style>
</head>
<body>
    <div class="container">
        <p></p>
    </div>
</body>
</html>

Positionierung + Marge: -50%

<style>
       .container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
    
    
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px; 
        }
    </style>
</head>
<body>
    <div class="container">
        <p></p>
    </div>
</body>

Positionierung + Transformation

 <style>
        .container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
    
    
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); 
        }
    </style>

flex Layout

  .container {
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        p {
    
    
            width: 100px;
            height: 100px;
            background: red;

        }

Rasterlayoutrand: auto;

 .container {
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
        }

        p {
    
    
            width: 100px;
            height: 100px;
            background: red;
            margin: auto;
        }

2. Variable Breite und Höhe

Absolute Positionierung + Transformation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
    
    
           
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); 
        }
    </style>
</head>
<body>
    <div class="container">
        <p>好好学习吧</p>
    </div>
</body>
</html>

Tabellenzelle

.container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        p{
    
    
           
            background: red;
            display: inline-block;
            
        }

flex Layout

.container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        p{
    
    
           
            background: red;
        }

Flex + Rand: Auto

 .container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            
        }
        p{
    
    
            margin: auto;
            background: red;
        }

Raster + Flex-Layout

.container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
            
        }
        p{
    
    
            
            background: red;
            align-self: center;
            justify-self: center;
        }

Gürtel + Rand Layout

.container{
    
    
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
            
        }
        p{
    
    
            
            background: red;
            margin: auto;
        }

Besprechen Sie die horizontale oder vertikale Zentrierung separat

1. Zentrieren Sie das Layout der Inline-Elemente

Horizontal zentriert

Inline-Elemente können festgelegt werden: Textausrichtung: Mitte;
Flex-Layout zum Festlegen des übergeordneten Elements: Anzeige: Flex; Rechtfertigungsinhalt: Mitte;

Vertikal zentriert

Bestätigen Sie die Höhe des übergeordneten Elements des einzeiligen Textes: height === Zeilenhöhe
Bestätigen Sie die Höhe des übergeordneten Elements des mehrzeiligen Textes: disaply: Tabellenzelle; vertikal ausrichten: Mitte;

Zwei elementzentrierte Layouts auf Blockebene

Horizontal zentriert

Feste Breite: Rand: 0 automatisch;
Variable Breite: Siehe Beispiel für variable Breite und Höhe im obigen Beispiel.

Vertikal zentriert

Position: absolute Menge links, oben, Rand links, Rand bis (feste Höhe);
Position: fester Satz Rand: Auto (feste Höhe);
Anzeige: Tabellenzelle;
Transformation: Übersetzen (x, y);
Flex (undefiniert) Höhe, variable Breite);
Raster (variable Höhe, variable Breite), die Kompatibilität ist relativ schlecht;

Absolute Positionierung und negativer Maginwert

Sechs. Box-Modell

IE6 Promiscuous Mode Box-Modell im seltsamen Modus und in IE6 und darunter Browsernbox -sizing : border-box

width = Inhaltsbreite + Auffüllbreite + Randbreite
Höhe = Inhaltshöhe + Auffüllhöhe + Randhöhe

Standard-Box-Modell box -sizing : :content -box

width = content-width
height = content-height

Seven.H5 Ausgaben

1. Wie verstehen Sie die Semantik von H5?

Semantisierung bezieht sich auf die Strukturierung von Textinhalten (Inhaltssemantik) und die Auswahl von semantischen Tags (Codesemantik), die Entwicklern das Lesen, Verwalten und Schreiben von eleganterem Code erleichtern und gleichzeitig Browser-Crawler und Unterstützung ermöglichen. Bessere Analyse der Technologie. Wir wählen das richtige Etikett, um den richtigen Inhalt zu beschreiben.
Das Etikett hat die folgenden Phasen durchlaufen

In der Wildnisphase schreibt das Backend das Layout. Das Tabellenlayout wird verwendet, was zu Verwirrung bei der Dekonstruktion, schlechter Lesbarkeit des Codes und besonders problematischer Wartung in der späteren Phase führt.
Wenn Sie das Layout in der Kunstphase erstellen, verwenden Sie div + css, um es zu erstellen, und schreiben Sie es als div, sodass der Seite die Semantik fehlt und die Lesbarkeit des Codes verringert wird.
Gegenwärtig hat die Front-End-Entwicklung, bei der semantische Tags für das Layout verwendet werden, folgende Vorteile
für die Benutzer: Sie ist
praktisch für die Teamentwicklung und -wartung.
Es kann auch eine bessere Inhaltsstruktur und Codestruktur darstellen, ohne CSS zu laden, das leicht zu lesen ist.
Benutzererfahrung: Zum Beispiel werden Titel und Alt verwendet, um Substantive oder Bildinformationen zu erklären, und Etikettenbeschriftungen werden verwendet.
Bei Maschinen:
Suchmaschinen-Crawler verlassen sich auf Beschriftungen, um den Kontext und das Gewicht jedes Schlüsselworts zu bestimmen Dies kann die Leistung der Suchmaschine verbessern. Crawlen Sie effektiv und erhöhen Sie den Website-Verkehr.
Es ist praktisch für die Analyse anderer Geräte (wie Bildschirmleser, Blindleser usw.), erleichtert das barrierefreie Lesen und verbessert die Zugänglichkeit.

2. Welche H5-Tags wurden verwendet?

Inhalt:

Header Der Header enthält normalerweise das Website-Logo, die Hauptnavigation, Site-weite Links und das Suchfeld.
Fußzeile Fußzeile ist nur dann die Fußzeile der gesamten Seite, wenn das übergeordnete Element ein Textkörper ist.
Artikel enthält Inhalt wie eine Zeitung == || wird so verstanden, es bedeutet ein Dokument, eine Seite, eine Anwendung oder einen separaten Container
beiseite gibt die Notizspalte an, einschließlich Anführungszeichen, Seitenleisten, einer Reihe von Links zum Artikel, Anzeigen, freundlichen Links, verwandten Produktlisten usw.
Als Hauptinhalt der Mian-Seite kann eine Seite nur einmal verwendet werden. Wenn es sich um eine Webanwendung handelt, umgeben Sie deren Hauptfunktionen.
Die Navigation für Navigationsmarken wird nur für wichtige Linkgruppen im Dokument verwendet.
Titel definiert den Titel des Dokuments, der in der Titelleiste oder auf der Registerkarte des Browsers angezeigt wird. Es kann nur Text enthalten. Wenn es Tags enthält, werden alle enthaltenen Tags nicht interpretiert.
Funktionsbezeichnung:
1. canvas:Listen Sie die Verwendungsmethode auf

<canvas id="canvas" width="300" height="300"> 
  抱歉，您的浏览器不支持canvas元素
  （这些内容将会在不支持<canvas>元素的浏览器或是禁用了JavaScript的浏览器内渲染并展现）
</canvas>

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
ctx.fillStyle = 'green'; 
ctx.fillRect(10, 10, 100, 100);

void ctx.fillRect (x, y, Breite, Höhe);

Die x-
Koordinate des Startpunkts des x- Rechtecks.
Die y-
Koordinate des Startpunkts des y- Rechtecks.
width Die Breite des
Rechtecks.
HöheDie Höhe des
Rechtecks

videoHäufig verwendetes Attributposter
: Wenn das Video nicht vollständig heruntergeladen wurde oder der Benutzer vor der Wiedergabe nicht auf das Cover geklickt hat, das standardmäßig angezeigt wird.
Das erste Bild der aktuellen Videodatei wird standardmäßig angezeigt ->
Hinweis: Beim Einstellen von Breite und Höhe wird im Allgemeinen nur die Breite oder Höhe eingestellt, sodass es automatisch proportional skaliert wird. Wenn
Sie die Breite und Höhe gleichzeitig einstellen, wird das Video nicht an die eingestellte Breite und Höhe angepasst, es sei denn, der eingestellte Wert entspricht genau dem Verhältnis. Der

wichtigste Punkt ist die Erläuterung der Verwendung der Quelle: da verschiedene Browser dies unterstützen Unterschiedliche Videodateiformate. Wenn wir also Videos hinzufügen, müssen
wir prüfen, ob der Browser dies unterstützt. Wir können Videodateien in verschiedenen Formaten vorbereiten und den Browser automatisch auswählen lassen

<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is
     a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

audioHäufig verwendete Attribute
src: der erste Kanal der Wiedergabe und die Straßenbolzensteuerung
: das Bedienfeld des Audioplayers
Autoplay: automatische Wiedergabeschleife
: Schleife

Wofür wird das Meta-Ansichtsfenster verwendet und wie wird es geschrieben?

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Das Ansichtsfenster ist der visuelle Bereich, in dem der Browser die Webseite anzeigt. Es gibt drei Arten von Ansichtsfenstern:
Was bedeutet der Inhalt in diesem Tag? Der Name ist Ansichtsfenster, was bedeutet, dass er von Mobilgeräten verwendet wird. Der Inhalt definiert die Attribute des Ansichtsfensters.
Breite bedeutet die Breite der Anzeige unter dem Mobilgerät ist die Gerätebreite (Gerätebreite) und
Höhe bedeutet Die Breite der Anzeige unter dem mobilen Gerät ist die Breite des Geräts.
Vom Benutzer skalierbar gibt die Zoomfunktion des Benutzers an, nein gibt an, dass dies nicht zulässig ist. Die
anfängliche Skalierung gibt an Das Zoomverhältnis zwischen dem Gerät und dem Ansichtsfenster. Das
Maximum und das Minimum geben die Maximal- und Minimalwerte des Zooms an. Es ist zu beachten, dass das Maximum das Minimum sein muss.
Das obige Meta-Tag weist den Browser an, beim Zoomen nicht zu zoomen wird auf dem mobilen Endgerät angezeigt.

2020 Front-End-Interview - detaillierte Erklärung wichtiger Wissenspunkte von HTML5 + CSS3