Heim > Artikel > Web-Frontend > Ausführliche Erklärung zur Verwendung von Prozentwerten in CSS

Ausführliche Erklärung zur Verwendung von Prozentwerten in CSS

高洛峰Original: 2017-03-09 16:33:262492Durchsuche

Lernen wir, wie man den Prozentwert in CSS verwendet.

Der Prozentwert ist die grundlegende Methode zum Entwerfen verschiedener Elementgrößen und Seitenlayouts in CSS. Hier zeigen wir Ihnen, wie Sie den Prozentwert in CSS gründlich beherrschen. Die Verwendung, einschließlich der Methode zum Konvertieren von Prozent in px usw., los geht's~

Prozent soll relativ zur Größe desselben Attributs des übergeordneten Elements sein.
Wenn Sie die Schriftart festlegen, ist sie relativ zur Schriftgröße des übergeordneten Elements.
Die Standardschriftgröße in den Tags und

beträgt in den meisten Browsern 100 %.

html {font-size: 100%;}   
body {font-size: 100%;}   
100% = 1em = 16px = 12pt

Wenn verwendet, um eine nicht standardmäßige Breite festzulegen Höhe der Schriftgröße, der Längenwert in Prozent basiert auf dem Längenwert des übergeordneten Elements mit demselben Attribut.

<!DOCTYPE html>   
<html>   
<head>   
  <meta charset="utf-8">   
  <title>JS Bin</title>   
  <style type="text/css">   
  p.parent {   
    margin:150px;   
    width: 200px;   
    height: 200px;   
    border: 1px solid blue;   
  }   
  p.child {   
    width: 50%;   
    height: 50%;   
    border: 1px dashed black;   
  }   
  </style>   
</head>   
<body>   
  <p class="parent">   
    <p class="child"></p>   
  </p>   
</body>   
</html>

Ein bisschen mehr über das übergeordnete Element: Was ist das übergeordnete Element, relative Positionierung (relativ), absolute Positionierung (absolut), Float (Float), fest (fest) Wie finde ich das übergeordnete Element?
Da HTML eine Baumstruktur mit Tags innerhalb von Tags hat, ist die Eltern-Kind-Beziehung im Allgemeinen klar.

<p class="parent">
    <p class="child"></p>
</p>

1. Das relativ positionierte Element , sein übergeordnetes Element entspricht der Tag-Verschachtelung.
2. Absolut positioniertes Element , sein übergeordnetes Element ist das nächstgelegene positionierte Element (absolute Positionierung, relative Positionierung, fest, aber ohne Floating) oder die Fenstergröße (wenn kein positioniertes Element gefunden wird).
3. Floating-Element , sein übergeordnetes Element entspricht auch der Tag-Verschachtelung.
4. Festes Element (spezielle absolute Positionierung), sein übergeordnetes Element ist das Fenster (die Größe des Bereichs, den der Browser standardmäßig zum Anzeigen von Inhalten verwendet, nicht die Größe von HTML oder Text).
Achten Sie einfach auf die absolute Positionierung, der Rest ist relativ einfach.

<!DOCTYPE html>   
<html>   
<head>   
  <meta charset="utf-8">   
  <title>JS Bin</title>   
  <style type="text/css">   
    html {   
        width:1000px;   
    }   
    body {   
        width:800px;   
    }   
    #box {   
        width:50%;   
        height:300px;   
        position: absolute;   
        margin-left: 200px;   
        border: 1px solid red;   
    }   
    #can {   
        position:absolute;   
        top:100px;   
        left:100px;   
        width:50%;   
        height:50%;   
        border:1px solid black;   
    }   
  </style>    
</head>     
<body>   
    <p id="box">   
        <p id="can"></p>   
    </p>   

</body>     
</html>

Ausführliche Erklärung zur Verwendung von Prozentwerten in CSS

Die Breite der Box beträgt die Hälfte des Fensters, und die Breite und Höhe der Dose beträgt die Hälfte der Breite und Höhe der Box .
Setzen Sie can auf die Position „fixed“, dann ist das übergeordnete Element kein Feld mehr, sondern ein Browserfenster.
Ausführliche Erklärung zur Verwendung von Prozentwerten in CSS

