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

相关推荐

  • word字体放大后如何上移

    word字体放大后上移方法 1、首先鼠标选中需要调整的文字。 2、右键文字,选择字体。 3、点开后,再点击字体的高级选项。找到位置,改成提升。 4、根据你需要的上升高度,填写对应的磅值。之后点击确定,就可以看到文字已经提升了。 关于“word字体放大后如何上移”这篇文章的内容就介绍到这里,感谢各位的…

    2022年9月10日
    66200
  • Redis怎么实现保存对象

    redis保存对象 redis数据结构 String——字符串 Hash——字典 List——列表 Set——集合 Sorted Set——有序集合 redisTemplate.opsForValue();//操作字符串redisTemplate.opsForHash();//操作hashredis…

    2022年9月2日
    55400
  • 如何入门WEB信息收集

    信息收集(Information Gathering),信息收集是指通过各种方式获取所需要的信息。信息收集是信息得以利用的名列前茅步,也是关键的一步。信息收集工作的好坏,直接关系到整个信息管理工作的质量。 在实战中,前期的信息收集的完整性,很大一部分决定了在对网站进行的测试的成功几率,能够收集的越多…

    2022年9月24日
    97100
  • windows浩辰cad看图王图片怎么放大

    浩辰cad看图王图片放大步骤: 一、按钮调整。 1、打开对应的文件。 2、找到如图位置的放大镜按钮。 3、选择需要使用的放大/缩小。 二、鼠标调整。 按住你的键盘ctrl,同时滑动鼠标的滚轮,向上是放大,向下是缩小。 到此,关于“windows浩辰cad看图王图片怎么放大”的学习就结束了,希望能够解…

    2022年9月21日
    66300
  • MySQL的rollback实例分析

    本文主要介绍“MySQL的rollback实例分析”的相关知识,文中所提到的一些操作方法不仅实用性强,且操作简单、快捷,不仅能帮助大家取得一定工作成果,而且还能提升工作效率,如果感兴趣的话,请耐心阅读! 事务回滚 事务是关系型数据库里的执行单位,可以通过最后阶段控制选择提交或回滚。在各种无法保证完整…

    2022年6月27日
    55900
  • mysql如何统计查询结果

    在mysql中,可以使用COUNT()函数来统计查询结果;该函数用于统计查询结果的行数,返回表中符合特定条件的记录行数。COUNT()函数有三种语法:1、“COUNT(*)”,返回总行数,包含NULL和非NULL值的行;2、“COUNT(字段名)”,返回不包含NULL值的行数,会忽略空值行;3、“C…

    2022年9月22日
    1.5K00
  • Mysql锁的内部实现机制是什么

    注:所列举代码皆出自Mysql-5.6 虽然现在关系型数据库越来越相似,但其背后的实现机制可能大相径庭。实际使用方面,因为SQL语法规范的存在使得我们熟悉多种关系型数据库并非难事,但是有多少种数据库可能就有多少种锁的实现方法。 Microsoft Sql Server2005之前只提供页锁,直到20…

    2022年9月15日
    64100
  • word页面变成左右两页怎么调回来

    调回来的方法: 1、首先打开word,然后点击顶部“视图”。 2、此时你可以看到单页选项,然后点击菜单中的“单页”。 3、此时就可以看到页面已经恢复正常了。 4、你也可以在变左右两页时,把右下角的显示比例调成100%来恢复正常。 以上就是“word页面变成左右两页怎么调回来”这篇文章的所有内容,感谢…

    2022年9月19日
    3.6K00
  • Redis发布订阅实例分析

    Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息。 Redis 客户端可以订阅任意数量的频道。 订阅/发布消息图: 名列前茅个对象:消息发送者。第二个对象:频道。第三个对象:消息订阅者。 下图展示了频道 channel1 , 以及订阅这个频…

    2022年9月26日
    75100
  • 知识库的作用

    企业中建立知识库的作用有7点:1、企业知识资产的沉淀;2、企业知识资产有序化规范化;3、加快信息的流动;4、有利于企业知识的复用;5、可以帮助企业实现对员工知识的有效管理;6、有助于员工的学习提升;有助于提升企业的竞争能力。具体我们将在文章中展开介绍。 企业中知识库的建立,可以有效的将信息/知识积累…

    2022年3月18日
    75800
站长微信
站长微信
电话联系

400-800-1024

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

分享本页
返回顶部