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. 慕课网jojo老师的Angular课程中遇到的问题

    @Input() private rating:number=0; 一直提示说“Input”不能识别,去网上查了才知道原来是没有导入包,于是把原有的 import { Component,OnInit ...

  2. Loadrunner 11 的安装

    安装包可以直接在我的百度网盘下载,这里用的是LR11的版本.电脑系统是win7 链接: https://pan.baidu.com/s/1OApfUemG3oVjLUE79qaikw 提取码: 7n3 ...

  3. 史上最全面的SignalR系列教程-目录汇总

    1.引言 最遗憾的不是把理想丢在路上,而是理想从未上路. 每一个将想法变成现实的人,都值得称赞和学习. 致正在奔跑的您! 2.SignalR介绍 SignalR实现服务器与客户端的实时通信 ,她是一个 ...

  4. ios打包时候提示三方文件库错误，整理下解决的思路

    这一短时间一直在打包APP上线,今天突然打包的时候碰到的头文件找不到 一开始我以为是路径的问题,检查了targets---Build settings----search Paths----heade ...

  5. Elastic-Job:动态添加任务,支持动态分片

    多情只有春庭月,犹为离人照落花. 概述 因项目中使用到定时任务,且服务部署多实例,因此需要解决定时任务重复执行的问题.即在同一时间点,每一个定时任务只在一个节点上执行.常见的开源方案,如 elasti ...

  6. MySQL索引&&开发规范

    规范总结 索引规范 默认添加的索引都是BTree索引.Innodb只支持BTree索引. 设计索引原则 - 最适合索引的列是WHERE子句中的列,而不是SELECT中的列. - 如果索引的字段很长,使 ...

  7. [Pandas] 06 - Data Preprocessing and Cleaning

    From: DBWangGroup 基于该系列代码的实践与补充思考. 补充:特征工程 结合:[Scikit-learn] 4.3. Preprocessing data /* implement */

  8. [Leetcode][动态规划] 零钱兑换

    一.题目描述 给定不同面额的硬币 coins 和一个总金额 amount.编写一个函数来计算可以凑成总金额所需的最少的硬币个数.如果没有任何一种硬币组合能组成总金额,返回 -1. 示例 1: 输入: ...

  9. 文章导航-readme

    Spring-Boot Spring Boot(一) Hello World Redis 图解Redis之数据结构篇--简单动态字符串SDS 图解Redis之数据结构篇--链表 图解Redis之数据结 ...

  10. 将Jexus+mono和网站一起通过Dockerfile打包到docker镜像

    上次使用别人打包好的docker镜像,往里边加入文件,最终asp.net的docker容器化运行. 这次决定直接全新打包一个jexus+asp.net网站的docker包. 进入root目录,并在ro ...