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

Docker - Zusammenfassung von 3 Möglichkeiten zum Ändern von Container-Mount-Verzeichnissen

Berechnung des Prozentwerts, wenn die CSS-Positionseigenschaft absolut ist

Docker - Zusammenfassung von 3 Möglichkeiten zum Ändern von Container-Mount-Verzeichnissen

Der Lösungsdatensatz für Vue, der das Element beim ersten Mal nicht abrufen konnte

Detaillierte Erläuterung der Methoden zur Überprüfung und Verwaltung von MySQL-Benutzerrechten

Detaillierte Erläuterung des Nginx-Strombegrenzungsmoduls in der Nginx-Quellcode-Recherche

Eine schnelle Lösung für das Problem der PC- und Mobilanpassung

Zusammenfassung von 10 erstaunlichen Tricks von Element-UI

Zusammenfassung mehrerer Implementierungen der Rückkehr zum Anfang in HTML-Seiten

Mysql verwendet Einfügen, um mehrere Datensätze einzufügen und Daten stapelweise hinzuzufügen

CSS-Anfänger-Tutorial: Hintergrundbild füllt den gesamten Bildschirm

Detaillierte Erläuterung des Prozessmanagements im Linux-System

Artikel empfehlen

So fügen Sie eine Schnittstellen-Abhörmaske in ein Vue-Projekt ein

So setzen Sie das Passwort zurück, wenn Sie es in MySQL8 vergessen haben (die alte MySQL-Methode funktioniert nicht)

50 wunderschöne FLASH-Website-Designbeispiele

Teilen Sie 5 hilfreiche CSS-Selektoren, um Ihr CSS-Erlebnis zu bereichern

HTML-Tabellen-Tag-Tutorial (33): Attribut für vertikale Zellenausrichtung VALIGN

Grafisches Tutorial zur Installation von mysql5.7.17.msi

Fallstricke bei der Installation der komprimierten Version von MySQL 5.7.17 unter Windows

JS-Objektkonstruktor Object.freeze

Layim in Javascript, um Freunde und Gruppen zu finden

So schreiben Sie DROP TABLE in verschiedene Datenbanken

Lassen Sie uns im Detail darüber sprechen, wie JavaScript den Aufbau des DOM-Baums beeinflusst

Grafisches Tutorial zur Konfigurationsmethode für die kostenlose Installationsversion von MySQL 5.7.20

Detaillierte Erläuterung zur Verwendung von grep zum Abrufen von MySQL-Fehlerprotokollinformationen

JavaScript-Funktion kapselt zufälligen Farbüberprüfungscode (vollständiger Code)

Vue implementiert rekursiv ein dreistufiges Menü