css中的em 简单教程 -- 转

先附上原作的地址: https://www.w3cplus.com/css/px-to-em

习惯性的复制一遍~~~~

-------------------------------我是分界线-----------------------------------

什么是弹性布局?

用户的文字大小与弹性布局

用户的浏览器默认渲染的文字大小是“16px”,换句话说,Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。当然,如果用户愿意他可以改变这种字体大小的设置,用户可以通过UI控件来改变浏览器默认的字体大小。

弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小,我们可以这样来设置1em,0.5em,1.5em等,而且“em”还可以指定到小数点后三位,比如“1.365em”。而其中“相对”的意思是:

  1. 相对的计算必然会一个参考物,那么这里相对所指的是相对于元素父元素的font-size。比如说:如果在一个<div>设置字体大小为“16px”,此时这个<div>的后代元素教程了是将继承他的字体大小,除非重新在其后代元素中进行过显示的设置。此时,如果你将其子元素的字体大小设置为“0.75em”,那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”;
  2. 如果用户通过浏览器的UI控件改变了文字的大小,那么我们整个页面也会进行放大(或缩小),不至于用户改变了浏览器的字体后会致使整个页面崩溃(我想这种现像大家都有碰到过,不信你就试试你自己制作过的项目,你会觉得很恐怖)。

大家可以查看这个Simplebites,并改变文字的大小去浏览。

体验后,是不是觉得弹性布局的页面很灵活呀,而且也像“px”一样的精确。因此,只要我们掌握了“font-size”、“px”和“em”之间的基本关系,我们就可以民以食快速使用CSS创建精确的布局。

CSS的Elastigirl引进EM

Elastigirl的“em”是极其强大和灵活的,他不管字体大小是什么,是12px,16或60,他都可以计算出其值。

em其实就是一种排版的测试单位,而且他的由来还有一段小故事,关于这段小故事我就不和大家说了,因为大家都不是来听我讲故事的,我想大还是喜欢知道他在CSS中的那些事。

在CSS中,“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间,而和它所占据的水平空间没有任何的关系,因此:

如果字体大小是16px,那么1em=16px

入门

在我们开始来了解CSS中的这个“em”之前,我们需要知道在浏览器下,他的默认字体大小。正好我们前面也这样做了,在所有现代浏览器中,其默认的字体大小就是“16px”。因此在浏览器下默认的设置将是:

1em = 16px

因此,在一个CSS选择器被写入时,浏览器就有了一个“16px”大小的默认字体。此时我们Web页面中的<body>就继承了这个“font-size:16px;”,除非你在CSS样式中显式的设置<body>的“font-size”值,来改变其继承的值。这样一来,“1em = 16px”、“0.5em = 8px”、“10em = 160px”等等,那么我们也可以使用“em”来指定任何元素的大小。

设置Body的font-size

很多前辈在多年的实践中得出一个经验,他们建议我们在<body>中设置一个正文文本所需的字体大小,或者设置为“10px”,相当于(“0.625em或62.5%”),这样为了方便其子元素计算。这两种都是可取的。但是我们都知道,<body>的默认字体是“16px”,同时我们也很清楚了,我们改变了他的默认值,要让弹性布局不被打破,就需要重新进行计算,重新进行调整。所以完美的设置是:

			body {font-size:1em;} 

可是在那个没人爱的IE底下,“em”会有一个问题存在。调整字体大小的时候,同样会打破我们的弹性布局,不过还好,有一个方法可以解决:

			html {font-size: 100%;} 

公式转换——PXtoEM

如果你是第一创建弹性布局的,最好在身边准备一个计算器,因为我们一开始少不了很多的计算,有了他放心。

像素对于我们来说太密切了,因此我们也将从这开始。首先需要计算出1px和em之间的比例,然后是知道我们需要的px值。通过前面的介绍,大家都知道1em总是等于父元素的字体大小,因此我们完全可以通过下面的工式来计算:

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

大家可以参考一下面这张转换表(body字体为16px时的值)

接下来我们一起看一个很简单的实例“使用CSS的EM制作一个960px宽度的弹性布局

HTML Markup

			<body><div id="container"> …</div> </body> 

将960px转换为em

1 ÷ 16px × 960px = 60em

这个计算值的前提条件是<body>的“font-size:16px”。

CSS Code

			html {font-size: 100%; } body { font-size: 1em; } #container { width: 60em; } 

