Berechnung des Prozentwerts, wenn die CSS-Positionseigenschaft absolut ist
|
Wenn die Position absolut ist, wird der Prozentsatz der zugehörigen Attribute relativ zum Element berechnet, auf das sie verweist (der enthaltende Block), und die Position wird gerendert. Zuerst müssen wir wissen: 1. [Prozentsatzangabe][1]: Berechnen von Prozentwerten auf Basis des umschließenden Blocks: (1) Die Ränder/Abstände/links/rechts/Breite des Elements werden in Bezug auf die Breite des umschließenden Blocks berechnet. (2) Um Prozentwerte für Höhe/oben und unten zu berechnen, wird die Höhe des umschließenden Blocks verwendet. Wenn die Höhe des umgebenden Blocks je nach Inhalt variiert und der Positionseigenschaft des umgebenden Blocks der Wert „relative“ oder „static“ zugewiesen ist, ergibt die Berechnung dieser Werte 0. 2. [Bestimmen Sie den umschließenden Block][2]: Der Prozess zur Bestimmung des umschließenden Blocks eines Elements hängt vollständig von der Positionseigenschaft des Elements ab: (1) Wenn die Positionseigenschaft statisch oder relativ ist, besteht der enthaltene Block aus der Kante des Inhaltsbereichs seines nächsten „Vorfahrenblockelements“ (z. B. eines Inline-Blocks, Blocks oder Listenelementelements) oder Formatierungskontexts (z. B. eines Tabellencontainers, Flex-Containers, Rastercontainers oder des Blockcontainers selbst). (2) Wenn die Position-Eigenschaft absolut ist, besteht der enthaltene Block aus den Kanten des Füllbereichs (Füllung links + Inhalt + Füllung rechts) seines nächsten Vorgängerelements, dessen Position-Wert nicht statisch ist (das heißt, der Wert ist fest, absolut, relativ oder klebrig).
<!DOCTYPE html>
<html lang="de">
<Kopf>
<Stil>
Körper {
Farbe: orange;
}
div {
Position: absolut;
/*Boxgröße: Rahmenbox; /*Inhalt=（Breite-Rahmen-Auffüllung）beim Hinzufügen von Boxgröße: Rahmenbox;; Breite=Inhalt, wenn nicht hinzugefügt wird*/*/
Breite: 400px;
Rand: 5px durchgehend orange;
Polsterung: 50px;
Höhe: 160px;
Hintergrund: hellgrau;
}
P {
Position: absolut; /* Der umschließende Block besteht aus den Füllkanten (Füllung links + Inhalt + Füllung rechts) des nächsten Vorgängerelements (das ein Blockelement sein kann, aber nicht muss);
Breite: 50 %; /* == (50+400+50)px * 50 % = 250px */
Höhe: 25 %; /* == (50+160+50)px * 25 % = 65px */
Rand: 5 %; /* == (50+400+50)px * 5 % = 25px */
Rand: 5px durchgehend orange;
Polsterung: 5 %; /* == (50+400+50)px * 5 % = 25px */
Hintergrund: rosa;
Farbe: grün;
}
/*P {
/* Der enthaltene Block besteht aus dem nächstgelegenen übergeordneten Blockelement (das nur ein Blockelement sein kann) oder dem Rand des Inhaltsbereichs des Formatierungskontexts (Inhalt).
Breite: 50 %; /* == 400px * 50 % = 200px */
Höhe: 25 %; /* == 160px * 25 % = 40px */
Rand: 5 %; /* == 400px * 5 % = 20px */
Rand: 5px durchgehend orange;
Polsterung: 5 %; /* == 400px * 5 % = 20px */
Hintergrund: rosa;
Farbe: grün;
}*/
</Stil>
</Kopf>
<Text>
<div>
<p>Dies ist ein Absatz!</p>
</div>
</body>
</html>
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: Was Sie über das Erstellen von MySQL-Indizes wissen müssen
>>: Verständnis für Webdesign-Layout
Artikel empfehlen
Analyse des Prinzips der MySQL-Indexlängenbeschränkung
Dieser Artikel stellt hauptsächlich die Analyse d...
Eine kurze Analyse von Event Bubbling und Event Capture in js
Inhaltsverzeichnis 01-Ereignisse brodeln 1.1- Ein...
Das adaptive CSS-Layout realisiert die Gesamtzentrierung von Unterelementelementen und die Linksausrichtung von internen Elementen
Bei der täglichen Arbeit stoßen wir möglicherweis...
Native JS realisiert einheitliche Bewegungen verschiedener Sportarten
In diesem Artikel wird eine einheitliche Bewegung...
MySQL-Abfrageanweisungsprozess und grundlegende Konzepte der EXPLAIN-Anweisung und deren Optimierung
Die Leistung Ihrer Website oder Ihres Dienstes hä...
Zabbix-Überwachungslösung – die neueste offizielle Version 4.4 [empfohlen]
Zabbix 12.10.2019 Chenxin siehe https://www.zabbi...
Detaillierte Erläuterung der elastischen CSS3-Erweiterungsbox
verwenden Flexible Boxen spielen beim Front-End-L...
Detaillierte Erläuterung der MERGE-Speicher-Engine von MySQL
Die MERGE-Speicher-Engine behandelt eine Gruppe v...
Detaillierte Erklärung zur Verwendung des MySQL-Sicherungsskripts mysqldump
In diesem Artikel wird das MySQL-Sicherungsskript...
Tutorial zur HTML-Tabellenauszeichnung (6): Farbattribut für dunkle Rahmen BORDERCOLORDARK
In einer Tabelle können Sie die Farbe des unteren...
Vermeidung von durch Closures verursachten Problemen in JavaScript
Über let, um Probleme durch Schließung zu vermeid...
Beispielcode zur Implementierung einer dynamischen Spaltenfilterung in einer Vue+Element-Tabelle
Anforderung: Bei der Anzeige von Daten in einer L...
So rufen Sie einen Hyperlink auf und öffnen ihn
<br />Die unzähligen Informationen im Intern...
Lösung für 404-Fehler beim Herunterladen einer APK-Datei vom IIS-Server
Bei der Verwendung von IIS als Server wurde die A...
Zwei Möglichkeiten zum Aktivieren der Firewall im Linux-Dienst
Es gibt zwei Möglichkeiten: 1. Servicemethode Übe...