您现在的位置是:群英 > 开发技术 > web开发
CSS中绝对单位有哪些,用法是什么
Admin发表于 2022-07-28 17:51:281716 次浏览
这篇文章给大家分享的是“CSS中绝对单位有哪些,用法是什么”,文中的讲解内容简单清晰,对大家认识和了解都有一定的帮助,对此感兴趣的朋友,接下来就跟随小编一起了解一下“CSS中绝对单位有哪些,用法是什么”吧。

在css中,绝对单位全称“绝对长度单位”,是一个固定的值,它反应一个真实的物理尺寸;绝对单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。css绝对单位有cm(厘米)、mm(毫米)、in(英寸)、px(像素)、pt(点)、pc(派卡)。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css长度单位可分为:相对长度单位 和 绝对长度单位。

相对单位

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设配相对长度更加适用。

单位 描述
em 它是描述相对于应用在当前元素的字体尺寸,所以它是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px
ex 依赖于英文字母小x的高度
ch 数字0的宽度
rem rem是根(root em)的缩写,相对于根元素字体大小(相对的只是HTML根元素);
vw viewpoint width,视窗宽度,1vw = 视窗宽度的1%
vh viewpoint height,视窗高度,1vh = 视窗高度的1%
vmin vw和vh中较小的一个
vmax vw和vh中较大的一个

绝对单位

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)

单位 描述
cm 厘米
mm 毫米
in 英寸(1in= 96px = 2.54cm)
px 像素
pt point (1pt = 1/72in)
pc pica 大约12pt(1pc = 12pt)

css px单位---最经常使用的长度单位

px又名为:像素,是屏幕媒体(即在电脑屏幕上读取)固定大小的单元,是一个按角度度量的单位。一个像素等于电脑屏幕上的一个点 (即:屏幕分辨率的最小分割),web页面可以精确按像素完美呈现的。我们看看如何设置,例:

.demo{  font-size: 40px; }

css pc单位

pc:派卡(Pica),相当于我国新四号铅字的尺寸。

.demo{  font-size: 4pc; }

css pt单位

pt:点(Point),绝对长度单位

.demo{  font-size: 40pt; }

css in单位

in:英寸(Inch),一个物理度量单位,但是在CSS领域,英寸只不过被直接映射成像素罢了。

.demo{  font-size: 0.5in; }

css mm单位

mm:毫米(Millimeter),是个小数量级的物理度量单位。

.demo{  font-size: 10mm; }

css cm单位

cm:厘米(Centimeter),对于世界上大多数的人来说,是比较熟悉有用的物理度量单位。在css中它也映射成像素。

.demo{  font-size: 1cm; }

扩展知识:

我们来看看这些长度单位是如何换算的:

1in = 2.54cm = 25.4 mm = 72pt = 6pc=96px

下面我们给出pt与px的相互转换的公式:

px = pt *(96/72)
pt=px*(72/96)

关于“CSS中绝对单位有哪些,用法是什么”的内容就介绍到这,感谢各位的阅读,相信大家对CSS中绝对单位有哪些,用法是什么已经有了进一步的了解。大家如果还想学习更多知识,欢迎关注群英网络,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: css绝对单位
相关信息推荐
2022-09-03 17:49:40 
摘要:本篇文章带大家介绍一下Bootstrap中的网页布局网格系统,了解Bootstrap 网格系统的工作原理、单元格宽度设置和响应式布局方式,希望对大家有所帮助!
2022-09-03 17:49:42 
摘要:本篇文章带大家了解一下Bootstrap中的弹出框和提示框效果。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
2022-05-18 18:14:48 
摘要:Goland如何修改背景为图片本文目的美化goland编辑器的背景,为了提高读者的观看体验下麦是正常的代码的背景图,这样看着没有一点的新鲜感修改为这个样子,代码是不是也变得很亮了...
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部