Allgemeine DIV-Aufgaben (Teil 1) – Allgemeine Aufgaben (Bildlaufleisten anzeigen/Divs ausblenden/Ereignis-Bubbling deaktivieren usw.)

Allgemeine DIV-Aufgaben (Teil 1) – Allgemeine Aufgaben (Bildlaufleisten anzeigen/Divs ausblenden/Ereignis-Bubbling deaktivieren usw.)
Als am häufigsten verwendetes Layoutelement spielt DIV eine entscheidende Rolle in der Webentwicklung. Hier ist eine Zusammenfassung der verschiedenen Vorgänge, die mir bei der Verwendung von DIV begegnet sind.
1.div zeigt die Bildlaufleiste an <br />Dies ist eine sehr häufige Aufgabe und die Bildlaufleiste wird grundsätzlich durch CSS implementiert.
(1) Einstellung der vertikalen Bildlaufleiste. Ob die Bildlaufleiste angezeigt werden soll, hängt hauptsächlich von den folgenden Eigenschaften in CSS ab:

Code kopieren
Der Code lautet wie folgt:

Überlauf: sichtbar|automatisch|versteckt|scrollen
Overflow-x: horizontale Bildlaufleiste
overflow-y: vertikale Bildlaufleiste

Die Bedeutung der Parameter:
sichtbar: Inhalte nicht abschneiden und keine Bildlaufleisten hinzufügen. Wenn diese Vorgabe explizit angegeben ist, wird das Objekt auf die Größe des Fensters oder Rahmens zugeschnitten, der das Objekt enthält. Und die Clip-Eigenschaftseinstellung wird ungültig.
auto: Dies ist der Standardwert für das Body-Objekt und den Textbereich. Schneiden Sie Inhalte aus und fügen Sie bei Bedarf Bildlaufleisten hinzu
Versteckt: Inhalte, die die Objektgröße überschreiten, werden nicht angezeigt
scrollen: Bildlaufleiste immer anzeigen
overflow:auto; Das bedeutet, dass eine vertikale Bildlaufleiste angezeigt wird, wenn Ihr Inhalt die Höhe des div überschreitet. Wir möchten also bei Bedarf eine vertikale Bildlaufleiste anzeigen, was folgendermaßen erreicht werden kann:

Code kopieren
Der Code lautet wie folgt:

<divstyle="overflow:auto;">...</div>

oder

Code kopieren
Der Code lautet wie folgt:

<divstyle="overflow-y:auto;">...</div>

(2) Horizontale Bildlaufleiste Wenn Sie lediglich eine horizontale Bildlaufleiste anzeigen möchten, müssen Sie in der Regel die Einstellung zum Deaktivieren von Zeilenumbrüchen verwenden, beispielsweise:

Code kopieren
Der Code lautet wie folgt:

<divstyle="overflow-x:auto;height:40px;width:100px;white-space:nowrap"></div>

(3) Für das Erscheinungsbild der Bildlaufleiste im Internet Explorer werden hauptsächlich verschiedene Farbattribute verwendet:

Code kopieren
Der Code lautet wie folgt:

scrollbar-3dlight-color:color; Festlegen oder Abrufen der Farbe des hellen Rahmens der Bildlaufleiste;
scrollbar-highlight-color:color; Helle Randfarbe der Bildlaufleisten-3D-Schnittstelle festlegen oder abrufen;
scrollbar-face-color:Farbe; Legt die Farbe der 3D-Oberfläche der Bildlaufleiste fest oder ruft sie ab;
scrollbar-arrow-color:Farbe; Farbe des Richtungspfeils der Bildlaufleiste festlegen oder abrufen; wenn die Bildlaufleiste angezeigt wird, aber nicht verfügbar ist, ist diese Eigenschaft ungültig;
scrollbar-shadow-color:Farbe; Legen Sie die dunkle Randfarbe der 3D-Bildlaufleistenschnittstelle fest oder rufen Sie sie ab.
scrollbar-darkshadow-color:Farbe; Festlegen oder Abrufen der dunklen Rahmenfarbe der Bildlaufleiste;
scrollbar-base-color:Farbe; Legt die Grundfarbe der Bildlaufleiste fest oder ruft sie ab. Andere Farben der Benutzeroberfläche werden automatisch entsprechend angepasst.
scrollbar-track-color:color; Farbe des Ziehbereichs der Bildlaufleiste festlegen oder abrufen

