em详解

     em可以理解成“倍”。

em会以父级元素中所设置的字体像素值为基准值进行成倍放大;

字体大小=(父级元素中的字体像素 * em的值)

例:

网页部分代码如下:

1.我现在没有在父级元素中设置任何字体像素值,而直接在<h2>标签中设置了字体大小为“3em”。

 

此时将使用浏览器的默认设置(一般为12px)作为基准像素

网页中显示如下

现在我在父级元素<body>中加上控制字体大小的像素值

设置为30px,然后再保存刷新下网页。

可以看到字体明显大了许多。

总结:当没有在父级元素中设置字体的像素值时使用em会以浏览器的默认值作为基数,如果在父元素中设置了字体的像素值,则会以父级元素的像素值作为基数

css中em单位详解,说明的更多相关文章

  1. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  2. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  3. Weka中EM算法详解

    private void EM_Init (Instances inst) throws Exception { int i, j, k; // 由于EM算法对初始值较敏感,故选择run k mean ...

  4. css中border-radius用法详解

    border-radius:由浮点数字和单位标识符组成的长度值.border-top-left-radius --- 左上border-top-right-radius --- 右上border-bo ...

  5. CSS中的BFC详解

    引言: 这篇文章是我对BFC的理解及总结,带你揭开BFC的面纱.你将会知道BFC是什么,形成BFC的条件,BFC的相关特性,以及他的实际应用. 一.何为BFC BFC(Block Formatting ...

  6. CSS中style用法详解

    转自:http://www.cnblogs.com/xingxingchongchong/p/6501575.html css样式表按其所在位置分三种: 1.内嵌样式表 2.内部样式表 3.外部样式表 ...

  7. css中border-sizing属性详解和应用

    box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有content-box.border-box和inherit三种取值.inherit指的是从父元素继承box-sizi ...

  8. CSS中em,px区别(转)

    这里向大家描述一下CSS中px和em的特点和区别,px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的,而em是相对长度单位,相对于当前对象内文本的字体尺寸,相信本文介绍一定会 ...

  9. css样式继承规则详解

    css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...

随机推荐

  1. mysql之innodb存储引擎---数据存储结构

    一.背景 1.1文件组织架构 首先看一下mysql数据系统涉及到的文件组织架构,如下图所示: msyql文件组织架构图 从图看出: 1.日志文件:slow.log(慢日志),error.log(错误日 ...

  2. ReentrantLock——可重入锁的实现原理

    一. 概述 本文首先介绍Lock接口.ReentrantLock的类层次结构以及锁功能模板类AbstractQueuedSynchronizer的简单原理,然后通过分析ReentrantLock的lo ...

  3. 对于synchronized的理解

    一.synchronized 同步关键字,分为同步代码块和同步函数 二.对synchronized的理解(未加static关键字)(以下所说:对同步方法和同步代码块均适用) 对象的创建是以类为模板的 ...

  4. 14个Linux系统安全小妙招,总有一招用的上!

    对于互联网IT从业人员来说,越来越多的工作会逐渐转移到Linux系统之上,这一点,无论是开发.运维.测试都应该是深有体会.曾有技术调查网站W3Techs于2018年11月就发布一个调查报告,报告显示L ...

  5. Find a way(两个BFS)

    Problem Description Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. L ...

  6. 即时聊天APP(四) - 联系人和会话

    联系人和会话界面使用的是RecyclerView进行滑动显示,并将好友列表存储至数据库,以供下次登录时使用,RecyclerView在后面我会详细介绍,这里略过. 联系人初始化时读取数据库并展示: / ...

  7. 使用gcc不同选项来编译查看中间生成文件

    gcc编译C程序的总体流程如下图 用到的命令如下: .c---> .i gcc -E hello.c .c--->.s gcc -S hello.c .c--->.o gcc -c ...

  8. 59 (OC)* atomic是否绝对安全

    场景:如今项目中有这样一个场景,在一个自定义类型的Property在一个线程中改变的同时也要同时在另一个线程中使用它,使我不得不将Property定义成atomic,但是由此发现atomic并不会保证 ...

  9. Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memory(0x00000000fa980000, 59244544, 0) failed; error='Cannot allocate memory' (errno=12)

    启动项目报错 Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memory(0x00000000fa980000, 592445 ...

  10. 高通电源管理qpnp-vm-bms驱动

    1. compatible节点: qpnp-vm-bms.c使用来控制电池曲线的和BMS功能的,其compatible节点是"qcom,qpnp-vm-bms" 2. probe函 ...