CSS中px和em的区别

发布时间：2017-04-01 10:49:18

发布者：jinchao

浏览量:

今天说一个经常用，但是没注意的问题，在设置字体大小的时候我们可以用px也可以用em，但是px与em到底有什么差别呢，今天我们来说一下。

px像素(Pixel)：

px是相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em：

em也是相对长度单位，是相对于当前字体大小的尺寸，这个字体可以是设置的，也可以是继承的。如果没设置，就是相对于浏览器默认的字体大小（16px）。

px与em的区别：

1.em的值并不是固定的,是根据当前字体的大小而定，1em就是当前字体的大小。而px的大小是固定。

2.em可以继承自父容器，而px不行。

3.在IE中px的字体是不能够改变大小的（在IE上方点击查看 > 文字大小）。

实例效果






文汇软件 
 
ul li{list-style-type:none; } 
.em{font-size:2em;} 
.px{font-size:32px; } 
 
 
 
 
  我的大小是2em 
  我的大小是32px

以上代码中，由于没有进行特别的字体设置，所以"我的大小是2em"的字体大小就继承了浏览器的默认设置，即1em=16px，那么2em也就等于32px。下面就看一个不是默认16px的情况，代码如下:






文汇软件 
 
ul li{list-style-type:none; } 
.first{font-size:12px;} 
.em{font-size:2em;} 
.px{font-size:32px;} 
.test{font-size:24px;} 
 
 
 
 
  我的字体大小是2em

我的字体大小是32px

我的字体大小是24px

以上代码中由于设置了类名为first的div中的字体大小为12px，那么在此div之内的1em就等于12px。而第二个div依然是使用默认的字体大小16px。第三个div内的span中的字体大小设置为24px。

上一篇：使你的网站快速跑起来，提高网站性能

下一篇： JavaScript中while语句如何使用

关键词:

返回列表

2024-04-06

CSS打印分页属性为什么有的浏览器不生效，是浏览器兼容问题吗？查看详情

2023-12-22

结合wow.js+animate.css实现滚动加载动画查看详情

2023-12-22

网页中头部菜单滚动跟随且不会造成页面塌陷查看详情

2023-12-16

element对话框路由跳转后黑色遮罩层不消失怎么办查看详情

2023-12-08

img标签使用after和before伪元素失效的解决方法查看详情

2023-12-03

伪元素与hover的妙用查看详情