In Chrome wird es grundsätzlich mithilfe webkitspezifischer Eigenschaften festgelegt:

Code kopieren
Der Code lautet wie folgt:

::-webkit-scrollbar-track-piece{
background-color:#fff;/*Hintergrundfarbe der Bildlaufleiste*/
-webkit-border-radius:0;/*Breite der abgerundeten Ecken der Bildlaufleiste*/
}
::-webkit-scrollbar{
width:8px;/*Breite der Bildlaufleiste*/
Höhe: 8px;/*Höhe der Bildlaufleiste*/
}
::-webkit-scrollbar-thumb:vertical{/*Stil der vertikalen Bildlaufleiste*/
Höhe: 50px;
Hintergrundfarbe: #999;
-webkit-border-radius:4px;
Umriss: 2pxsolid#fff;
Umriss-Versatz: -2px;
Rand: 2pxsolid#fff;
}
::-webkit-scrollbar-thumb:hover{/*Hover-Stil der Bildlaufleiste*/
Höhe: 50px;
Hintergrundfarbe: #9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*Stil der horizontalen Bildlaufleiste*/
Breite: 5px;
Hintergrundfarbe: #CCCCCC;
-webkit-border-radius:6px;
}

2. Deaktivieren des Aufsteigens von Div-Ereignissen <br />Hierbei wird grundsätzlich die Standardmethode event.stopPropagation() verwendet, um das Aufsteigen von Ereignissen zu verhindern (außer im Internet Explorer):

Code kopieren
Der Code lautet wie folgt:

FunktionBigDiv(Ereignis){
wenn (event.stopPropagation) {
event.stopPropagation(); //Unterstützt stopPropagation in Browsern, die auf dem Firefox-Kernel basieren
}anders{
event.cancelBubble=true; //Schreiben basierend auf IE
}
//andere Codes …
}

3. Verhindern Sie, dass div Standardverhalten ausführt <br />Das ist tatsächlich ein häufiges Problem. Bei Elementen mit Standardverhalten, wie etwa dem Sendeformularverhalten der Sendeschaltfläche, dem Hyperlinkverhalten des <a>-Elements usw., möchten wir häufig auch deren Standardverhalten aufheben, wenn wir Ereignisse auf diese Elemente anwenden. Dies erreichen wir, indem wir event.preventDefault() in der Ereignisrückruffunktion aufrufen.
4. Berechnen Sie dynamisch die Position des Div (z. B. die allgemeine Berechnung der Position der Div-Popup-Ebene).
 (1) DOM-Attributmethode
offsetTop: Der Abstand vom aktuellen Objekt zur Oberseite der übergeordneten Ebene. Es kann kein Wert zugewiesen werden. Um den Abstand vom Objekt zur Oberseite des übergeordneten Objekts festzulegen, verwenden Sie die Eigenschaft style.top.
offsetLeft: Der Abstand vom aktuellen Objekt zur linken Seite seiner übergeordneten Ebene. Es kann kein Wert zugewiesen werden. Um den Abstand des Objekts links vom übergeordneten Objekt festzulegen, verwenden Sie die Eigenschaft style.left.
Hier sollten wir auf den Unterschied zwischen offsetTop und style.top achten (dasselbe gilt für offsetLeft und style.left):
•OffsetTop gibt eine Zahl zurück, während style.top einen String zurückgibt, der neben der Zahl auch die Einheit px enthält. Normalerweise wird parseInt benötigt, um daraus einen numerischen Wert zu machen.
• offsetTop ist schreibgeschützt, während style.top lese- und beschreibbar ist.
•Wenn für ein HTML-Element kein Top-Stil angegeben ist, gibt style.top eine leere Zeichenfolge zurück.
Hinweis: Wenn Sie in Firefox einen Wert an style.top zuweisen, muss dieser ebenfalls die Form einer Zeichenfolge (mit px) haben.
(2) Der Einfluss des Positionsattributs auf die Position in CSS
Der Standardeigenschaftswert der Position ist statisch. Aber die kritischsten Attributwerte in der Position sind relativ und absolut.
Oft kombinieren wir das absolute Attribut mit left und top, um einen entsprechenden „schwebenden Ebenen“-Effekt zu erzeugen. Manchmal benötigen wir jedoch einen Schwebeeffekt für einen Container statt für ein Fenster. Zu diesem Zeitpunkt ist das Berechnen der Höhe und Breite nicht nur mühsam, es ist auch fast unmöglich, den perfekten Effekt zu erzielen. Tatsächlich müssen Sie lediglich die Position des Stilattributs der vorherigen Ebene auf „relativ“ setzen. Mit anderen Worten: Die Wirkung des Positionsattributwerts wird direkt durch den Positionsattributwert in seinem Containerstil beeinflusst. Beispielsweise die folgende verschachtelte Struktur AB

