一篇文章带你了解CSS单位相关知识

Python进阶者
• 阅读 1197

大家好,我是皮皮,今天给大家分享一些前端的知识。

一、了解 CSS 单位

测量长度的单位可以是绝对的,例如像素,点等,也可以是相对的,例如百分比(%)和 em 单位。

指定 CSS 单位对于非零值是必须的,因为没有默认单位。丢失或忽略单位将被视为错误。但是,如果该值为 0,则可以省略该单位(毕竟,零像素与零英寸是一样的)。

注意: 长度是指距离测量。长度包括数字值,后面加单位,比如 10px、2em、50% 等。数字和单位之间不能出现空白。

二、相对长度单位

相对长度单位指定相对于另一个长度属性的长度。相对单位是 描述 :em当前的字体大小 。

ex :当前字体的 x 高度 。

em 和 ex 单位取决于套用至元素的字体大小。

1. 使用 em 单位

em 的值等于使用它的元素的 font-size 属性的计算值。它可用于垂直或水平测量。

例如,如果 font-size 元素设置为 16px,并且 line-height 设置为 2.5em,则 line-height像素计算值为:2.5 x 16px = 40px。

P {
    font-size: 16px;
    line-height: 2.5em;
}

运行效果

一篇文章带你了解CSS单位相关知识

当在 font-size 属性本身的值中指定 em 时会发生异常,在这种情况下,它引用父元素的字体大小。

因此,当我们用 em 指定字体大小时,1em 继承自 font-size。因此, font-size: 1.2em; 使文本比父元素的文本大 1.2 倍。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>平安保险</title>
        <link rel="stylesheet" type="text/css" href="css/fy.css" />
    </head>

    <body>
        <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
        <title>项目</title>
        <style>
            body {
                font-size: 62.5%;
                font-family: Arial, Helvetica, sans-serif;
            }

            p {
                font-size: 1.6em;
            }

            p:firt-letter {
                font-size: 3em;
                font-weight: bold;
            }
</style>

        <body style="text-align: center; background-color: aquamarine;">
            <div>ddad</div>
            <p> Hellow world</p>
        </body>

</html>

一篇文章带你了解CSS单位相关知识

代码解析:浏览器中字体的默认大小为 16px。我们的第一步是通过将主体设置 font-size62.5% 来减小整个文档的大小,这会将字体大小重置为 10px(16px 的 62.5%)。

这是默认 font-size的四舍五入,方便 px 到 em的转换。

2. 使用 ex 单位

ex 单位等于当前字体的 x 高度。

所谓的 x 高度是因为它通常等于小写 x 的高度,如下所示。但是, ex 即使对于不包含 x 的字体,也会定义的。

P {
    font-size: 16ex;
    line-height: 2.5em;
}

一篇文章带你了解CSS单位相关知识

三、绝对长度单位

绝对长度单位相对于彼此固定。它们高度依赖于输出介质,因此在输出环境已知时主要有用。绝对单位由物理单位(的 in、cm、mm、pt、pc)和 px 单位。表中j进行属性的详细介绍。

单位 描述
in 英寸 - 1 英寸等于 2.54 厘米。
cm 厘米。
mm 毫米。
pt points - 在 CSS 中,一个点定义为 1⁄72 英寸(0.353mm)。
pc picas - 1pc 等于 12pt。
px 像素单位 - 1px 等于 0.75pt。

绝对物理单位,例如 in、cm、mm 等应被用于打印介质和类似的高分辨率的设备。然而,对于桌面和低分辨率设备等屏幕显示,建议使用像素或 em 单位。

例:

h1 {
                margin: 0.5in;
            }
            /* inches  */

            h2 {
                line-height: 3cm;
            }
            /* centimeters */

            h3 {
                word-spacing: 4mm;
            }
            /* millimeters */

            h4 {
                font-size: 12pt;
            }
            /* points */

            h5 {
                font-size: 1pc;
            }
            /* picas */

            h6 {
                font-size: 12px;
            }
            /* picas */

提示: 使用相对单位(如 em 或百分比 %)的样式表可以更轻松地从一个输出环境扩展到另一个输出环境。

一篇文章带你了解CSS单位相关知识

四、总结

本文主要介绍了css单位的运用,通过两个方面展开,相对长度单位,绝对长度单位,在项目中需要注意的点,需要注意的事项,都进行了详细的讲解和提供了对应的解决方案。代码很简单,希望可以帮助你学习。

如果在操作过程中有任何问题,记得下面留言,我们看到会第一时间解决问题。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java常用类(2)
三、时间处理相关类Date类:计算机世界把1970年1月1号定为基准时间,每个度量单位是毫秒(1秒的千分之一),用long类型的变量表示时间。Date分配Date对象并初始化对象,以表示自从标准基准时间(称为“历元”(epoch),即1970年1月1日08:00:00GMT)以来的指定毫秒数。示例:packagecn.tanjian
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Easter79 Easter79
2年前
sql:mysql:函数:TIMESTAMPDIFF函数实现TimeStamp字段相减,求得时间差
<divclass"htmledit\_views"id"content\_views"<p&nbsp;函数内指定是minute,则最终结果value值的单位是分钟,如果函数内指定为hours,则最终结果value值单位为小时。</p<preclass"has"name"code"<codeclass"hljssql"<
Wesley13 Wesley13
2年前
HTML&CSS基础学习笔记1.29
像素和相对长度前面的html博文,我们提到过用属性width、height来设置图片的尺寸,它们的单元都是”px(像素)”。长度单位总结一下,目前比较常用到px(像素)、em、%百分比,要注意其实这三种单位都是相对单位。1、像素像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素1英寸”)。实际情
Stella981 Stella981
2年前
DOIS 2019 DevOps国际峰会北京站来袭~
DevOps国际峰会是国内唯一的国际性DevOps技术峰会,由OSCAR 联盟指导、DevOps时代社区与高效运维社区联合主办,共邀全球80余名顶级专家畅谈DevOps体系与方法、过程与实践、工具与技术。会议召开时间:2019070508:00至2019070618:00结束会议召开地点:北京主办单位:DevOps
Wesley13 Wesley13
2年前
HTML5常见的取值与单位
HTML5常见的取值与单位长度单位包括相对长度单位包括:em,ex,ch,rem,vw,vh,vmax,vmin绝对长度单位包括:cm,mm,q,in,pt,pc,pxch:数字“0”的宽度em:相对于当前对象内文本的字体尺寸。如当前
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这