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

Detaillierte Erklärung zur Verwendung benutzerdefinierter Parameter in MySQL

Berechnung des Prozentwerts, wenn die CSS-Positionseigenschaft absolut ist

Detaillierte Erklärung zur Verwendung benutzerdefinierter Parameter in MySQL

Machen Sie sich nicht die Mühe mit JavaScript, wenn es mit CSS geht

Einführung in Fork in Multithreading unter Linux

Vue implementiert das Hinzufügen eines Wasserzeicheneffekts zur Seite

Auf den Alibaba Cloud Server Tomcat kann nicht zugegriffen werden

Natives JS zum Erzielen von Verzeichnis-Scrolleffekten

So optimieren Sie die MySQL-Abfragegeschwindigkeit

Beispielcode zur Implementierung des Dunkelmodus mit CSS-Variablen

Detaillierte Erläuterung der Live-Übertragungsfunktion von Vue

Webdesigner ist ein geeignetes Talent

Artikel empfehlen

Beispielanalyse der Verwendung gemeinsam genutzter und exklusiver Sperren in MySQL

So installieren Sie den RabbitMQ-Server mit Yum auf CentOS

Eine kurze Diskussion über die Lösung für übermäßige Daten in ElementUI el-select

So verwenden Sie die REM-Anpassung in Vue

Formatieren der Linux-Systemfestplatte und manuelles Hinzufügen einer Swap-Partition

Eine kurze Analyse zum Upgrade von PHP 5.4 auf 5.6 in CentOS 7

So speichern Sie Bilder in MySQL

Tutorial zum Erstellen eines SVN-Servers mit Docker

Detaillierte Erläuterung des Fehlerproblems der Case-When-Anweisung

Deaktivierte Werte, die nicht eingegeben werden können, können nicht an die Aktionsebene übergeben werden

Erläuterung der Lösung zur mobilen H5-Bildgenerierung in JavaScript

Spezifische Verwendung von GNU Parallel

CSS-Layout-Tutorial: So erreichen Sie eine vertikale Zentrierung

Erfahren Sie, wie Sie den Zabbix-Dienst auf Saltstack bereitstellen