Die Breite und Höhe der Dose beträgt die Hälfte der Breite und Höhe des Fensters.
Das übergeordnete Element eines schwebenden Elements ist dasselbe wie das übergeordnete Element eines normalen Elements.

<!DOCTYPE html>   
<html>   
<head>   
  <meta charset="utf-8">   
  <title>JS Bin</title>   
  <style type="text/css">   
    html {   
        width:1000px;   
    }   
    body {   
        width:800px;   
    }   
    #box {   
        width:50%;   
        height:300px;   
        position: absolute;   
        margin-left: 200px;   
        border: 1px solid red;   
    }   
    #can {   
        float:left;   
        width:50%;   
        height:50%;   
        border:1px solid black;   
    }   
  </style>    
</head>     
<body>   
    <p id="box">   
        <p id="can"></p>   
    </p>   

</body>     
</html>

Ausführliche Erklärung zur Verwendung von Prozentwerten in CSS

Hinweis: Wenn Abstand und Rand als Prozentsätze festgelegt sind, sind die Werte oben, unten, links und rechts die Breite des übergeordneten Elements berechnen.

Prozentsatz zu px
Beispiel 1: Ränder

<p style="width: 20px">   
<p id="temp1" style="margin-top: 50%">Test top</p>   
<p id="temp2" style="margin-right: 25%">Test rightright</p>   
<p id="temp3" style="margin-bottom: 75%">Test bottombottom</p>   
<p id="temp4" style="margin-left: 100%">Test left</p>   
</p>

Der erhaltene Offset ist wie folgt:

temp1.marginTop = 20px * 50% = 10px;   
temp2.marginRight = 20px * 25% = 5px;   
temp3.marginBottom = 20px * 75% = 15px;   
temp4.marginLeft = 20px * 100% = 20px;

Dann habe ich den Abstand getestet. Ich dachte, der Abstandswert würde auf der Grundlage der zugehörigen Elemente berechnet, auf die das Attribut angewendet wurde, aber zu meiner Überraschung wurde der Abstand auch auf der Grundlage der Breite berechnet des übergeordneten Elements, auf das das Attribut angewendet wurde, wird berechnet und verhält sich genauso wie der Rand. (Noch ein Satz: Wenn die Breite eines Elements prozentual festgelegt wird, wird sie relativ zur Breite des übergeordneten Containers berechnet. Die vertikale Prozenteinstellung des Elements ist ebenfalls relativ zur Breite des Containers, nicht zur Höhe.)
Aber es gibt eine Grube, die oben genannten sind alle für nicht positionierte Elemente. Ich bin neugierig, und ich bin neugierig, wie man die Prozentwerte von oben, rechts, unten und links für nicht statisch positionierte Elemente berechnet.
Beispiel 2: Positionierte Elemente

<p style="height: 100px; width: 50px">   
<p id="temp1" style="position: relative; top: 50%">Test top</p>   
<p id="temp2" style="position: relative; right: 25%">Test rightright</p>   
<p id="temp3" style="position: relative; bottom: 75%">Test bottombottom</p>   
<p id="temp4" style="position: relative; left: 100%">Test left</p>   
</p>

Die resultierenden Versätze sind wie folgt:

temp1.top = 100px * 50% = 50px;   
temp2.rightright = 100px * 25% = 25px;   
temp3.bottombottom = 100px * 75% = 75px;   
temp4.left = 100px * 100% = 100px;

Für positionierte Elemente sind diese Werte sind ebenfalls relativ zum übergeordneten Element, aber im Gegensatz zu nicht positionierten Elementen sind sie relativ zur Höhe des übergeordneten Elements und nicht zu seiner Breite.
Wenn das übergeordnete Element keine Höhe hat, werden Prozentwerte stattdessen als automatisch verarbeitet.
Es ist etwas verwirrend, aber denken Sie daran: Für Rand und Innenabstand wird der Prozentsatz anhand der Breite des Elements berechnet übergeordnetes Element, und für positionierte Elemente wird es basierend auf der Höhe des übergeordneten Elements berechnet.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von Prozentwerten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Diskussion über die Verwendung von CSS zum Löschen von Floating Clearfix und ClearNächster Artikel：Eine kurze Diskussion über die Verwendung von CSS zum Löschen von Floating Clearfix und Clear

In Verbindung stehende Artikel

Mehr sehen