通过上面的实例,我想大家更能形像化的理解了,因为有例可询,其实我们可以把上面的计算公式转换一下,将更方便你的计算:

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

那么我们上面的实例“960px”就可以这样来转换成“em”值

960px ÷ 16px = 60em

上面我们一起见证了“px”转换成“em”的计算方式,接下来我们一起来动看制作上面展示过的弹性布局样例。下面我们主要一起来一步一步的实现他。

构建一个弹性的容器

要创建弹性布局样例那样的居中效果,我们首先需要创建一个HTML结构,我在此给创建一个<div>并且取名叫“wrap”

			<body><div id="wrap"> content here</div> </body> 

我们希望这个容器是一个“740px”宽,适合一个“800px × 600px”显屏的实例。那么“740px”会等于多少“em”呢?这就是我们需要关心的问题,大家一起来看吧:

1、将“740px”转换成“em”设置到我们的容器“div#wrap”:我们都知道“div#wrap”的父元素<body>设置了字体为“16px”,那么此时在没有进行另外显示的设置时,他的子元素<div id="wrap">将继承“font-size”值,这样我们就可以轻意得到:“1px和1em之间的关系”

1em = 16px 也就是 1px = 1 ÷ 16 = 0.0625em

这样一来,我们的“740px”就很容易的能转换成“em”

0.0625em × 740 = 46.25em

当然大家也可以按照我们前面所列出的计算公式来进行转换,这样你心中更具有一个概念性,也不容易弄错:

1 ÷ 16 × 740 = 46.25em (1 ÷ 父元素的font-size × 需要转换的像素值 = em值)

这样一来,您可以使用上面的公式计算出您需要的任何宽度或高度的“em”值,你只需要知道“1px等于多少em”,另外就是你要转换的“px”值是多少,具备这几个参数你就能得到你想要的“em”值了。

2、创建CSS样式:现在我们可以给“div#wrap”写样式了,弹性布局样例很明显的告诉我们,给“div#wrap”设置了一个宽度为“740px”居中,带有上下“margin”为“24px”,而且带有“1px”的边框效果,那么我们首先根据上面的公式计算出相应的“em值”,然后在写到CSS样式中:

			html {font-size: 100%;} body {font-size: 1em;} #wrap { width: 46.25em;/*740px ÷ 16 = 46.25em */ margin: 1.5em auto;/*24px ÷ 16 = 1.5em*/ border: 0.0625em solid #ccc;/*1px ÷ 16 = 0.0625em*/ } 

现在我们就轻松的创建了一个包含内容的弹性容器:弹性布局样例。

文本样式与em

首先我们在前面那个创建的<div id="wrap"></div>中插入一个<h1>和一个<p>:

			<div id="wrap"><h1>...</h1> <p>...</p> </div> 

在弹性布局样例实例中,我们标题使用了“18px”,而段落设置的是“12px”字体,同时其行高是“18px”。18px将是我们实现弹性布局的一个重要值,可以使用他们都按正比变化。(有关于标题和段落的排版介绍,大家感兴趣可以点击Richard Rutter的basic leading和vertical rhythm以及chapter on vertical motion的相关介绍)。

根据CSS继承一说,我们在“div#wrap”的内容容器中没有显式的设置字体大小,这样整个“div#wrap”将继承了其父元素“body”的字体——“16px”。

1、给段落设置样式:——“12px”的字体,“18px”的行高以及margin值

从CSS继承中,我们可以得知我们所有段落继承了其父元素“div#wrap”的“font-size:16px”。同时我们通过前面的介绍得知1px = 1 ÷ 16 = 0.0625em,这样一来我们就很轻松的知道“12px”等于多少个“em”

0.0625em × 12 = 0.750em

这样我们就可以给段落p设置样式:

			p {font-size: 0.75em;/*0.0625em × 12 = 0.750em */} 

要计算出段落所需的行高和“margin”为“18px”,来满足Richard Rutter说的basic leading,那我们就需要像下面的方法和来计算:

18 ÷ 12 = 1.5em

使用所需的行高值“18px”直接除以“字体大小12px”,这样就得到了段落“p”的“line-height”值。在本例中行高就等于字体的“1.5”倍,接着我们把“line-height”和“margin”样式加到段落“p”中

			p{font-size: 0.75em;/*0.625em × 12 = 0.750em */ line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */ margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */ } 

2、给标题设置一个18px的字号

标题“h1”和段落“p”一样的原理,他也是继承他父元素“div#wrap”的“16px”的“font-size”,所以我们也是按同样的方法可以计处出他的“em”