Code kopieren
Der Code lautet wie folgt:

<div="Ein">
<div="B">
</div>
</div>

Wenn die Position von A relativ ist, ist die Position von B absolut. Zu diesem Zeitpunkt zielen left:0 und top:0 nicht mehr auf das Fensterdokument, sondern auf das Div mit der ID A. Wenn Sie jedoch padding="50px" in A festlegen, ändern sich andere Elemente in A, die die Position nicht auf absolut festlegen, mit dem Padding-Wert von A, aber B ändert sich nicht, weil seine Position relativ zur übergeordneten Ebene ist.
Hier werde ich kurz auf die vier Attributwerte der Position eingehen: relativ, absolut, fest und statisch. Nehmen wir den obigen Code als Beispiel:
relativ
Ein relativer Wert bedeutet, dass das Element relativ zu seiner eigenen Position versetzt ist. Wenn beispielsweise im obigen Code B auf einen relativen Wert gesetzt wird, kann dies durch den folgenden CSS-Code geschehen:

Code kopieren
Der Code lautet wie folgt:

#B{
Position: relativ;
Polsterung: 5px;
oben: 5px;
links: 5px;
}

Wir können es so verstehen: Wenn das relative Attribut nicht festgelegt ist, sollte die Position von B gemäß dem normalen Dokumentfluss an einer bestimmten Stelle sein. Wenn die Position von B jedoch auf relativ eingestellt ist, wird sie entsprechend den Werten oben, rechts, unten und links entsprechend der gewünschten Position verschoben. Die Bedeutung von "relativ" wird hier widergespiegelt.
Hinweis: Der relative Versatz basiert auf der oberen linken Seite des Objektrands .
Absolute
Dieses Attribut ist immer irreführend. Es ist falsch zu sagen, dass wenn das Positionsattribut auf absolut gesetzt ist, die Positionierung immer entsprechend dem Browserfenster erfolgt. Tatsächlich ist dies die Eigenschaft des festen Attributs.
Wenn die Position von B auf absolut gesetzt ist, wer ist das Objekt für den Versatz? Hier gibt es zwei Situationen:
•Wenn das übergeordnete Objekt von B (oder der Urgroßvater, sofern es ein übergeordnetes Objekt ist) ebenfalls das Positionsattribut festlegt und der Wert des Positionsattributs absolut oder relativ ist, d. h. nicht der Standardwert, wird B entsprechend diesem übergeordneten Objekt positioniert.
•Wenn B kein übergeordnetes Objekt mit einem Positionsattribut hat, wird der Body als Positionierungsobjekt verwendet und entsprechend dem Browserfenster positioniert. Dies ist relativ einfach zu verstehen.
behoben
„fixed“ ist ein spezieller Typ von „absolute“, was bedeutet, dass „fixed“ immer „body“ als Positionierungsobjekt verwendet und entsprechend dem Browserfenster positioniert wird.
statisch
Der Standardwert der Position, wenn das Positionsattribut nicht festgelegt ist, besteht darin, die Elemente entsprechend dem normalen Dokumentfluss anzuordnen.
(3) Das Popup-Fenster der JQuery-Eingabeaufforderung ist eine gängige Methode. Das Wichtigste an dieser Aufgabe ist die Berechnung der Position des Popup-Fensters. Die Ereignisquelle wird über das Ereignisobjekt abgerufen. Anschließend kann mit der Funktion offset() die Position der Ereignisquelle relativ zum Dokument berechnet werden:

