css 绝对单位和相对单位都属于距离单位类别。
CSS 相对单位定义一个元素相对于另一个元素的长度。
例如，vh 相对单位是相对于视口高度的。
以下是 CSS 相对单位 –
1 %
父元素尺寸
立即学习“前端免费学习笔记（深入）”；
2em
元素的字体大小
td>
3ex strong>
元素字体的 x 高度
4lh
元素的行高
5rem
根元素的字体大小
6rlh
根元素的行高
7vb
根元素块中视口大小的 1%轴
8vh
视口高度的 1%
9vmax
视口较大尺寸的 1%
10vmin
视口较小尺寸的 1%
11vw
视口宽度的 1%
示例
让我们看一个 CSS 相对单位的示例 –
实时演示 p>
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 } } }}CSS Relative Units 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;}
输出
以下是上述代码的输出 –
单击任何按钮之前 –
点击“预览”后’ 按钮，选择了 ‘rem’ 选项且非空文本字段 –
单击“预览”按钮并选择“em”选项且文本字段为非空后 –
点击后选择“pt”选项且非空文本字段的“预览”按钮 –
点击“预览”按钮并选择“pc”选项和非空文本字段后 –
以上就是CSS 绝对和相对单位的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625453.html
微信扫一扫 
支付宝扫一扫 
