CSS样式中rem、em和px 区别以及其工作原理解

CSS样式中rem、em和px 区别以及其工作原理解析

em、em和px都是CSS中用于设置元素尺寸的单位，它们的区别和计算方式如下：

相对单位 vs 绝对单位

px，像素，是一个绝对单位，它提供了一个具体的、固定的尺寸。1像素等于屏幕上的一个实际像素点，是相对于显示器屏幕分辨率而言的，是一个绝对单位，不随页面缩放而变化。因此，px单位指定的大小在不同设备和屏幕上保持不变，不受其他因素的影响。计算方式为：1px=1/96英寸。

em，一个相对长度单位，是相对于元素自身的字体大小而言的，如果元素没有设置字体大小，则相对于父元素的字体大小。1em等于元素的字体大小。因此，em的大小会根据上下文而变化。计算方式为：1em=元素字体大小。

3. rem，根元素字体大小单位，是相对于根元素（即html元素）的字体大小而言的，它不受元素字体大小和父元素字体大小的影响，只受根元素字体大小的影响。计算方式为：1rem=根元素字体大小。

可扩展性：

px单位的尺寸是固定的，不会根据用户的偏好或设备屏幕的大小而改变。这使得它在某些情况下很有用，如确保文本大小的一致性。

em单位更灵活，可以根据用户的字体大小设置和父元素的字体大小来自动调整。这对于响应式设计和用户可访问性非常有用。

rem单位更灵活，可以根据根元素的字体大小来自动调整。这对于适配不同型号的设备屏幕更为有用。

应用范围

px通常用于设置固定大小的元素，如边框、内边距或其他元素的尺寸。

rem和em通常用于调整文本大小，以及在响应式设计中，以便根据不同的视口大小和字体设置来自动调整元素的大小。

继承性

px单位的尺寸不受父元素字体大小的影响。它是绝对的，不会继承任何值。

rem单位的尺寸是相对的，会继承根元素的字体大小。这可以用于创建相对于根元素字体大小的布局。

em单位的尺寸是相对的，会继承父元素的字体大小。这可以用于创建相对于父元素字体大小的布局。

综上所述，在实际开发中，通常使用rem作为单位，因为它可以根据根元素字体大小的变化而自适应调整元素尺寸，适用于响应式布局。而px和em则适用于一些特定的场景，例如设置边框、阴影、字体大小等。

hoto by Charles Deluvio on Unsplash

介绍

我决定写这个博客的目的是希望探索更多有关使用CSS调整大小的方法。有这么多种可能性，很容易感到不知所措和困惑。浏览器当前支持16种度量单位：像素，英寸，皮卡，厘米，毫米，点，百分比，em，rem，视口尺寸（vw，vh），ex，ch，Vmax（最大视口）和vmin （viewportmin）在这16个单位中有两类：相对长度和绝对长度。

相对长度

首先要了解相对长度，它们会在其他物体上获得尺寸，这些尺寸在您要设定尺寸的元素之外或相对于它们，例如，父级的尺寸，字体大小和视口尺寸。

百分比

百分比基于其父元素。因此，如果一个元素为200px * 200px，并且该元素的子元素的宽度为50％，高度为50％，则该子元素的等效尺寸为100px * 100px，因为200px的50％为100px。

在这里，我们有一个名为" parent-box"的div元素和一个名为" child-box"的子div元素。

在css文件中，我将父盒的高度和宽度设置为200px，子盒的宽度和高度设置为50％，这意味着现在子盒将是父盒尺寸的50％，因此如果父框为200px * 200px，则表示子框为100px * 100px，结果如下：

如您所见，蓝色元素（即子元素）正好是粉红色框（即父元素）的50％。

视口尺寸

当前有四种类型的视口尺寸单位，vw（视口宽度），vh（视口高度），vmin（视口最小）和vmax（视口最大）。使用这些单位时要知道的第一件事是，它们会自动将浏览器的屏幕划分为100 x 100的不可见网格，网格中的每个正方形或单位将根据情况代表一个vw，vh，vmin或vmax。

vh 与 vw

因此，让我们更深入地研究这两个。如果我们声明一个元素的宽度为50vw且高度为50vh，我们将看到该元素将恰好占据页面高度的一半，并且占据页面宽度的一半，每个vw或vh现在相当于那个不可见的100 *中的一个单元 100，所以如果我们声明一个元素为50vw，它将是浏览器宽度的一半，下面我们来看一个示例。

在这里，我们看到父元素恰好是浏览器高度和宽度的一半。

vmin和vmax

这些单位比较棘手。因此，这些单元的工作方式是将使用高度或宽度的最大或最小长度。例如，让我们声明父框的宽度为50vmax，如果浏览器的宽度为800px，高度为500px，则父框的宽度为400px，因为宽度大于高度，所以元素将从浏览器的水平部分的不可见网格中获取50个单位，现在，如果高度为1000px，宽度为500px，则父框的宽度现在为500px，因为浏览器的高度现在大于宽度，因此父元素 box将占据浏览器垂直边100平方中的50平方，并使用它来声明父对象的框宽。

现在进入vmin。假设我们声明父级框的宽度为50vmin，那么从最小视口尺寸开始，父级框的宽度将占据50个网格单位。同样的示例，如果浏览器的宽度为800px，高度为500px，则父框的宽度现在将为250px，因为我们声明父框的宽度为最小视口尺寸的50个单位，在这种情况下，是高度。现在，如果高度为1000像素，宽度为600像素，则父框的宽度现在为300像素，我知道这非常令人困惑，因此让我们回到第一个示例：

Here we declare the width to be 50vmax (50 units out of 100 from the BIGGEST viewport dimension)

这样看起来像这样：

