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. 012 模块1-turtle库的使用

    目录 一.概述 二.turtle库基本介绍 2.1 turtle库概述 2.2 标准库 2.3 turtle的原(wan)理(fa) 2.4 turtle的魅力 三.turtle绘图窗体布局 3.1 ...

  2. 4.Sentinel源码分析— Sentinel是如何做到降级的？

    各位中秋节快乐啊,我觉得在这个月圆之夜有必要写一篇源码解析,以表示我内心的高兴~ Sentinel源码解析系列: 1.Sentinel源码分析-FlowRuleManager加载规则做了什么? 2. ...

  3. 小白专场-多项式乘法与加法运算-python语言实现

    目录 题意理解 解题思路 多项式加法 多项式乘法 完整代码 题意理解 题目: 设计函数分别求两个一元多项式的乘积与和. 输入格式: 输入分2行,每行分别先给出多项式非零项的个数,再以指数递降方式输入一 ...

  4. springboot logback日志的使用

    以下有两个使用,一个是简单使用,另一个是需要进行详细的配置再使用.首先给出源代码.可以直接使用 import org.slf4j.Logger;import org.slf4j.LoggerFacto ...

  5. MOOC 数据库系统笔记（一）：初步认识数据库系统

    概述 什么是数据库 数据库是电子化信息的集合 数据库起源于规范化"表(Table)"的处理. Table:以按行按列形式组织及展现的数据. E.F.Codd,基于对"表( ...

  6. Java 集合转换（数组、List、Set、Map相互转换）

    package com.example.test; import java.util.ArrayList; import java.util.Arrays; import java.util.Hash ...

  7. /bin/java: 没有那个文件或目录spark/bin/spark-class:行71: /usr/java/jdk1.8

    1.检查java环境有没有问题 2.1没问题后检查文件的编码是否有问题

  8. [Spark] 05 - Spark SQL

    关于Spark SQL,首先会想到一个问题:Apache Hive vs Apache Spark SQL – 13 Amazing Differences Hive has been known t ...

  9. 【linux】【elasticsearch】docker部署elasticsearch及elasticsearch-head

    前言 Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进.性能最好的.功能最全的搜索引擎库.但是,Lu ...

  10. MySQL命令窗口出现中文乱码的解决方法

    查询表语句的时候,出现了中文乱码,但是用Navicat for MySQL查看的时候却是正常的,字符集都是设置的utf-8,如下图所示:     其实上大学学习java的时候也遇到了中文乱码但是却没有 ...