CSS单位的应用方法和场景

这篇文章主要介绍“CSS单位的应用方法和场景”，在日常操作中，相信很多人在CSS单位的应用方法和场景问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS单位的应用方法和场景”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联是专业的沿滩网站建设公司，沿滩接单;提供成都网站设计、成都网站建设、外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行沿滩网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

一、了解 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 倍。

                                平安保险                                      项目                                ddad
              Hellow world

CSS单位的应用方法和场景

代码解析：浏览器中字体的默认大小为 16px。我们的第一步是通过将主体设置 font-size 为 62.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 单位。

例：

h2 {                 margin: 0.5in;             }             /* inches  */              h3 {                 line-height: 3cm;             }             /* centimeters */              h4 {                 word-spacing: 4mm;             }             /* millimeters */              h5 {                 font-size: 12pt;             }             /* points */              h6 {                 font-size: 1pc;             }             /* picas */              h7 {                 font-size: 12px;             }             /* picas */

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

CSS单位的应用方法和场景