0.0625em × 18 = 1.125em

我们可以把得出的值写到CSS样式表中

			h1 {font-size: 1.125em;/*0.625em × 18 = 1.125em*/ } 

同样为了保留Richard Rutter所说的vertical rhythm,我们同样将标题“h1”的“line-height”和“margin”都设置为“18px”,使用方法前面介绍的方法。很容易得到他们的“em”值为“1em”:

			h1 {font-size: 1.125em; /*0.625em × 18 = 1.125em*/ line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */ margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */ } 

设置图片大小——使用em

要做出弹性布局样例这样的果,我们也需要在html中插入一张图片:

			<body><div id="wrap"> <h1>....</h1> <p><img src="90.png" alt="" /> Lorem...</p> </div> </body> 

我们这张图片具有“90px”的宽和高,同时具有一个右边距和底边距为“18px”设置,而且还进行左浮动。下面我们就一起来看其如何实现图片这几个样式效果:

从HTML结构中,我们很清楚的知道,图片是段落“p”的子元素,通过前面的介绍,你们知道这个段落“p”的“font-size”值被得定义为“12px”,因此我们计算图片的属性值时,不能在按“1px = 0.0625em”或者“1em=16px”来计算,我们需要使用最老的公式计算:

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

这样一来,按上面所示的公式,我们就可以计算出图片的大小:

1 ÷ 12 × 90 = 7.5em

现在你就可以将计算出来的值写到样式中去:

			p img {width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的宽度) = 7.5em */ height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的高度) = 7.5em */ } 

我们在段落中知道了“18px”刚好是“1em”,现在我们也把他使用到图片的样式中:

			p img {width: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的宽度) = 7.5em */ height: 7.5em; /*1 ÷12( 父元素的font-size) × 90px(图片的高度) = 7.5em */ margin: 0 1.5em 1.5em 0; float: left; } 

这样我们就制作出一个和弹性布局样例一样的效果。希望通过这样的一个实例能帮助大家了解如何使用“em”来创建一个弹性布局的方法。当然大家可能还在担心使用“em”来制作一个弹性布局,不能像“px”一样的的精确,如果你真正理解了这篇教程后,我想你不会在有这样的想法。

弹性布局的公式总结

最后我想大家肯定和我会有同一种想法,就是相关参数是的“px”值如何成功而且正确的转换成“em”值,经过上面的学习,我最后将公式总结一下:

元素自身没有设置字号大小时,元素的width、height、line-height、margin、padding、border等值转换都按下面公式转换:

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

我们来看一个实例:

			<body><div id="wrapper">test</div> </body> 

我们在body默认字体大小为“16px”,此时需要“div#wrapper”的相关参数值为:

			#wrapper {width: 200px; height: 100px; border: 5px solid red; margin: 15px; padding: 10px; line-height: 18px; } 

那么我们按照上面的公式,将所在参数进行转换:

			#wrapper {width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/ height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/ border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/ margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/ padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/ line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/ } 

我们一起来看计算出来的值:

接下来我需要大家在来看一个效果,这一点很关键哟,仔细看好,在同样的参数基础上稍加一条元素本身设置字体大小为:14px;,大家可以会说很简单的呀,按前面的公式计算出来加上就是了,那么我现在就按大家说的计算加上:

			#wrapper {font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/ width: 12.5em;/*1 ÷ 16 × 200 = 12.5em值*/ height: 6.25em;/*1 ÷ 16 × 100 = 6.25em值*/ border: 0.3125em solid red;/*1 ÷ 16 × 5 = 0.3125em值*/ margin: 0.9375em;/*1 ÷ 16 × 15 = 0.9375em值*/ padding: 0.625em;/*1 ÷ 16 × 10 = 0.625em值*/ line-height: 1.125em;/*1 ÷ 16 × 18 = 1.125em值*/ } 

此进我们在firebug下看计算出来的layout值

为了更好的说明问题,我把元素自身没有设置字体大小和元素自身设置了字体大小,两者在firebug计算出来值:

我截这个图的主要意图是,说明一个问题就是元素自身要是设置了字体大小后,其计算公式就不在是前面所说的,我们需要做一下修改:

1、字体计算公式依旧

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

2、其它属性的计算公式需要换成

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