Code kopieren
Der Code lautet wie folgt:

vartop=$(event.target).offset().top;
varleft=$(Ereignis.Ziel).offset().left;

Da es relativ zum Dokument ist, also der oberen linken Ecke der Seite, muss die Popup-Ebene in der ersten Ebene des Body-Elements platziert werden, d. h. die übergeordnete Klasse ist Body. Wenn es in anderen Elementen enthalten ist, müssen Sie sicherstellen, dass der Positionsstil aller übergeordneten Klassen auf „relativ“ eingestellt ist. Die berechneten Positionen oben und links sind die der Ereignisquelle. Die Anzeige an dieser Position deckt das Ereignisquellenobjekt ab. Normalerweise müssen Sie also einen manuellen Ausgleich vornehmen, zum Beispiel top+20.
5. Div-Element ausblenden
Es gibt zwei Möglichkeiten, Elemente in CSS auszublenden: display:none oder visibility:hidden. Der Unterschied zwischen den beiden Methoden besteht darin, dass nach dem Festlegen des Anzeigewerts das Element vollständig ausgeblendet wird, der vom Element eingenommene Raum verschwindet und das darunter liegende Element nach oben verschoben wird. Nach dem Festlegen der Sichtbarkeit bleibt die Position des Elements bestehen, es ist jedoch unsichtbar.
6. Die horizontale und vertikale Anordnung der untergeordneten Elemente eines Div wird mithilfe des Float-Attributs gesteuert. Standardmäßig ist div vertikal angeordnet und hat eine Breite von 100 %. Nach dem Festlegen von float:left in CSS wird es horizontal. Wenn Sie die horizontale Reihe in der Mitte unterbrechen und den Rest als vertikale Reihe wiederherstellen möchten, müssen Sie die Modifikation „clear:both“ verwenden. Schauen Sie sich das folgende Beispiel an:

Code kopieren
Der Code lautet wie folgt:

<div>
<divstyle="float:left">aaaaaaaaaaaaaaa</div>
<divstyle="float:left">bbbbbbbbbbbb</div>
Die beiden obigen Divs sind horizontal angeordnet.
<divstyle="clear:both"></div>Diese Sache ist sehr wichtig. Sie löscht den Float der oberen beiden Schichten, was bedeutet, dass die Schichten darunter weiterhin vertikal angeordnet sind.
<div>Diese Ebene ist vertikal angeordnet</div>
<div>Diese Ebene ist vertikal angeordnet</div>
</div>

Das Obige ist nur eine einfache Anwendung der Float-Eigenschaft.
Das Float-Attribut wird hauptsächlich verwendet, um die Flussrichtung des Elements zu steuern, d. h. ob es sich nach rechts oder nach links bewegt. Hier ist die Syntax der Float-Eigenschaft:

Code kopieren
Der Code lautet wie folgt:

Float: keine|links|rechts
keine: Der Standardwert. Objekte schweben nicht
links: Text fließt rechts vom Objekt
rechts: Text fließt links vom Objekt

Um bestimmte Effekte zu erzielen, müssen wir das Schweben normalerweise an einem bestimmten Punkt abbrechen, um zu vermeiden, dass andere Objekte beeinträchtigt werden. Dies wird durch die oben eingeführte Clear-Eigenschaft erreicht:
Die Clear-Eigenschaft hat vier Werte:

Code kopieren
Der Code lautet wie folgt:

löschen: beide|links|rechts|keine;

