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

相关推荐

  • mysql存储引擎之间的区别有哪些

    mysql存储引擎之间的区别:1、MyISAM不支持事务,不支持行级锁,而InnoDB则支持事务和行级锁;2、InnoDB支持MVCC,支持外键,而MyISAM不支持MVCC和外键。 千万级数据并发如何处理?进入学习 本教程操作环境:windows10系统、mysql8.0.22版本、Dell G3…

    2022年8月30日
    7200
  • 怎么搭建配置Docker私有仓库

    ⛳️ 1.Docker容器三要素 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源。Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之…

    2022年9月18日
    12900
  • vue组件值变化但不刷新问题怎么解决

    今天分享文章“vue组件值变化但不刷新问题怎么解决”,主要从:组件值变化但不刷新强制组件刷新、bug复现、解决等几个方面为大家介绍,希望能帮到您。 组件值变化但不刷新强制组件刷新 在调用组件的时候,如果数据中只是某个属性变化(比如id)变化,在vue开发工具中看到变量值变化,但是组件上的数据就是不刷…

    2022年6月29日
    64100
  • windows ddu卸载显卡驱动使用问题怎么解决

    ddu卸载显卡驱动怎么用: 1、首先,我们运行“Display Driver Uninstaller.exe”程序软件。 2、打开后,在右下角可以修改为“简体中文” 3、接着在右上角可以选择设备种类,“显卡”或者“声卡” 4、在下方选择我们的设备供应商。 5、选择完成后点击下方按钮,可以恢复设备的默…

    2022年9月21日
    12700
  • windows中无法使用内置管理员账户怎么解决

    解决方法: 1、首先右键开始菜单,打开“运行” 2、在其中输入“SECPOL.MSC”回车打开本地安全策略。 3、接着进入“本地策略”下的“安全选项” 4、然后双击打开“用户帐户控制:用于内置管理员帐号的管理员批准模式”选项。 5、打开后,勾选其中的“已启用”就可以解决问题了。 以上就是关于“win…

    2022年8月30日
    4900
  • mysql与sql server的语法有哪些区别

    mysql与“sql server”的语法区别:1、mysql支持enum和set类型,而“sql server”不支持;2、mysql的递增语句是“AUTO_INCREMENT”,而“sql server”的是identity;3、“sql server”默认到处表创建语句的默认值表示是“((0)…

    2022年8月27日
    23500
  • java源文件的扩展名是哪个

    java源文件扩展名是“.java”;用javac进行编译,生成后缀名为“.class”的字节码文件,保存在和源程序一致的目录下,如源代码有错误,会按行指出错误,修改错误后重新进行编译,直至生成“.class”字节码文件为止。 本教程操作环境:windows7系统、java10版、DELL G3电脑…

    2022年8月27日
    9700
  • Mysql时区错误问题怎么解决

    问题描述 在做项目的时候突然遇到以下的报错,可以看到是说 数据库的时区错误,这里使用的是Mysql 8.0.15数据库。 这里试用了idea提供的数据库可视化插件。 以下报错使得无法访问数据库。 org.apache.ibatis.exceptions.PersistenceException: #…

    2022年8月27日
    8800
  • Word尾注怎么合并注释文献

    尾注合并注释文献的方法: 1、首先打开电脑上面的word。 2、之后点击上面的“插入”。 3、然后在选择里面的“交叉引用”。 4、点击之后会出现一个窗口,选择“引用类型”, 然后去点击“要用的尾注”。 5、最后点击确定即可。 关于“Word尾注怎么合并注释文献”的内容就介绍到这里了,感谢大家的阅读。…

    2022年8月31日
    27000
  • windows todesk如何传输文件

    todesk传输文件的方法 1、 打开ToDesk,进入“设备列表”,选中想要传输的对象 2、选中后,点击右侧的“文件传输”,就能将需要的文件传给对方了 3、或者还有一种方法,就是点击工具栏箭头按钮 4、选择“文件” 5、最后在其中选中文件夹就可以进行文件的传输了。 感谢各位的阅读,以上就是“win…

    2022年9月26日
    34600
联系我们
关注微信
关注微信
分享本页
返回顶部
PingCode 比 Jira 更好用的研发管理工具。免费试用