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
So erstellen Sie SonarQube mit Docker
Inhaltsverzeichnis 1. Docker installieren 2. Sona...
So verwenden Sie Homebrew unter Linux richtig
Viele Leute verwenden Linux Homebrew. Hier sind d...
Beheben Sie das Problem, dass der Name des Dateiänderungsformulars vom Typ = Datei nicht normal wiedergegeben werden kann
Der Code unter dem Easyui-Framework lautet wie fo...
Erweiterte Verwendung von Ansichten, Transaktionen, Indizes, Selbstverbindungen und Benutzerverwaltung in der MySQL-Datenbank – Beispielanalyse
Dieser Artikel beschreibt anhand von Beispielen d...
JavaScript zum Erreichen aller oder umgekehrter Auswahlfunktionen
In diesem Artikel wird der spezifische JavaScript...
Eine kurze Analyse der Unterschiede zwischen „:=“ und „=“ in MySQL
= Nur beim Setzen und Aktualisieren wirkt es wie ...
Lernen Sie, wie Sie in 6 Sekunden 1 Million Datensätze in MySQL einfügen
1. Idee Es dauerte nur 6 Sekunden, um 1.000.000 D...
Das WeChat-Applet realisiert die Chatroom-Funktion
In diesem Artikel wird der spezifische Code des W...
Lassen Sie uns ausführlich über den Vue-Lebenszyklus sprechen
Inhaltsverzeichnis Vorwort 1. Lebenszyklus in Vue...
Lösung für das Problem der verstümmelten Webseiten, wenn die Kodierung auf UTF-8 eingestellt ist
Als ich kürzlich Webseiten mit PHP schrieb, habe i...
Beispiel für das Erstellen eines virtuellen Hosts basierend auf dem Apache-Port
Apache: Virtuellen Host basierend auf Port erstel...
So konfigurieren Sie die Neuschreibung von Nginx-Domänennamen und die Auflösung von Platzhalterdomänennamen
In diesem Artikel erfahren Sie, wie Sie Nginx so ...
Detaillierte Erläuterung der Transaktionsisolierungsebenen der MySQL-Datenbank
Isolationsebene für Datenbanktransaktionen Es gib...
mysql IS NULL mit Indexfallerklärung
Einführung Die Verwendung von „ist null“, „ist ni...
Docker-Umgebung in Linux-Umgebung installieren (keine Fallstricke)
Inhaltsverzeichnis Installationsvoraussetzungen S...