CSS中rem、em的区别

最新推荐文章于 2023-06-02 22:41:45 发布
最新推荐文章于 2023-06-02 22:41:45 发布
阅读量91 收藏
点赞数
原文链接：http://www.cnblogs.com/bllx/p/8576274.html
版权

引用文档：http://www.divcss5.com/html/h529.shtml；http://blog.csdn.net/qq_35432904/article/details/51804227

前几天面试了一个最基本的问题，现在复习一下它的原理

CSS中的长度单位有8个，px,em,rem,pt,ex,pc,in,mm,cm;

px--像素，相对于设备的长度，像素是相对于显示器的屏幕分辨率而言的。

em--相对长度单位，是相对于其父元素的文本的字体尺寸。如果父级元素未设置字体大小，则相对于浏览器的默认字体

ex--相对长度单位。相对于字符‘x’的高度。

pt--点（point），绝对长度单位

pc--派卡（pica）,绝对长队单位

in--英寸（inch),绝对长度单位

mm--毫米，绝对长度单位

cm--厘米，绝对长度单位

1in = 2.54cm = 25.4 mm = 72pt = 6pc ；

这些绝对单位在项目中很少用，常用的是相对单位：px,em,rem

一、rem的特点

1、rem的大小是根据html根目录下的字体大小进行计算的

2、当我们改变根目录下的字体大小时，下面的字体都会随之改变

3、rem不仅可设置字体的大小，也可设置元素的宽高，内外间距等

二、em的特点

em的字体大小是根据其父元素的大小设置的