那么我们现在来计算一回:

			#wrapper {font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/ width: 14.2857em;/*1 ÷ 14 × 200 = 14.2857em值*/ height: 7.1429em;/*1 ÷ 14 × 100 = 7.1429em值*/ border: 0.357em solid red;/*1 ÷ 14 × 5 = 0.357em值*/ margin: 1.071em;/*1 ÷ 14 × 15 = 1.071em值*/ padding: 0.714em;/*1 ÷ 14 × 10 = 0.714em值*/ line-height: 1.2857em;/*1 ÷ 14 × 18 = 1.2857em值*/ } 

我们在来看一次计算出来的值:

总结

长篇介绍了一大堆,唯一想告诉大家的是以下几点

1、浏览器的默认字体大小是16px

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

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

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

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

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

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



转载于:https://www.cnblogs.com/WoAiZmm/p/7868102.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/399298.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASP.NET MVC下的四种验证编程方式[续篇]

ASP.NET MVC下的四种验证编程方式[续篇] 原文:ASP.NET MVC下的四种验证编程方式[续篇]在《ASP.NET MVC下的四种验证编程方式》一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式&#xff08;“手工验证”、“标注ValidationAttribute特性”、“让数据类型实现IValida…

axios 配置loading_用Axios Element 实现全局的请求 loading

Kapture 2018-06-07 at 14.57.40.gif背景业务需求是这样子的&#xff0c;每当发请求到后端时就触发一个全屏的 loading&#xff0c;多个请求合并为一次 loading。现在项目中用的是 vue 、axios、element等&#xff0c;所以文章主要是讲如果使用 axios 和 element 实现这个功能。…

请求的内容似乎是脚本,因而将无法有静态文件处理程序来处理(http error 404.17、0x80070032、IIS7)...

由于工作需要&#xff0c;需要在在一台新的服务器上迁移 .Net Framwork 4.0的Web项目 环境:Windows Server 2008 SP2,IIS 7,.Net FrameWork 4.0,Classic 由于项目正常在老服务器上运行&#xff0c;所有直接将项目拷贝过来部署在IIS上面&#xff0c;配置后链接字符串等等之后访问…

ZooKeeper管理分布式环境中的数据

Reference: http://www.cnblogs.com/wuxl360/p/5817549.html 本节本来是要介绍ZooKeeper的实现原理&#xff0c;但是ZooKeeper的原理比较复杂&#xff0c;它涉及到了paxos算法、Zab协议、通信协议等相关知 识&#xff0c;理解起来比较抽象所以还需要借助一些应用场景&#xff0…

企业级应用架构(三)三层架构之数据访问层的改进以及测试DOM的发布

在上一篇我们在宏观概要上对DAL层进行了封装与抽象。我们的目的主要有两个&#xff1a;第一&#xff0c;解除BLL层对DAL层的依赖&#xff0c;这一点我们通过定义接口做到了&#xff1b;第二&#xff0c;使我们的DAL层能够支持一切数据访问技术,如Ado.net,EF,linq To Sql&#x…

ctr多少正常_亚马逊广告ctr多少才算合格,如何提升亚马逊CTR

亚马逊广告ctr多少才算合格&#xff0c;如何提升亚马逊CTR很多亚马逊卖家并不重视点击率&#xff0c;其实点击率和转化率是同样重要的。好的点击率可以提升产品listing的流量&#xff0c;间接影响转化&#xff0c;促进销量。一般来说亚马逊点击率多少算正常呢&#xff1f;CTR全…

在linux中,我为什么不能安装VMware Tools?

在linux中&#xff0c;我为什么不能安装VMware Tools&#xff1f; 应该是操作不正确导致&#xff0c;以下为linux安装VMware Tools的方法。 1、在安装Linux的虚拟机中&#xff0c;单击“虚拟机”菜单下的“安装Vmware-Tools” 2、出现以下菜单&#xff0c;证明Vmware-Tools的光…

判断 CGRect是否“为空”

2019独角兽企业重金招聘Python工程师标准>>> property (nonatomic, assign) CGRect prototypeRect; -----这样的声明应该没有问题的&#xff0c;的if(!self.prototypeRect)报错是因为 CGRect是结构体&#xff0c;不能作非nil判断&#xff0c;你可以利用self.protot…

Javascript学习总结 - JS基础系列 二

简述 本系列将持续更新Javascript基础部分的知识&#xff0c;谁都想掌握高端大气的技术&#xff0c;但是我觉得没有一个扎实的基础&#xff0c;我认为一切高阶技术对我来讲都是过眼云烟&#xff0c;要成为一名及格的前端工程师&#xff0c;必须把基础打扎实了。我也想展翅高飞&…

