使用相对单位em注意点

1.浏览器默认字体是16px,即1em = 16px,根元素设置如下

html{

    font-size: 100%; /* WinIE text resize correction */

}

body{

    font-size: 1em;

}

2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

3、这一种千万要慢慢理解，不然很容易与第二点混了。如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算，也就是下面的：

元素自身的font-size/继承父元素字体大小  = em值  （字体大小计算）

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

那么元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：

1 ÷ 元素自身的font-size × 需要转换的像素值 = em值

请点击，综合以上构建一个740px像素的弹性布局样例

<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Elastic Layout Example — Jon Tan 陳</title>

	<style type="text/css" media="screen">

		/*

		CSS from the article at: http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

		License: Attribution-Share Alike 2.0 UK: England & Wales

		http://creativecommons.org/licenses/by-sa/2.0/uk/

		N.B. CSS is included here for easy reference only. Always separate content and presentation by using separate CSS files, rather than inserting it in the document head.

		*/

		html{

		  font-size: 100%; /* WinIE text resize correction */

		} 

		body{

			font-size: 1em;

			font-family: georgia, serif;

			text-align: center;

			color: #444;

			background: #e6e6e6;

			padding: 0;

			margin: 0;

		}

		#wrap{

			width: 46.25em;

			margin: 1.5em auto;

			background: #fff;

			border: 0.063em solid #ccc;

			text-align: left;

		}

		h1{

			font-size: 1.125em;

			line-height: 1em;

			margin: 1em;

			font-weight: 300;

		}

		p{

			font-size: 0.750em;

			line-height: 1.5em;

			margin: 1.5em;

		}

		p img{

			width:7.5em;

			height:7.5em;

			margin:0 1.5em 1.5em 0;

			float:left;

		}

	</style>

</head>

<body>

	<div id="wrap">

		<h1>Elastic Layout Example—View Source for the HTML and CSS</h1>

		<p><img src="90-elastic-img.jpg" alt="Clevedon Pier"> Example from the article “<a href="http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css">The Incredible Em & Elastic Layouts with CSS</a>”. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	</div>

</body>

</html>

【资料参考】

转大漠  http://www.w3cplus.com/css/px-to-em

http://v1.jontangerine.com/silo/css/elastic-layout/

http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css  英文源文

CSS中强悍的相对单位之em(em-and-elastic-layouts)学习小记的更多相关文章

  1. CSS中常用的字体单位：px、em、rem和%的区别

    在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...

  2. CSS中表示大小的单位

    以下是DIVCSS5为大家总结网页中常见html单位介绍,在css+div布局中长度单位介绍篇. 其实css中的长度单位一共有8个,分别是px,em,pt,ex,pc,in,mm,cm: px:像素( ...

  3. 详解CSS中的几种长度px、em、pt

    说说css的几种距离吧,大致有px.em.pt.pc.in.mm.cm.ex八种,其中最常见到的是px,我还见到过的有ex和mm.cm,当然后两个在当年见的更多. 其实px,我们最熟悉,而在电脑上也应 ...

  4. HTML与CSS中的颜色与单位个人分享

    颜色与单位 Web安全色有216中其中色彩有210中,非色彩6中 前景色与背景色 前景色就是设置字体的颜色 背景色就是为指定元素设置背景色 - 浏览器默认背景色的颜色为透明色 颜色的命名 1.使用单词 ...

  5. CSS中vw和vh单位的使用

    vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%: vh——viewpoint height,视窗高度,1vh等于视窗高度的1%:例子:http://tutorialzine ...

  6. 有关CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  7. CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  8. 为什么CSS中的calc函数可能会不生效？

    前言 在早期如果想要对某一些样式进行动态计算,绝大多数的做法都是使用JavaScript来进行,当时的CSS在面对这种场景显得有点无能为力.但是,当CSS3中新增了calc函数时,面对这种场景,Jav ...

  9. css中单位px、pt、em和rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...

随机推荐

  1. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. Atitit 项目语言的选择 java c#.net  php??

    Atitit 项目语言的选择 java c#.net  php?? 1.1. 编程语言与技术,应该使用开放式的目前流行的语言趋势1 1.2. 从个人职业生涯考虑,java优先1 1.3. 从项目实际来 ...

  3. iOS二维码生成、识别、扫描等

    二维码扫描 前言: 最近的项目中使用到了二维码,二维码这个模块功能也完成:觉得还是有必要总结一下用来做记录.好长时间没有写二维码了都忘记在差不多了,重新拾起来还是挻快的. 二维码使用场景: 生活中有很 ...

  4. Mysql事务探索及其在Django中的实践（一）

    前言 很早就有想开始写博客的想法,一方面是对自己近期所学知识的一些总结.沉淀,方便以后对过去的知识进行梳理.追溯,一方面也希望能通过博客来认识更多相同技术圈的朋友.所幸近期通过了博客园的申请,那么今天 ...

  5. angular2系列教程（六）两种pipe：函数式编程与面向对象编程

    今天,我们要讲的是angualr2的pipe这个知识点. 例子

  6. 嵌入式&iOS：回调函数（C）与block（OC）传 参/函数 对比

    C的回调函数: callBack.h 1).声明一个doSomeThingCount函数,参数为一个(无返回值,1个int参数的)函数. void DSTCount(void(*CallBack)(i ...

  7. iOS从零开始学习直播之2.采集

      直播的采集由采集的设备(摄像头.话筒)不同分为视频采集和音频采集,本篇文章会分别介绍. 1.采集步骤   1.创建捕捉会话(AVCaptureSession),iOS调用相机和话筒之前都需要创建捕 ...

  8. SQL Server存储过程

    创建于2016-12-24 16:12:19 存储过程 概念: 1.存储过程是在数据库管理系统中保存的.预先编译的.能实现某种功能的SQL程序,它是数据库应用中运用比较广泛的 一种数据对象. 2.存储 ...

  9. 二叉树的递归实现(java)

    这里演示的二叉树为3层. 递归实现,先构造出一个root节点,先判断左子节点是否为空,为空则构造左子节点,否则进入下一步判断右子节点是否为空,为空则构造右子节点. 利用层数控制迭代次数. 依次递归第二 ...

  10. 【repost】JS错误类型的学习

    SyntaxError是解析代码时发生的语法错误 // 变量名错误  var 1a;  // 缺少括号  console.log 'hello'); (2)ReferenceError Referen ...