引用文档：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>

CSS中rem、em的区别的更多相关文章

  1. css中单位em和rem

    一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...

  2. css中的em 简单教程 -- 转

    先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...

  3. CSS中的EM属性之弹性布局

    这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...

  4. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  5. css中单位em和rem的区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  6. 简谈CSS 中的 em，rem，px，%

    在实际工作中,可能我们用的比较多的是‘%’ 和 px,但是我们也经常看到很多网站和css框架里用的是em 或rem.而‘%’ 和px已经都是比较常见或者说是常用.但是em 和rem 却鲜有使用,一直以 ...

  7. px,rem,em的区别

    PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  8. css中px em rem vw vh vmax vmin等单位的区别--转载

    px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...

  9. 深度解析CSS中的单位以及区别

    css中有几个不同的单位表示长度,使用时数字加单位.如果长度为0,则可以省略单位. 长度单位可分为两种类型:相对和绝对. 绝对长度 绝对长度单位是一个固定的值,反应真实的物理尺寸,不依赖于显示器.分辨 ...

随机推荐

  1. git功能速查

    http://gitbook.liuhui998.com/index.html git rebase:在本地变基.将本地所有的修改应用到另一个分支上 git merge:在本地合并分支 git bra ...

  2. c#使用itextsharp输出pdf(动态填充表单内容,显示中文)

    相关链接: iText的简单应用-字体 c#程序为PDF文件填写表单内容 示例代码: static void Main(string[] args) { BaseFont font = BaseFon ...

  3. java调用shell命令及脚本

    shell脚本在处理文本及管理操作系统时强大且简单,将shell脚本结合到应用程序中则是一种快速实现的不错途径本文介绍使用java代码调用并执行shell 我在 -/bin/ 目录下写了jbossLo ...

  4. html5--1.7超链接上

    html5--1.7超链接上 一.超链接的5种形式 <!DOCTYPE html> <html lang="en"> <head> <me ...

  5. html5--1.5 文本元素

    html5--1.5 文本元素 学习要点: 掌握常用的文本元素 文本元素,就是讲一段文本设置成相匹配的结构和含义 1.b元素: 我的作用就是 加粗文字: 2.br元素: 我的作用就是强制换行: 3.i ...

  6. tensorflow 实现逻辑回归——原以为TensorFlow不擅长做线性回归或者逻辑回归，原来是这么简单哇！

    实现的是预测 低 出生 体重 的 概率.尼克·麦克卢尔(Nick McClure). TensorFlow机器学习实战指南 (智能系统与技术丛书) (Kindle 位置 1060-1061). Kin ...

  7. Jmeter-聚合报告

    线程组右键--添加--监听器--聚合报告 Aggreagete Report:jmeter最常用的一个Listener,“聚合报告”. Label:每个jmeter的element(例如HTTP Re ...

  8. tf.stack和tf.unstack

    import tensorflow as tf a = tf.constant([1,2,3]) b = tf.constant([4,5,6]) c1 = tf.stack([a,b],axis=0 ...

  9. aoj 0118 Property Distribution

    タナカ氏が HW アールの果樹園を残して亡くなりました.果樹園は東西南北方向に H × W の区画に分けられ.区画ごとにリンゴ.カキ.ミカンが植えられています.タナカ氏はこんな遺言を残していました. ...

  10. bzoj 1049: 数字序列 dp

    题目大意: 给定一个长度为n的整数序列.在改变的数最小的和改变的幅度最小的前提下把它变成一个单调严格上升的序列.求改变的最小的数和这个幅度. 题解: (貌似以前考试考过这道题) 其实这道题就是两道题拼 ...