css em
em与px换算
任意浏览器的默认字体高度16px(16像素)。所有未经调整的浏览器都符合: 1em=16px。
那么,
12px=0.75em,
10px=0.625em。
为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,
这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
em单位有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
我们在写CSS的时候如果要用em为单位,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有其他的解释。
css em的更多相关文章
- css em单位
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/41 为什么要有em 为了弹性布局.更准确的说是界面元素根据浏览器 ...
- jQuery mobile 前台设计中的css em的使用。
先贴个网址:http://www.uml.org.cn/html/201207311.asp 大家可以参考一下面这张转换表(body字体为16px时的值) 总结 长篇介绍了一大堆,唯一想告诉大家的是以 ...
- CSS—— em的详解
字体大小在浏览器的默认样式表中有规定.一般采用em为单位,也就是相对单位,1em=16像素. 同时,像P h1等等标签都采用浏览器默认的em单位,P为1em,h1为2em等等. 两条重要的规则: 1. ...
- CSS学习笔记——视觉格式化模型 visual formatting model
CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...
- 《深入理解bootstrap》读书笔记:第三章 CSS布局
一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...
- CSS中的视觉格式化模型
视觉格式化模型 1. 简介 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树 ...
- css后代选择器
后代选择器: <p><em>CSS</em>层叠样式</p> 使用后代选择器设置,之间用空格隔开: p em{font-size:40px;} 例子: ...
- CSS选择器的优先级及权重问题【CSS核心问题】及其它属性
1.CSS选择器优先级: !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器 注意:[初级工程师水平] 2. ...
- WEB入门 四 CSS样式表深入
学习内容 Ø CSS选择器深入学习 Ø CSS继承 Ø CSS文本效果 Ø CSS图片效果 能力目标 Ø 掌握CSS选择器的组合声 ...
随机推荐
- House Robber & House Robber II
You are a professional robber planning to rob houses along a street. Each house has a certain amount ...
- struts2中使用json插件实现ajax交互
json插件可以简单的实现ajax交互,避免了使用struts2-dojo-plugin.jar包时带来的struts2.x版本冲突问题.并且减少了使用ajax标签时需要的繁琐的配置包括web.xml ...
- [[转]CSS浮动原理
CSS Float是网页设计最强大的灵活性功能之一.本文介绍CSS Float的基本原理和行为特征,并介绍各种浏器Float特性的Bugs. 内容 基本的浮动原理 浮动是如何进行的 浮动从何处开始 水 ...
- 正确的注销PHP SESSION
/* 1.每个页面都必须开启session_start()后才能在每个页面里面使用session. 2.session_start()初始化session,第一次访问会生成一个唯一会话ID保存在客户端 ...
- verilog中阻塞复制,非阻塞复制,顺序块,并行块之间的关系
这几个概念是不一样的 顺序块:顺序块中的语句是按顺序执行的,每条语句中的延迟值是与其前一条语句执行的仿真时间有关. 并行块:并行块语句是并行执行的,它里面的每条语句中指定的延迟值都是相对于语句块开始执 ...
- Unicode字符列表
注:除非有特别指明,否则以下符号皆属“半角”而非“全角”. 代码 显示 描述 U+0020 空格 U+0021 ! 叹号 U+0022 " 双引号 U+0023 # 井号 U+0024 $ ...
- JPEG图像密写研究(一) JPEG图像文件结构
[转载]转载自http://www.cnblogs.com/leaven/archive/2010/04/06/1705846.html JPEG压缩编码算法的主要计算步骤如下: (0) 8*8分块. ...
- Xampp Linux应用
一.基本操作: 1.Xampp安装包下载: https://www.apachefriends.org/index.html 2.安装与配置: 将xampp-linux-x64-5.6.3 ...
- Oracle EBS-SQL (SYS-4):sys_职责查询.sql
select t.RESPONSIBILITY_NAME from apps.FND_RESPONSIBILITY_VL t where t.RESPONSIBILITY_NAME like '%MR ...
- 内核级HOOK的几种实现与应用
实现内核级 HOOK 对于拦截.分析.跟踪系统内核起着致关重要的作用.实现的方法不同意味着应用侧重点的不同.如想要拦截 NATIVE API 那么可能常用的就是 HOOK SERVICE TABLE ...