css中设置长度的单位是什么

css长度单位有:1、em,相对字体长度单位,它的单位长度是根据元素的文本文字垂直长度来决定的;2、rem,相对字体长度单位,只相对根元素即html元素字体大小来确定其长度;3、%,相对于父元素宽度或字体大小的百分比;4、px,像素,是相对于显示器屏幕分辨率而言的;5、vw,相对于浏览器窗口的宽度;6、vh,相对于浏览器窗口的高度;7、ch,相对于所用字体中数字0的高度。

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

CSS样式由选择器、属性和值三个部分组成(例如p{width: 100px;}),在设置某些属性值时可能会涉及到与值对应的单位。CSS 支持多种不同的长度单位,根据类型的不同可以分为两类,分别是绝对长度单位(例如英寸、厘米、点)和相对长度单位(例如百分比)。

1、相对长度单位

相对长度单位指的是这个单位没有一个固定的值,它的值受到其它元素属性(例如浏览器窗口的大小、父级元素的大小)的影响,在响应式布局方面相对长度单位非常适用。

下表中列举了 CSS 中支持的相对长度单位:

单位 描述 示例
em

相对字体长度单位,它的单位长度是根据元素的文本文字垂直长度来决定的。

相对于自身 font-size(字体大小)属性的值,如果自身没有设置,则继承父元素 font-size 属性的值,1em 等同于 font-size 属性值,例如 font-size 的值为 16px,那么 1em 就等于 16px,2em 就等于 32px

p{line-height:2em;}
rem

相对字体长度单位,只相对根元素即html元素字体大小来确定其长度。

相对于根元素 <html> 的 font-size 属性的大小,比如根元素的 font-size 是 100px,那么 1.2rem 就相当于 120px

p{font-size: 1.2rem;}
ex 相对于所用字体中小写英文字母 x 的高度,若无法确定 x 的高度则使用 0.5em 计算 p{font-size: 1ex;}
ch 相对于所用字体中数字 0 的高度,若无法确定 0 的高度则使用 0.5em 计算 p{line-height: 3ch}
vw 相对于浏览器窗口的宽度,1vw = 窗口宽度的 1% p{font-size: 5vw;}
vh 相对于浏览器窗口的高度,1vh = 窗口高度的 1% p{font-size: 5vh;}
vmin vw 与 vh 中较小的值 p{font-size: 5vmin;}
vmax vw 与 vh 中较大的值 p{font-size: 5vmax;}
% 相对于父元素宽度或字体大小的百分比 div{width: 55%}

【示例】下面通过一个综合的示例演示相对长度单位的使用:

<!DOCTYPE html><html>    <head>        <title>CSS中的单位</title>        <style>            .box{                width: 60vw;                height: 88vh;                border: 1ex solid black;                font-size: 16px;            }            .info{                font-size: 2em;            }            .ex > span{                font-size: 3ex;            }            .ch > span{                font-size: 4ch;            }        </style>    </head>     <body>        <div class="box">            这是 16px 的字体            <p class="info">这是 2em 的字体</p>            <p class="ex">                x:<span>这是 3ex 的字体</span>            </p>            <p class="ch">                0:<span>这是 4ch 的字体</span>            </p>        </div>      </body></html>

运行结果如下图所示:

css中设置长度的单位是什么

2、绝对长度单位

绝对长度单位表示一个真实的物理尺寸,它的大小是固定的,不会因为其它元素尺寸的变化而变化。下表中列举了 CSS 中支持的绝对长度单位:

单位 描述 示例
cm 厘米 p{font-size: 0.5cm;}
mm 毫米 p{font-size: 5mm;}
in 英寸(1in = 96px = 2.54cm) p{font-size: 1in;}
px

像素,是相对于显示器屏幕分辨率而言的

(1px = 1/96in)

p{font-size: 16px;}
pt point,是一种专用的印刷单位“磅”,也可以称为“点”(1pt = 1/72in) p{font-size: 16pt;}
pc pica,中文可称为“派卡”,印刷行业用于描述字体大小的单位,相当于我国新四号铅字的尺寸(1pc = 12pt) p{font-size: 5pc;}

【示例】下面通过一个综合的示例演示绝对长度单位的使用:

<!DOCTYPE html><html>    <head>        <title>CSS中的单位</title>        <style>            .box{                width: 4in;                height: 4.5cm;                border: 2mm solid black;                font-size: 16px;            }            .pt{                font-size: 2pt;            }            .pc{                font-size: 3pc;            }        </style>    </head>     <body>        <div class="box">            这是 16px 的字体            <p class="pt">这是 2pt 的字体</p>            <p class="pc">这是 3pc 的字体</p>        </div>      </body></html>

运行结果如下图所示:

css中设置长度的单位是什么

感谢各位的阅读,以上就是“css中设置长度的单位是什么”的内容了,经过本文的学习后,相信大家对css中设置长度的单位是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

文章标题:css中设置长度的单位是什么,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/28892

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云
上一篇 2022年9月22日 下午10:12
下一篇 2022年9月22日 下午10:12

相关推荐

  • 猫鼠服务器是什么公司

    猫鼠(Cats and Mouse)服务器可能是您要询问的一种服务器类型,或者是一个特定服务器名称的误解,但在知识库中并无明确的记录表示猫鼠服务器代表着一个具体的公司。如果您是在询问一个公司或品牌名为“猫鼠”的服务器供应商,可能需要提供更多信息或者具体的上下文才能得出准确答案。如果您实际上指的是一个…

    2024年4月25日
    8200
  • 推理服务器作用是什么

    摘要 推理服务器的作用是1、执行模型推理任务、2、优化推理性能、3、降低延迟、4、提高吞吐量、5、支持多种模型格式、6、提供模型管理与扩展功能。 在这些核心功能中,优化推理性能尤为关键,因为它直接关系到模型部署后的效率和稳定性。推理服务器通过使用专门的算法和硬件加速技术,大幅提高处理速度,同时保持高…

    2024年4月25日
    10500
  • 服务器管理的好处是什么

    摘要 服务器管理的好处包括: 1.提高安全性、2.增强性能、3.确保数据完整性、4.优化资源利用,等重要方面。特别是提高安全性,这是服务器管理中的关键部分,为防止未授权访问、数据泄露和其他潜在威胁,定期对服务器进行维护和更新至关重要。此外,安装安全软件、监控系统漏洞、及时打补丁和执行严格的访问控制策…

    2024年4月25日
    9000
  • 云服务器存储资料是什么

    摘要 云服务器存储资料是1、通过网络访问的远程服务器上存储的数据,其依赖于2、云计算技术,使得数据存取更加灵活和高效。在这两点中,通过网络访问的远程服务器存储意味着用户无需对物理硬件进行管理或投入高额的初期成本,而是通过互联网连接到远程数据中心,实现数据存储和管理。这种模式不仅降低了企业或个人的技术…

    2024年4月25日
    8600
  • 下挂的服务器叫什么

    摘要:下挂的服务器通常被称作1、边缘服务器或2、即服务外设。其中,边缘服务器主要用于提高网络服务的访问速度和提升用户体验。通过布局在接近最终用户的地理位置上,这种服务器能够缓存内容,减少数据传输的延迟,加快载入速度,有效缓解主服务器的负荷。边缘服务器尤其适用于内容交付网络(CDN)和大数据分析等场景…

    2024年4月25日
    10500
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部