Einfach ausgedrückt besteht die Funktion des Clear-Attributs darin, den Float zu „löschen“. Wenn für ein Element „clear:left;“ gesetzt ist, bedeutet dies, dass sich auf der linken Seite des Elements kein schwebendes Element befindet. Entsprechend bedeutet „clear:right;“, dass sich auf der rechten Seite des Elements kein schwebendes Element befindet. „clear:both;“ bedeutet, dass sich auf beiden Seiten des Elements keine schwebenden Elemente befinden. clear:none bedeutet, dass schwebende Elemente auf beiden Seiten zulässig sind.
7. Legen Sie die Schriftart des Textes im Div fest. <br />Sehen Sie sich zunächst die Liste der Attribute an, die Text in CSS steuern:

Code kopieren
Der Code lautet wie folgt:

Wortabstand: definiert den Abstand zwischen Wörtern. Der Wert ist: Normal|<Länge>.
Buchstabenabstand: definiert den Abstand zwischen den einzelnen Buchstaben. Der Wert ist: Normal|<Länge>.
Textdekoration: Definiert den „Dekorations“-Stil des Textes, der Wertebereich ist: Keine|Unterstreichen|Überstreichen|Durchstreichen|Blinken.
Vertical-align: definiert die vertikale Position des Elements. Die Werte sind: Baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>.
Texttransformation: Text in andere Formate umwandeln, mögliche Werte: Großschreibung|Großschreibung|Kleinschreibung|keine.
Textausrichtung: Definiert die Ausrichtung des Textes, die Werte sind: Links|rechts|zentriert|blockiert.
Texteinzug: Definiert die Einzugsmethode der ersten Textzeile. Der Wert lautet: <Länge>|<Prozent>.
Zeilenhöhe: Definiert die Zeilenhöhe des Textes. Der Wertebereich ist: Normal|<Zahl>|<Länge>|<Prozent>.

Aus dem Obigen können wir erkennen, dass wir hier Texteigenschaften wie Textabstand, Buchstabenabstand, Verzierung, Ausrichtung, Einzug und Zeilenhöhe festlegen können. Nehmen wir ein Beispiel:

Code kopieren
Der Code lautet wie folgt:

<pstyle="letter-spacing:5px;text-align:justify;text-indent:4em;line-height：17pt">Wir können sehen, dass nach der Verarbeitung der Textattribute mehr Abstand zwischen den Wörtern und mehr Zeilenhöhe zwischen den Zeilen besteht, die Ausrichtung Blocksatz wird und der Absatzanfang um zwei weitere Leerzeichen eingerückt ist. </p>

„letter-spacing“ legt den Buchstabenabstand auf 5px fest, wobei 5px eine Längeneinheit ist; „text-align“ legt die Ausrichtung auf Blocksatz fest; „indent“ legt den Einzug auf 4em fest; und „line-height“ legt die Zeilenhöhe auf 17pt fest. Anhand der obigen Beispiele können wir erkennen, dass sich der Text auf der Seite ganz einfach durch die Verwendung von CSS-Textattributen setzen lässt.
Der Zeilenabstand hängt von der Schriftgröße ab. Generell gilt: Kleinere Schriftarten erfordern einen größeren Zeilenabstand, um das Lesen zu erleichtern. Wenn auf einer Webseite keine Einstellung für den Zeilenabstand für chinesische Schriftarten vorhanden ist, ist das für Leser, die lange Textabschnitte lesen, eine Katastrophe. Daher ist es sehr wichtig, die Zeilenhöhe entsprechend einzustellen. Generell sollte die Zeilenhöhe beim Webdesign das 1,5- bis 2-fache der Schriftgröße betragen. In Word und anderen Textbearbeitungsprogrammen ist als Zeilenabstand in der Regel 120 % der Schriftgröße eingestellt. Die Zeilenhöheneinstellung in CSS wird gleichmäßig aufgeteilt und oben und unten in jeder Zeile hinzugefügt. Das heißt, wenn die Zeilenhöhe auf 20 Pixel eingestellt ist, bleibt über und unter jeder Textzeile ein Abstand von 10 Pixeln.
8. Stellen Sie den Tooltip des Div so ein, dass er in separaten Zeilen angezeigt wird. <br />In HTML können wir Links und Bildern ein Titelattribut hinzufügen, um erklärenden Text anzuzeigen. Normalerweise werden diese Texte in einer Zeile angezeigt. Gibt es also eine Möglichkeit, sie in mehreren Zeilen anzuzeigen? Es gibt zwei Lösungen:
(1) Schreiben Sie das Titelattribut in mehrere Zeilen, zum Beispiel:

