• 技术文章 >web前端 >前端问答

    css绝对单位是什么

    青灯夜游青灯夜游2022-07-26 16:09:30原创1251

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

    大前端成长进阶课程:进入学习

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

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

    相对单位

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

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

    绝对单位

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

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

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

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

    .demo{  font-size: 40px; }

    1.png

    css pc单位

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

    .demo{  font-size: 4pc; }

    2.png

    css pt单位

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

    .demo{  font-size: 40pt; }

    3.png

    css in单位

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

    .demo{  font-size: 0.5in; }

    4.png

    css mm单位

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

    .demo{  font-size: 10mm; }

    5.png

    css cm单位

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

    .demo{  font-size: 1cm; }

    6.png

    扩展知识:

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

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

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

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

    (学习视频分享:web前端入门

    以上就是css绝对单位是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css 绝对单位
    上一篇:vue可以用哪些框架 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• css3里的deg是什么单位• css3单位是什么• css能用像素单位吗• 操作系统对磁盘进行读写操作的单位是什么• 用于表示位图图像分辨率的常用单位是什么• 数据的最小单位是什么• 数据链路层的数据单位是什么
    1/1

    PHP中文网