我们可以看到父框现在恰好是浏览器宽度长度的一半，这是因为浏览器的宽度大于高度。现在，如果我们改变一切，将会得到不同的结果。

Here we declare the width to be 50vmin (50 units out of 100 from the SMALLEST viewport dimension)

所以看起来像这样：

我们可以看到父框现在恰好是浏览器高度的一半，这是因为浏览器的高度小于宽度。

基于字体属性的单位

ex 和 ch

我从未使用过这些单元，但让我们看看它们是如何工作的。所以首先让我们从ex开始。这个单位测量您正在使用的任何字体系列的字母" X"的高度，这是指字母" X"的高度？因此，如果此" X"的高度为10px（字面的字母为" X"），则1ex将为10px，假设您使用的是另一个字体系列中的" X"，其中" X"的高度为9px，所以现在1ex 是9px。

ch的行为方式非常相似，不同之处在于1ch的长度将基于字体家族的字母" O"的宽度，因此，如果字母" O"的宽度为5px，则1ch将等于5px 。

em

此单位响应父元素的字体大小，因此，如果父元素的字体大小为10px，则每个em现在等于10 px。

在这里，我们在父框内声明一个10px字体大小，并将子元素的宽度和高度设置为5em，因此，如果父元素的字体大小为10px，则意味着每个em值10px，因此我们的子元素将为50px * 50像素

em的作用是它们级联，这意味着什么？因此，如果子元素内有另一个元素，并且将其尺寸设置为5em，则第二个子元素将为100px * 100px

发生这种情况的原因是，当一个孩子中有另一个元素时，第二个孩子会将值乘以2，疯狂吗？这就是为什么在使用em时我们必须小心。

rem

现在，rem与em有所不同，因为rem基于根字体大小而不是父字体来确定其尺寸。 rem一词的意思是" root em"，这解决了我们在em元素级联时遇到的问题，通过基于root取其维度，rem值在整个文件中都相同。因此，让我们看一下相同的示例，但带有rem。

因此，如果将本示例与上面的示例进行比较，我们可以看到父框的字体大小现在为30，但是第一个和第二个子控件的字体大小较小，我们还可以看到元素没有级联，是因为以10px的字体大小声明了根，所以无论何时我们现在使用rem，它都将始终引用10px。

绝对长度

绝对长度不会根据其他因素或页面，父级，视口等其他因素来决定其大小。

英寸，厘米和毫米。

因此，我觉得关于这些度量单位的解释很多。如果您将某物声明为1in，则无论屏幕大小如何，该值都将为1in。厘米和毫米也一样

Points和Picas

因此，points和picas是印刷术语。 point是1/72英寸，因此很小，12点活字就是12点或1/6英寸。

最后但并非最不重要…

像素！

现在，像素是绝对长度，但是它们的大小可能取决于您所使用的设备，某些设备的像素比其他设备大，这取决于它们的密度和分辨率。

(本文翻译自Sebastian Delima的文章《CSS: Units Of Measurement (px, em, rem, vw, %, etc.)》，参考：https://medium.com/swlh/css-units-of-measurement-px-em-rem-vw-etc-ed8522620775)

级元素与内联元素的概念与区别

在HTML中，大多数元素都被定义为块级元素或内联元素。

块级元素通常会独立成行，而内联元素会并排显示。

在我们学过的元素中，

块级元素如：<h> <p> <table>这些。

内联元素如<td><a><img>

下面我们通过练习来直观看看他们的区别。

块级元素展示，代码如下：

<body>
  <h1>第一个网页</h1><hr><h2>表格元素</h2><hr>
  <p>块级元素与内联元素</p>
  <p>零基础自学网页制作</p>
  <table border="1" width="50%">
  <thead>
  <tr>
  <td colspan="2">表格的头部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的脚部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格标题</caption>
  <colgroup>
  <col span="1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年龄</th>
  </tr>
  <tr>
  <td>
  <table border="1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body>

如图：

内联元素展示如下

示例代码：这段代码被我放在了</table>后面。

<a href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid=1838467&fr=aladdin">歼20战斗机</a>
<img src="img/战斗机/image3.jpg" width="200px"/>

效果如图：

其中，<img>标签中的width属性规定了图片的宽度为200px，也就是200像素。

HTML中，如果只对图片的宽或高进行数值指定，那么未指定的数值会随着指定数值进行等比例缩放！

熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。

<div>与<span>标签

为了方便开发者对页面内容进行布局和调整，html开发者为html加入了专门的区块元素<div></div>。

<div></div>是一个块级元素，大家可以把它理解为一个容器，它本身是不会显示在页面上的。

比如这个！

笔者第一个漫画作品

如果抛开画面内容，我们看到的是一堆对画面进行分割的方格子。像这样

<div></div>元素的作用就是对页面进行了这样的分割。

实际上我们的页面布局都是基于这样思路进行分割的，只是页面上不会像漫画一样显示外边框而已。例如：

强制为其添加边框分割：

大家看明白了吗？<div></div>就是用来对页面进行分割划区域的。

通过给<div>标签设置不同的id属性，可以在css文件中对不同<div>区块中的所有信息进行统一调整样式的操作。

这是对块级元素整体改变样式的方法。

但是，如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢？

html开发者为我们提供了<span></span>这样的内联标签。比如我们对<p>我有一个梦想</p>这个段落元素中的"梦想"两个字进行变化颜色的操作，我们可以这样写：

通过对<span>指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。

今天的内容结束了，下一次我们建立一个新的页面来简单看看<div>元素的基本用法。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

在线咨询

上一篇：javascript的DOM对象终极总结：你必看的j
下一篇：每天一个CSS小技巧-单侧投影

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商