Code kopieren
Der Code lautet wie folgt:

<ahref=#"title="Erklärung 1Erklärung 2Erklärung 3">Website-Erstellung</a>

(2) Die erste Zeile ist nicht intuitiv genug. Wir können auch &#10; (& ist halb so breit) oder &#13; hinzufügen, wo die Zeile unterbrochen werden muss, um Folgendes zu erreichen:

Code kopieren
Der Code lautet wie folgt:

<ahref=#"title="Erklärung 1&#10;Erklärung 2&#10;Erklärung 3">Website-Erstellung</a>
<ahref=#"title="Erklärung 1&#13;Erklärung 2&#13;Erklärung 3">Website-Erstellung</a>

9. Verwenden Sie die mittlere Maustaste, um die horizontale Bildlaufleiste zu steuern. <br />In Chrome und FireFox wird die mittlere Maustaste im Allgemeinen verwendet, um die vertikale Bildlaufleiste zu steuern. Wenn Ihr DIV nur eine horizontale Steuerleiste hat, wird die mittlere Maustaste standardmäßig nicht gescrollt. In diesem Fall müssen Sie es selbst implementieren.
Verbinden Sie zunächst das Mausrad-Ereignis:

Code kopieren
Der Code lautet wie folgt:

//Mausradereignis für Nicht-FireFox
element.onmousewheel=fireElementScrolled;
//Mausradereignis für FireFox
Element.addEventListener('DOMMouseScroll',fireElementScrolled,false);

Das Besondere an FireFox ist hierbei, dass die Anbindung per addEventListener erfolgen muss.
Implementieren Sie dann die Methode fireElementScrolled:

Code kopieren
Der Code lautet wie folgt:

fireElementScrolled = Funktion (Ereignis) {
varrolled=0;
wenn (event.wheelDelta) {
gerollt=Ereignis.RadDelta;
}
anders{
//Firefox: Muss es verarbeiten
gerollt=-Ereignis.Detail*30;
}
varhtmlElement=document.getElementById('test');
htmlElement.scrollLeft=htmlElement.scrollLeft-gerollt;
event.preventDefault();
Rückgabefalse;
};

Das Prinzip ist sehr einfach: Ermitteln Sie die Bildlaufdistanz des Scrollrads und weisen Sie dann dem scrollLeft-Attribut des Div-Elements einen Wert zu.
10. Zentrieren von untergeordneten Elementen
(1) Horizontale Zentrierung: Normalen Text und Bilder können Sie ganz einfach zentrieren. Stellen Sie dazu einfach den CSS-Stil des übergeordneten Containers so ein, dass er „text-align:center;“ einschließt.
Wenn das untergeordnete Element ein DIV oder ein anderes Element ist, ist die Situation etwas komplizierter. Nehmen wir das Div als Beispiel. Wenn es nur ein untergeordnetes Div gibt, kann die Zentrierung erreicht werden, indem der CSS-Stil des untergeordneten Elements so eingestellt wird, dass margin:0auto; enthalten ist. Beispielsweise das folgende Beispiel:

Code kopieren
Der Code lautet wie folgt:

<divid="a" style="width:400px;height:300px;border:1pxsolidgreen;">
<divid="b"style="margin:0auto;width:200px;border:1pxsolidblue;">Ein einfaches Sub-DIV-Zentrierungsproblem</div>
</div>

Wenn mehrere untergeordnete Elemente vorhanden sind, füge ich normalerweise eine zusätzliche Div-Ebene hinzu, um dies zu erreichen. Siehe Beispiel:

Code kopieren
Der Code lautet wie folgt:

