Absolute und relative CSS-Einheiten-CSS-Tutorial-php.cn

Absolute und relative CSS-Einheiten

PHPz

Freigeben： 2023-08-29 17:49:09

nach vorne

1326 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!