彻底弄懂css中单位px和em，rem的区别
px是像素点（Pixel）
em是当前元素所使用的字体的大写英文字母M的宽度，之所以指定是M，是因为在比例字体中每个字母的宽度是不相等的（比如W和i的宽度就差别很大），而在等宽字体（比如汉字）中，每个字符的宽度是相等的，所以em就是字符的宽度（或者说是汉字宽度的一半）
rem则是页面根元素的字体宽度（r就是root，根），其他解释同上
px是一个绝对长度单位，就是说指定一个元素的宽度是100px，那么它的宽就固定为100像素；而em则是一个相对长度单位，比如说一个元素的宽度是4em，而这个元素的字体宽度为12px，则这个元素的实际宽度就是48px，而如果把这个元素的字体大小改为16px，则这个元素的实际宽度也自动变为64px；至于rem，是为了让这个页面所有使用rem作为长度单位的元素都可以随页面根元素（通常是指html或body）的字体大小而自动调整，这样的话只需要改变根元素的字体大小，就可以实现改变整个页面外观的目的，通常用于响应式页面布局。
所有现代浏览器中，默认网页字号是16px大小，默认1em=16px;那么0.75em=12px;(16*0.75);
但是，你定义了一个body{font-size:32px;}，这时1em=32px;假如你需要一个16px的字体，就要写：font-size: 0.5em;
再然后，em单位很操蛋的是子元素的字号是根据上一级父元素的字号来算的，看例子：
body{font-size: 32px;}/*定义了1em=32px*/div{font-size: 0.5em;}div p{font-size: 0.75em;} 我是32px大小 我是16px大小，因为定义了div{font-size: 0.5em;}即1em的一半 那么问题来了，这行p的字号定义成了0.75em，他不是body定义的32px的0.75，而是父div字号16px的0.75 如果p里面再嵌套一个span元素，你要定义他的字号大小为24px，你先要算出目前p的字号实际大小为12px，然后乘以2才能得到span的正确字号，即：span{font-size: 2em;}
这样嵌套一多了，算子元素的字号是很不直观的，不知道css的这个设计是出于什么目的或是设计时是不是没注意到这个问题会带来计算上的麻烦，于是后来又有了rem单位。
rem单位就简单多了，只针对html根元素，比如body里面你定了font-size: 24px;(1em=24px;)，那么无论你在哪个子元素上，你想要个12px的字体，只用定义font-size: 0.5em;即可，你不用去担心它上级元素的字号是16px还是24px;
1.PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。
2.EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。另外，em是相对于父元素的属性而计算的，如果想计算px和em之间的换算，输入数据就可以px和em相互计算。
3.EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
扩展资料：
1.PX是Pixel的缩写，也就是说像素是指基本原色素及其灰度的基本编码，由 Picture(图像) 和 Element（元素）这两个单词的字母所组成的，如同摄影的相片一样，数码影像也具有连续性的浓淡阶调。若把影像放大数倍，会发现这些连续色调其实是由许多色彩相近的小方点所组成，这些小方点就是构成影像的最小单位“像素”。
2.em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多。<em>(emphasize) 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
3.REM是相对单位，是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
参考资料：百度百科-PX （计算机语言中的像素）
百度百科-EM （HTML术语）
百度百科-Rem （css3中的rem）
1、概念
px：绝对单位，页面按精确像素展示。
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
2、特点
PX特点：
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
EM特点 ：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
rem特点：
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
扩展资料
选择使用什么字体单位主要由项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
无论是台式还是移动端开发，两者其实都可以使用，只不过em需要注意继承关系，并且需要修改多个内容，而rem恰恰相反，所以rem更适合移动式开发。
也就是说，em是以自身父容器为参考对象的，而rem直接以HTML为参考对象的，在多层嵌套的情况下使用em很容易出现问题。
px：绝对度量单位，就是像素
em：相对度量单位，但是计算起来实在费劲。em指的是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。换句话说，如果当前div的字体大小是12像素，那么1em就是12像素，如果div字体大小是24像素，1em就是24像素。
rem，也是和字体相关的相对度量单位，但是，rem是相对于根元素的字体大小进行设置的，如果html元素中的字体大小设置为24px，那么针对任意html内的元素设置1rem，均表示的是24px，大大节省了我们计算字体大小的时间。
详细资料 -> 网页链接
px是你屏幕设备物理上能显示出的最小的一个点，这个点不是固定宽度的，不同设备上点的长宽、比例有可能会不同。假设：你现在用的显示器上1px宽=1毫米，但我用的显示器1px宽=两毫米，那么你定义一个div宽度为100px，你显示器上看这个div是10厘米，我显示器上看是20厘米。另外一个px点的长宽不一定是1:1的正方形，有的设备上长宽比是不一样的。
em尺寸：所有现代浏览器下默认字体尺寸是16px，这时1em=16px。然后你人为的把body里面定义font-size:12px;（把浏览器默认16px改小了），此刻1em=12px，如果0.8em实际等于12px*0.8；em的用处是你要整个网页字体统一变大变小你只要改body里面font-size的值就行了。
另外：em会继承父元素的字体大小，比如：
body{font-size: 16px;}
p{font-size:0.75em;}
span{font-size:2em;}
<html>
我大小为16px;
<p>
段落文字大小为12px(16*0.75);
<span>
我大小是2em，即24px，这里是相对父级字号*2的，而不是相对body里面的16px
</span>
</p>
</html>
Rem，上面你看到了，em相对父级，嵌套一多了算字体到底多大就很操蛋，所以有了Rem(浏览器支持还不是很理想)，他只相对html或body的字体尺寸(默认还是16px，除非你自己用font-size定义为其他)，没有了继承父级尺寸这个关系。
PX:
PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。
EM:
EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。
另外，em是相对于父元素的属性而计算的，如果想计算px和em之间的换算，这个网站不错，输入数据就可以px和em相互计算。狠击这里：px和em换算
Rem:
EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
浏览器的兼容性
除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。
因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。
请教DW MX2004里关于CSS的问题!
你的表述不大清楚，对段落2的要求矛盾，我按照大致的理解表述如下：新建Style.css文件，内容如下：\/* CSS Document *\/ \/*鼠标经过时变换颜色*\/ a.style1:link { color: #0000FF;} a.style1:visited { color: #0000FF;} a.style1:hover { color: #FF0000;} a.style1:active { color: ...
Dreamweaver里怎么移动表格位置
第一步：在文档中插入一个表格。第二步：为表格添加一个id名称，你可以在属性面板上直接设置，也可以在代码里添加。第三步：打开css样式面板，单击“新建css样式”按钮。第四步：在“新建css样式”对话框中，类型中选择“使用CSS选择器”，在选择器中，输入#加上id名称。第五步：在“定义”类别中，...
对网页标准的认识?div+css的布局就是网页标准么
3、必须了解的CSS知识 CSS是标准化最吸引人的地方,也是时下讨论最多的话题,市面上的相关书籍也在web标准类里占据压倒性的比重,甚至有些人(包括一些用人单位)认为CSS就是网页标准。这种过于夸大CSS作用的观点固然是错误的,但CSS对于网页标准的重要性却也可见一斑。 CSS相关的知识、技巧很多,从知识的必备性方面来讲...
有没有CSS(CS:起源) H键菜单插件?
比较复杂 看你技术怎么样了 最后这些子级菜单的综合调用还差一个重要命令就是：alias reset_all "bind 0 slot10; bind 1 slot1; bind 2 slot2; bind 3 slot3; bind 4 slot4; bind 5 slot5; bind 6 slot6; bind 7 slot7; bind 8 slot8; bind 9 slot9; clear; cls"绑定键盘1到9...
在DW中为什么修改CSS样试,网页的所有链接都跟着改了?
局部 .menu_dh a:link{color:#595959;display:block;} .menu_dh a:visited{color:#595959; display:block;} .menu_dh a:hover{color:#000;background:url(..\/images\/libj.jpg) no-repeat; display:block;} .menu_dh a:active{color:#000;background:url(..\/images\/libj.jpg) no-repeat...
雅虎传统紫色css代码是什么?
如果是这样 这恐怕不是一个css问题能回答的 2是这个页面上有一个显示区域 你想把它的文字 或者背景颜色变紫色 我想应该不至于是这么简单的问题 3是怎样让你看到的yahoo页面变成传统紫色风格..这个不属于程序设计问题 你得问yahoo用的比较多的人 请原谅我胡乱的回答一气 因为我想没人能弄懂您具体...
如何用自己的电脑做网站服务器?
自己的电脑做网站服务器，不一定要配置好，P3都够，因为ADSL上传速度只有56KBS。你可以注册花生壳或注册3322.org安装他们的客户端。如果用自己的顶级域名可以将自己的域名别名解析到花生壳或3322的免费动态域名。服务器安装win2003系统。如果只做一个网站这就够了。如果要做多个网站可以安装虚拟主机软件(如...
超链接如何加下划线 css
给需要添加下划线的超链接添加单独样式或者一个class，包含关键代码：text-decoration:underline。实例演示如下：1、设计一个HTMl页面，放入一些a标签超链接：2、给a便签全部取消下划线:3、此时的页面展示如下：4、在样式中添加一个class，去掉下划线：5、演示：给一些a便签添加第四步的class：6、刷新页面，...
java该怎么自学?
数据库学习完毕后,可以将数据存储到数据库中,也可以通过SQL语句从数据库中查询数据,结合Java项目可以实现动态站点的数据的保存。 技术树 三、前端技术 浏览器展示给用户看到的网页就是前端,前端有三大基础技术分别为Html、CSS、JavaScript,这些学完后,为了做出更好、更炫的交互式体验效果,我们还需要学习jQuery、Element...
我是个CSS新手,总是不知道哪个元素要多少像素,要在什么位置,什么颜色...
调整没问题了再去页面html的代码里调整。浏览器开发者工具的外观如下 目前支持这个功能的浏览器很多了，火狐、搜狗、360、百度等都是有这个功能的，这个截图是我刚刚简单编辑了个导航条代码，你可以试下这种方式。另外，本地建网页在这个浏览器里会更好操作，你可以直接编辑css的代码，然后根据浏览器展现...
郁彬捷芝： px是像素点(Pixel) em是当前元素所使用的字体的大写英文字母M的宽度,之所以指定是M,是因为在比例字体中每个字母的宽度是不相等的(比如W和i的宽度就差别很大),而在等宽字体(比如汉字)中,每个字符的宽度是相等的,所以em...
东丽区17723385703： 彻底弄懂css中单位px和em的区别 - ？
郁彬捷芝： px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐;em单位名称为相对长度单位.相对于当前对象内文本的字体尺寸,国外使用比较多;扩展阅读:html em标签,html em强调标签 pt单位名称为点(...
东丽区17723385703： 前端css中单位em和px的区别 - ？
郁彬捷芝： 前端css中em和px都是表示长度的单位,除了这两者,CSS 还有几个不同的单位用于表示长度.而em和px的区别就在于: 1.em指的是相对长度,相对单位长度指定了一个长度相对于另一个长度的属性.对于不同的设备相对长度更适用.相对长度还有:ex、ch、rem、vw、%等等. 2.px是绝对长度单位,它是一个固定的值,它反应一个真实的物理尺寸.绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等).绝对长度还有:cm、mm、in、pt等等.
东丽区17723385703： css字体中px和em的区别 - ？
郁彬捷芝： px是像素,em则是大写字母M的宽度.英文字体是有等宽字体和比例字体之分的,等宽字体的每个字符的宽度是相同的,而比例字体则不同,M的宽度要比i宽很多,因此在不同字体下,1em的实际宽度是不尽相同的.
东丽区17723385703： css中px和em有什么区别 - Div+CSS教程 - ？
郁彬捷芝： 1. IE无法调整那些使用e79fa5e98193e58685e5aeb931333332636331px作为单位的字体大小;2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)...
东丽区17723385703： css中em px 区别你真的了解吗 - ？
郁彬捷芝： px是绝对单位,不支持IE的缩放,em是相对单位.em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么12px=0.75em, 10px=0.625em.为了简化font -size的换算,需要在css中的body选择器中声明...
东丽区17723385703： 关于css中单位 em和px的问题 - ？
郁彬捷芝： 呵..别步我的后尘了,我之前也用em做单位的,后来多方了解,用em不现实;用em就是方便文字放大放小;但现在浏览器都特别强悍,右下角有把网页比例放大放小功能的;用em单位在一个背景上,如果文字放大,会撑出背景,反而视觉上都乱了
东丽区17723385703： 写网页的时候,Px单位转成em是多少?比如50px等于多少em呢? - ？
郁彬捷芝： 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合:1em=16px.那么12px=0.75em,10px=0.625em. 为了简化font-size的换算,需要在css中的body选择器中先全局声明 Font-size=62.5%,很多初学者可能会在此定义0.625em或者直接定义12px,这是没有效果的,一定要定义font-size=62.5%. 这就使em值变为 16px*62.5%=10px, 这样12px=1.2em,10px=1em,也就是说只需要将原来的px数值除以10,然后换上em作为单位就行了. 所以50px等于5em.
东丽区17723385703： em和px的关系 - ？
郁彬捷芝： http://jorux.com/archives/95-websites-of-china-need-to-rewrite-css/ em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 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作为单位就行了
东丽区17723385703： html中em在CSS中和P段落中是什么意思?？
郁彬捷芝： 在css中这个是一个度量单位,除了em之外还有pt、px等. 但是这个似乎是不常用,我们常用的是像素,点数等等单位的.
