Heim >Web-Frontend >CSS-Tutorial >Absolute und relative CSS-Einheiten

Absolute und relative CSS-Einheiten

PHPznach vorne: 2023-08-29 17:49:091302Durchsuche

CSS-Absoluteinheiten und relative Einheiten fallen beide in die Kategorie der Distanzeinheiten.

CSS-Relativeinheiten definieren die Länge eines Elements relativ zu einem anderen Element.

Zum Beispiel sind vh relative Einheiten relativ zur Höhe des Ansichtsfensters.

Das Folgende sind relative CSS-Einheiten:

rlhvb vhvmaxvmin

<!DOCTYPE html>
<html>
<head>
<title>CSS Relative Units</title>
<style>
html{
   font-size: 14px;
   line-height: normal;
}
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#textContain {
   font-size: 20px;
   line-height: 2;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Relative-Units</legend>
<input type="text" id="textSelect" placeholder="Type Text Here...">
<input type="number" id="numSelect" value="1" min="1">
<div id="radioBut">
<input class="radio" type="radio" name="heading" value="em" checked><label>em</label>
<input class="radio" type="radio" name="heading" value="rem"><label>rem</label>
<input class="radio" type="radio" name="heading" value="vw"><label>vw</label>
<input class="radio" type="radio" name="heading" value="vh"><label>lh</label>
<input class="radio" type="radio" name="heading" value="ex"><label>ex</label>
</div>
<div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div>
<input type="button" onclick="changeText()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var numSelect = document.getElementById("numSelect");
var textPreview = document.getElementById("textPreview");
function changeText() {
   if(textSelect.value === &#39;&#39;)
      textPreview.textContent = &#39;Type some text first&#39;;
   else{
      for(var i=0; i<5; i++){
         var radInp = document.getElementsByClassName(&#39;radio&#39;)[i];
         if(radInp.checked === true){
            textPreview.textContent = textSelect.value;
            textPreview.style.fontSize = numSelect.value+radInp.value
         }
      }
   }
}
</script>
</body>
</html>

Ausgabe

Sr.No	Einheiten und relative
1	% Größe des übergeordneten Elements
2	em Die Schriftgröße des Elements. td>
3	Die Schriftgröße des Stammelements strong> 6
	Die Zeilenhöhe des Wurzelelements 7
	Ansichtsfenster im Wurzelelementblock 1 % der Achse 8
	1 % der Ansichtsfensterhöhe 9
	1 % der Ansichtsfenstergröße größer 10
	1 % des Ansichtsfensters kleiner 11...
Unten ist die Ausgabe des obigen Codes –	Bevor Sie auf eine Schaltfläche klicken – Nachdem Sie auf die Schaltfläche „Vorschau“ geklickt haben, haben Sie die Option „rem“ und das nicht leere Textfeld ausgewählt –
Nach dem Klicken auf „Vorschau“. Klicken Sie auf die Schaltfläche „pt“ und wählen Sie die Option „em“ aus, und das Textfeld ist nicht leer Klicken Sie auf die Schaltfläche „Vorschau“ und wählen Sie die Option „PC“ und ein nicht leeres Textfeld aus –

Das obige ist der detaillierte Inhalt vonAbsolute und relative CSS-Einheiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：CSS-Eigenschaft „max-height“.Nächster Artikel：CSS-Eigenschaft „max-height“.

In Verbindung stehende Artikel

Mehr sehen