三、示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css中rem与em的区别</title>
    <style>
        html,body{
        /*设置了html的字体大小*/
            font-size: 100px;

        }
        .container{
            width:3rem;
            height:3rem;
            background-color: #dddddd;
        }
        .boxConter{
            width:1.5rem;
            height:1.5rem;
            background-color: aqua;
        }
        .item{
            width:0.5rem;
            height:0.5rem;
            background-color: red;
        }
        .emContainer{
            width:5rem;
            height:5rem;
            background-color: blueviolet;
            font-size: 50px;

        }
        .emBoxConter{
            width:1.5em;
            height:1.5em;
            background-color: blue;
            font-size: 80px;
        }
        .emItem{
            width:0.5em;
            height:0.5em;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
  <!--rem的代码-->
   <div class="container">
       <div class="boxConter">
           <div class="item"></div>
       </div>
   </div>
   <hr>
   <hr>
   <!--em的代码-->
   <div class="emContainer">
       <div class="emBoxConter">
           <div class="emItem"></div>
       </div>
   </div>
   <hr>
   <hr>
   <hr>
</body>
</html>

 

转载于:https://www.cnblogs.com/bllx/p/8576274.html

ailong3046
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css中em和rem的区别
xxxx_1104的博客
03-01 4183
一：区别 （1）em：em是一种相对长度单位，相对于自身元素的字号大小，如果没有设置就参照父容器的字号大小或浏览器默认字号大小。 举例：给父容器设置font-size:16px ，在给父容器设置宽度为10em，最后在浏览器中呈现出来的效果如下，换算为像素就是160px <!DOCTYPE html> <html lang="en"> <head> &l...
CSS中px em rem区别与使用
12-09
在CSS布局和样式设计中，字体大小的设置是非常关键的一部分，通常我们会使用px、em或rem作为单位。这些单位各有特点，适用于不同的场景。下面将详细介绍它们的区别以及使用策略。 首先，px（像素）是最常见的长度...
css中单位em和rem的区别
weixin_30952103的博客
06-10 156
在css中单位长度用的最多的是px、em、rem，这三个的区别是： 　　px是固定的像素，一旦设置了就无法因为适应页面大小而改变。 　　em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。 rem中的r意思是root（根源），这也就不难理解了。 em 子元...
css中单位px和em,rem的区别
青天诀的专栏
05-26 1184
国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？PX特点 1. IE无法调整那些使用px作为单位的字体大小； 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 **px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分
css中的rem跟em的区别
yuzheh521的博客
07-02 222
em是相对于父元素的字体大小来说：页面效果 rem是相对于html元素的字体大小来说：
css中em和rem是什么，有什么区别？
HXR1984的博客
04-16 3892
文章目录前言一、em是什么？二、rem是什么？三、em和rem的区别 前言 在我们学习css的时候会遇到三种常见的长度单位：px、em、rem。px是像素，相信大家并不陌生，那em和rem又是什么，如何来区别呢？以下内容仅供参考，不作为专业讲解。 一、em是什么？ em是相对长度单位，其值并不固定，一般会继承父级元素的字体大小。任意浏览器的默认字体高都是16px，所有未经调整的浏览器都符合： 1em=16px。但如果父级设置了其他字体高度，那此时的1em就等于父级设置好的字体高度。 二、rem是什么？
css单位中px、em、rem的区别
yzwlogo的博客
06-02 300
区别：IE无法调整那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的知识HTML根元素。这个单位可谓集相对大小和绝对大小优点于一身，通过他即可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应，目前，处了IE8及更早的版本外，所有浏览器都已经支持。px是相对于显示器屏幕的分辨率来的，是一个虚拟的长度大单位，是计算机系统的数字化图像的长度单位。3、rem是css3新增的一个相对单位，使用rem为元素设定字体大小时，仍然时相对大小，但相对的只是HTML跟元素。
css中px、em和rem的区别总结
01-21
em 和 rem 都是灵活可扩展的单位，由浏览器转换为像素值，取决于设计中的字体大小，如果使用值 1em 或 1rem ，它可以被浏览器转换为从 16px 到 160px 或其他任意值。浏览器使用 1px ，那么 1px 始终显示为完全 1px。...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
css中单位em和rem之间的区别
qq_39364586的博客
06-28 426
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。 在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。 em是自适应当前使用字体大小的，1em等于当前字体大小，2em等于两倍字体大小（font-size） 1.子元素字体大小的em是相对于父元素字体大小 2.元素的width/height/padding/margin用em的话是相对于该元素的font...
em和rem的区别
kiligcoding的博客
04-24 1665
与em不同，rem是一个根据根元素（即html元素）字体大小而定的单位。这意味着当使用rem作为单位时，它的值不会受到层次结构中任何其他元素的影响。在 CSS 中，可以使用em来指定元素的字体大小、行高以及其他尺寸属性。例如，如果父元素的字体大小为16像素，而子元素的字体大小为1.5em，则子元素的字体大小将为24像素（1.5乘以16）。em是一种相对长度单位，它基于父元素的字体大小而定。em的值表示当前元素的字体大小的倍数。例如，在以下代码中，html元素的字体大小为16像素，因此1rem等于16像素。
CSS字体单位em和rem的区别
LaoYe的博客
04-25 1256
       css为我们提供了非常多的尺寸单位，字体经常使用的单位包括以下几种：        单位那么多我们如何根据我们的需求选择对应字体单位？我们经常接触的就是单位px，因为它简洁明了，人们可以直接读取它的数值，所以备受人们的青睐。        随着智能设备出现，我们常常需要在不同设备之间进行切换。但移动设备屏幕分辨率相对小于传统计算机显示器，根据px的特性可能会出现布局问题。...
pillow-10.4.0-pp39-pypy39_pp73-macosx_11_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
avif-0.5.0-cp35-cp35m-macosx_10_9_x86_64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
pillow-10.4.0-cp39-cp39-musllinux_1_2_x86_64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
1250KVA本体基础图11
最新发布
07-27
1250KVA本体基础图11
毕业设计之网上订餐系统.zip
07-27
毕业设计之网上订餐系统.zip
pillow-10.4.0-cp39-cp39-win32.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
css单位中px和em、rem
07-12
在CSS中，有几种常见的单位用于指定尺寸和距离。其中包括像素（px）、em和rem。下面是它们的解释： 1. 像素（px）：像素是最常用的单位，它指定了元素在屏幕上的精确尺寸。1px 等于屏幕上的一个物理像素。 例如：font-size: 16px; width: 200px; 2. em：em 是相对于元素的字体大小计算的单位。如果应用在一个元素上，它将基于该元素的字体大小来计算自身的尺寸。 例如：font-size: 1.2em; 表示字体大小是父元素字体大小的1.2倍。 3. rem：rem 和 em 类似，但是它是相对于根元素（即html元素）的字体大小计算的单位。rem 的好处在于，它不会受到嵌套元素字体大小的影响，更方便一致地控制整个页面的布局。 例如：font-size: 1.5rem; 表示字体大小是根元素字体大小的1.5倍。 总结一下： - px 是固定单位，适合需要精确控制尺寸的场景。 - em 是相对于父元素字体大小计算的单位，适合需要相对尺寸的场景。 - rem 是相对于根元素字体大小计算的单位，适合需要一致布局的场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值