mysql 可逆编码_使用MD5编码实现数据库用户密码字段的加密

1 前言 众所周知&#xff0c;MD5是目前应用最多的密码保护方法&#xff0c;该编码传说为不可逆加密编码&#xff1c;也就是说&#xff0c;永运无法倒算原码&#xff1e;。 使用MD5加密用户的操作密码&#xff0c;可以有效防止系统维护人员直接进入数据库时出现系统安全漏洞&…

Unity3D 与 objective-c 之间数据交互。iOS SDK接口封装Unity3D接口

原地址&#xff1a;http://www.cnblogs.com/qingjoin/p/3638915.html Unity 3D 简单工程的创建。与Xcode 导出到iOS 平台请看这 Unity3D 学习 创建简单的按钮、相应事件 Unity C# 代码 using UnityEngine; using System.Collections; using System.Runtime.InteropServices;pu…

开源代码ViewPageIndicator的使用

1. 导入Android studio 使用SlidingMenu的方式导入Android studio不行&#xff0c;不知道为何&#xff0c;过会懂了再写上 2. 代码 activity_main.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.…

[unity3d]手游资源热更新策略探讨

原地址&#xff1a;http://blog.csdn.net/dingxiaowei2013/article/details/20079683 我们学习了如何将资源进行打包。这次就可以用上场了&#xff0c;我们来探讨一下手游资源的增量更新策略。注意哦&#xff0c;只是资源哦。关于代码的更新&#xff0c;我们稍后再来研究。理论…

PostgreSQL学习手册(二) 模式(Schema)

2019独角兽企业重金招聘Python工程师标准>>> 一个数据库包含一个或多个命名的模式&#xff0c;模式又包含表。模式还包含其它命名的对象&#xff0c;包括数据类型、函数&#xff0c;以及操作符。同一个对象名可以在不同的模式里使用而不会导致冲突&#xff1b; 比如…

软件工作第4次作业

软件工作第4次作业 信管141 宋乃佳 1425052010 基于我们列出的 7 条UX评价准则&#xff0c;分析“师路南通” 在用户体验设计方面让你觉得满意的地方&#xff08;不少于2点&#xff09;&#xff1b;&#xff08;20分&#xff09;&#xff0c;请陈述理由。 同样&#xff0c;分析…

phoneGap2.9+eclipse开发环境和helloword案例

不同机器安装和使用各不相同&#xff0c;这里也只是记录一下自己机器上面的使用过程。 android安装环境前面的文章有些&#xff0c;这里不再说&#xff0c;直接上phoneGap的过程。因为phoneGap2.9.1需要安装nodejs和Git&#xff0c;比较复杂&#xff0c;没有太多精力去折腾&…

Ubuntu14.04下搭建Bochs仿真平台,同时用该平台安装Linux0.11内核

因为Linux0.11内核需要在80X86硬件平台上运行&#xff0c;现在已经没有该硬件系统了&#xff0c;所以需要搭建Bochs这个仿真平台。Bochs是一个X86硬件平台的开源模拟器。 安装步骤参考的是如下一篇文章&#xff1a;http://os.51cto.com/art/201407/446838_all.htm&#xff0c;非…

java web与android互通的aes算法

2019独角兽企业重金招聘Python工程师标准>>> ####Java实现代码 //可自定义保证16btye即可private static final byte[] IV {16, 26, -35, 23, 34, 125, -5, -4, -8, -9, -15, -78, 90, -8, -99, 100};public static byte[] encrypt(String content, String passwor…

mysql第三方工具binlog_mysql 开发进阶篇系列 33 工具篇(mysqlbinlog日志管理工具)

一.概述由于服务器生成的二进制日志文件以二进制格式保存&#xff0c;所以如果要想检查这些文件的文本格式&#xff0c;就会用到mysqlbinlog日志管理工具。mysqlbinlog的语法如下:mysqlbinlog [options] log-files log-files2...其中options有很多选项&#xff0c;常用如下&…

JMeter部分功能详解

JMeter 介绍&#xff1a; 一个非常优秀的开源免费的性能测试工具。 优点&#xff1a;你用着用着就会发现它的重多优点&#xff0c;当然不足点也会呈现出来。 从性能工具的原理划分&#xff1a; Jmeter工具和其他性能工具在原理上完全一致&#xff0c;工具包含4个部分&#xff1…