css 绝对单位和相对单位都属于距离单位类别。
css 相对单位定义一个元素相对于另一个元素的长度。
例如，vh 相对单位是相对于视口高度的。
以下是 css 相对单位 -
sr.no单位及相对
1 %父元素尺寸
2 em元素的字体大小
td>
3 ex strong>元素字体的 x 高度
4 lh元素的行高
5 rem根元素的字体大小
6 rlh根元素的行高
7 vb根元素块中视口大小的 1%轴
8 vh视口高度的 1%
9 vmax视口较大尺寸的 1%
10 vmin视口较小尺寸的 1%
11 vw视口宽度的 1%
示例让我们看一个 css 相对单位的示例 -
实时演示 p><!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 === '') textpreview.textcontent = 'type some text first'; else{ for(var i=0; i<5; i++){ var radinp = document.getelementsbyclassname('radio')[i]; if(radinp.checked === true){ textpreview.textcontent = textselect.value; textpreview.style.fontsize = numselect.value+radinp.value } } }}</script></body></html>
输出以下是上述代码的输出 -
单击任何按钮之前 -
点击“预览”后' 按钮，选择了 'rem' 选项且非空文本字段 -
单击“预览”按钮并选择“em”选项且文本字段为非空后 -
点击后选择“pt”选项且非空文本字段的“预览”按钮 -
点击“预览”按钮并选择“pc”选项和非空文本字段后 -
以上就是css 绝对和相对单位的详细内容。