Home >Web Front-end >CSS Tutorial >CSS absolute and relative units

CSS absolute and relative units

PHPzforward: 2023-08-29 17:49:091297browse

CSS Both absolute units and relative units belong to the distance unit category.

CSS relative units define the length of one element relative to another element.

For example, vh Relative units are relative to the viewport height.

The following are CSS relative units-

##11

Sr.No	units and relative
1	% Parent element size
2	em The font size of the element td>
3	ex strong> x-height of element font
4	lh The line height of the element
5	rem The font size of the root element
6	rlh Row height of the root element
7	vb 1% axis of viewport size in root element block
8	vh 1% of the viewport height
9	vmax 1% of the larger size of the viewport
10	vmin 1% of the smaller size of the viewport
	vw1% of the viewport width

Example

Let Let’s look at an example of CSS relative units -

Live demo

<!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>

p>Output

The following is the output of the above code-

Before clicking any button-

CSS 绝对和相对单位

After clicking the "Preview" button, the 'rem' option is selected and the text field is not empty -

CSS 绝对和相对单位

After clicking the "Preview" button and selecting the "em" option and the text field is not empty-

CSS 绝对和相对单位

After clicking the "Preview" button and selecting the "pt" option and the text field is not empty ” button-

CSS 绝对和相对单位

After clicking the “Preview” button and selecting the “pc” option and a non-empty text field-

CSS absolute and relative units

The above is the detailed content of CSS absolute and relative units. For more information, please follow other related articles on the PHP Chinese website!

css

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：CSS max-height propertyNext article：CSS max-height property

See more

CSS absolute and relative units

Related articles