文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS中的长度单位是什么

2024-04-02 19:55

关注

本篇内容主要讲解“CSS中的长度单位是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS中的长度单位是什么”吧!

前面的话

本文分为绝对长度单位和相对长度单位来介绍CSS中的长度单位的主要知识

绝对长度单位

绝对长度单位代表一个物理测量

像素px(pixels)
 
在web上,像素px是典型的度量单位,很多其他长度单位直接映射成像素。最终,他们被按照像素处理

英寸in(inches)
 
1in = 2.54cm = 96px

厘米cm(centimeters)
 
1cm = 10mm = 96px/2.54 = 37.8px

毫米mm(millimeters)
 
1mm = 0.1cm = 3.78px

1/4毫米q(quarter-millimeters)
 
1q = 1/4mm = 0.945px

点pt(points)
 
1pt = 1/72in = =0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px

派卡pc(picas)
 
1pc = 12pt = 1/6in = 1/6*96px = 16px

字体相关相对长度单位

em、ex、ch、rem是字体相关的相对长度单位

em
 
em表示元素的font-size属性的计算值,如果用于font-size属性本身,相对于父元素的font-size;若用于其他属性,相对于本身元素的font-size

CSS Code复制内容到剪贴板

  1. <style>  

  2. .box{font-size: 20px;}  

  3. .in{  

  4.       

  5.     font-size: 2em;  

  6.       

  7.     height: 5em;  

  8.       

  9.     width: 10em;  

  10.     background-color: lightblue;  

  11. }  

  12. </style>  

XML/HTML Code复制内容到剪贴板

  1. <div class="box">  

  2.     <div class="in">测试文字</div>      

  3. </div>  

CSS中的长度单位是什么

rem
 
rem是相对于根元素html的font-size属性的计算值

兼容性: IE8-不支持

CSS Code复制内容到剪贴板

  1. <style>  

  2.   

  3. html{font-size: 2rem;}  

  4.   

  5. .box{font-size: 2rem;}  

  6. .in{  

  7.       

  8.     font-size: 1rem;  

  9.       

  10.     border-left: 1rem solid black;  

  11.       

  12.     height: 4rem;  

  13.       

  14.     width: 6rem;  

  15.     background-color: lightblue;  

  16. }  

  17. </style>  

XML/HTML Code复制内容到剪贴板

  1. <div class="box">  

  2.     <div class="in" id="test">测试文字</div>      

  3. </div>  

CSS中的长度单位是什么

ex
 
ex是指所用字体中小写x的高度。但不同字体x的高度可能不同。实际上,很多浏览器取em值一半作为ex值

[注意]ex在实际中常用于微调

CSS Code复制内容到剪贴板

  1. <style>  

  2. .box{font-size: 20px;}  

  3. .in{  

  4.     font-size: 1ex;  

  5.     border-left: 1ex solid black;  

  6.     height: 10ex;  

  7.     width: 20ex;  

  8.     background-color: lightblue;  

  9. }  

  10. </style>  

XML/HTML Code复制内容到剪贴板

  1. <button>宋体</button><button>微软雅黑</button><button>arial</button><button>serif</button>  

  2. <div class="box">  

  3.     <div class="in" id="test">测试文字</div>      

  4. </div>  

JavaScript Code复制内容到剪贴板

  1. <script>  

  2. var aBtns = document.getElementsByTagName('button');  

  3. for(var i = 0; i < aBtns.length; i++ ){  

  4.     aBtns[i].onclick = function(){  

  5.         test.style.fontFamily = this.innerHTML;  

  6.     }  

  7. }      

  8. </script>  

ch
 
ch与ex类似,被定义为数字0的宽度。当无法确定数字0宽度时,取em值的一半作为ch值

兼容性: IE8-不支持

[注意]ch在实际中主要用于盲文排版
CSS中的长度单位是什么

CSS Code复制内容到剪贴板

  1. <style>  

  2. .box{font-size: 20px;}  

  3. .in{  

  4.     font-size: 1ch;  

  5.     border-left: 1ch solid black;  

  6.     height: 10ch;  

  7.     width: 20ch;  

  8.     background-color: lightblue;  

  9. }  

  10. </style>  

XML/HTML Code复制内容到剪贴板

  1. <button>宋体</button><button>微软雅黑</button><button>arial</button><button>serif</button>  

  2. <div class="box">  

  3.     <div class="in" id="test">测试文字</div>      

  4. </div>  

JavaScript Code复制内容到剪贴板

  1. <script>  

  2. var aBtns = document.getElementsByTagName('button');  

  3. for(var i = 0; i < aBtns.length; i++ ){  

  4.     aBtns[i].onclick = function(){  

  5.         test.style.fontFamily = this.innerHTML;  

  6.     }  

  7. }      

  8. </script>  

CSS中的长度单位是什么

视口相关相对长度单位

视口相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时,他们都会相应地缩放。然而,当根元素的overflow值为auto时,任何滚动条会假定不存在。

关于视口相关的单位有vh、vw、vmin、vmax4个单位

兼容性:IE8-不支持,IOS7.1-不支持,android4.3-不支持(对于vmax,所有IE浏览器都不支持)

[注意]黑莓错误的将其相对于视觉视口来计算;而safari奇怪地相对于html元素来计算,如果html中增加了内容,这两个单位也会发生变化

vh
 
布局视口高度的 1/100

vw
 
布局视口宽度的 1/100

CSS Code复制内容到剪贴板

  1. <style>  

  2. body{margin: 0;}  

  3. .box{  

  4.       

  5.     height: 100vh;  

  6.     background-color: lightblue;  

  7. }      

  8. </style>  

XML/HTML Code复制内容到剪贴板

  1. <div class="box"></div>  

CSS中的长度单位是什么

vmin
 
布局视口高度和宽度之间的最小值的 1/100

CSS Code复制内容到剪贴板

  1.   

  2. .box{  

  3.     height: 100vmin;  

  4.     width: 100vmin;  

  5. }  

CSS中的长度单位是什么

vmax

布局视口高度和宽度之间的最大值的 1/100

CSS Code复制内容到剪贴板

  1.   

  2. .box{  

  3.     height: 100vmax;  

  4.     width: 100vmax;  

  5. }      

CSS中的长度单位是什么

到此,相信大家对“CSS中的长度单位是什么”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