<divstyle="Breite:400px;Höhe:300px;Rand:1pxsolidred;">
<divstyle="margin:0auto;position:relative;left:50%;float:left;">
<divstyle="position:relativ;links:-50%;float:links">
<divstyle="border:1pxsolidblue;text-align:center;">1</div>
<divstyle="border:1pxsolidblue;text-align:center;">2</div>
<divstyle="border:1pxsolidblue;text-align:center;">3</div>
<divstyle="border:1pxsolidblue;float:left;">4</div>
<divstyle="border:1pxsolidblue;float:left;">5</div>
<divstyle="border:1pxsolidblue;float:left;">6</div>
</div>
</div>
</div>

(2) Vertikale Zentrierung Die vertikale Zentrierung ist etwas schwieriger. Es gibt eine sehr einfache Methode, mit der sowohl die horizontale als auch die vertikale Zentrierung gleichzeitig erreicht werden kann. Schreiben Sie zunächst position:relative zum übergeordneten Element. Dies geschieht, damit das untergeordnete Element, wenn es mit position:absolute markiert ist, nicht außerhalb positioniert wird. Schreiben Sie als Nächstes die Höhe und Breite des untergeordneten Elements. Bei einigen Browsern kommt es beim Parsen ohne diese beiden Werte zu unerwarteten Fehlausrichtungen. Dann kommt der Kern der gesamten Methode, der darin besteht, dem untergeordneten Element oben: 50 %; links: 50 % und Rand oben: die negative Zahl des halben Höhenwerts; Rand links: die negative Zahl des halben Gewichtswerts zuzuweisen. Natürlich muss auch zuerst die Breite und Höhe des übergeordneten Elements geschrieben werden. Siehe das Beispiel:

Code kopieren
Der Code lautet wie folgt:

<divstyle="width:600px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-300px;border:1pxsolidred;">Zentriermethode</div>

<<:  Detaillierter Prozess der Installation von Logstash in Docker

>>:  So fügen Sie Videos in HTML ein und machen sie mit allen Browsern kompatibel

Artikel empfehlen

Beispiel für die Konfiguration von nginx zur Implementierung von SSL

Umgebungsbeschreibung Serversystem: Ubuntu 18.04 ...

5 Befehle zur Verwendung des Rechners in der Linux-Befehlszeile

Hallo zusammen, ich bin Liang Xu. Bei der Verwend...

Probleme beim Ändern des Passworts und beim Herstellen einer Verbindung zu Navicat bei der Installation und Verwendung von MySQL 8.0.16 unter Windows 7

Bei der Installation von MySQL sind mir mehrere P...

Lösung für die hohe CPU-Auslastung des Tomcat-Prozesses

Inhaltsverzeichnis Fall Kontextwechsel-Overhead? ...

Beispielcode einer Vue-Anwendung basierend auf der Axios-Anforderungskapselung

Inhaltsverzeichnis Was ist Axios? Axios-Anforderu...

HTML-Tipps, um Ihren Code semantisch zu gestalten

HTML-Semantik scheint ein alltägliches Problem zu...

Richtiger Einsatz von MySQL-Partitionstabellen

Übersicht über partitionierte MySQL-Tabellen Wir ...

Lösung für das Problem der MySQL-Transaktionsparallelität

Ich bin während der Entwicklung auf ein solches P...

mysql5.7.21.zip Installations-Tutorial

Der detaillierte Installationsprozess von mysql5....

Diagramm der Konfigurationsmethode für die installationsfreie Version von MySQL5.6 für Windows Server 2008 64-Bit

1 Laden Sie das komprimierte Paket der MySQL 5.6-...

Fallstudie zu JavaScript-Style-Objekten und CurrentStyle-Objekten

1. Stilobjekt Das Stilobjekt stellt eine einzelne...

MySQL 5.0.96 für Windows x86 32-Bit Green - vereinfachte Version - Installations-Tutorial

MySQL 5.0 ist aufgrund seiner wenigen „erweiterte...

Kann Asynchronität in JavaScript „Await“ speichern?

Ich wusste vorher, dass man await verwenden muss,...

Zusammenfassung der MySql-Import- und Exportmethoden mit mysqldump

Datenbankdaten exportieren: Öffnen Sie zuerst cmd...

Tutorial zur HTML-Tabellenauszeichnung (9): Zellabstandsattribut CELLSPACING

Damit die Tabelle nicht zu kompakt wirkt, kann zw...