CSS中em和px的区别

  Font-size:1.5em;

  其实在国外CSS编写中,使用em作为单位是很多的,一是人性化考虑,二是受到美国劳工部Section508法案的强行限制。那么在网页设计中,常用到的度量单位一共有三种,分别是px/em/pt:

  *px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的,国内的网站很多都是采用px作为单位的。

  *em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸。在国外使用的很多。众多先进浏览器【IE除外的基本都是】都支持字体调整。

  *pt单位名称为点(Point),绝对长度单位,这个很老了,老到胡子都一把了。。基本没有使用的了。

  第一、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单位有什么特点?

  *em的值并不是固定的。

  *em会继承父级元素的字体大小。

  我们在写CSS的时候如果要用em为单位,需要注意两点:

  *body选择器中声明Font-size=62.5%;

  *将你的原来的px数值除以10,然后换上em作为单位;

  *重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

  也就是避免1.2*1.2=1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明的字体大小时就只能是1em,而不是1.2em,因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

  注:建议不要使用em作为中文站点的文字单位,会导致文字变形十分严重的。

时间: 2025-01-01 14:55:21

CSS中em和px的区别的相关文章

html-web开发中em 百分比 px pt等需要注意的细节和他们的差别

问题描述 web开发中em 百分比 px pt等需要注意的细节和他们的差别 新手在用appcan开发手机应用,用的是html css js,在页面自适应屏幕方面遇到困难,例如"使用百分比控制刷新钮的宽度,那么在低分辨率和高分辨率之间将会有非常大的偏差."我对这个细节不理解.

css中em px 区别你真的了解吗

网站制作中字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应,在本文将为大家详细介绍下 之前听人说过,网站制作中字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应.px是绝对单位,不支持IE的缩放,em是相对单位. 首先了解一下em是何物? em 指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合: 1em=16px.那么1

CSS中id和class的区别和用法

在一个网页里ID只能使用一次.当然即使一个id在一个网页内被使用多次,其CSS样式仍然可以实现生效,但是一般规定W3C标准是使用一次.因为ID在html里可以赋予html标签特殊的属性如一下JS动作.表单传值等特性所以区别于一个class可以使用多少的次,而一个CSS 命名的id只能使用一次避免一些特定动作.传的表单值的兼容性特性错误即使没有其它JS脚本动作.表单传值特性但是我们也一定执行一个页面只能使用一次. id 选择器以 "#" 来定义,命名CSS选择器. 定义命名css id选

css中Class与ID的区别

个class是用来根据用户定义的标准对一个或多个元素进行定义的.打个比较恰当的比方就是剧本:一个class可以定义剧本中每个人物的故事线,你可以通过css教程,网页特效等来使用这个类.因此你可以在一个页面上使用class="frodo" ,class="gandalf",class="aragorn"来区分不同的故事线.还有一点非常重要的是你可以在一个文档中使用任意次数的 class. 至于id,通常用于定义页面上一个仅出现一次的标记.在对页面排

CSS中Class与ID的区别,Margin与Padding的区别

核心提示:Class可以反复使用而ID在一个页面中仅能被使用一次.有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题. Class可以反复使用而ID在一个页面中仅能被使用一次.有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题. 这两个区别都是比较容易混淆的问题,尤其是Class与ID,相信很多人并没有仔细了解过之中区别.以下是我的一些理解: 1. Clas

css中link和@import的区别分析详解

导入CSS文件主要有两种方式: 链接式(link)  代码如下 复制代码 <link rel="stylesheet" href="style.css" type="text/css"/>   导入式(@impot) <style type="text/css">      @import url("style.css"); </style> 以上是这两种方式的语法区别.

CSS中display与visibility的区别

css|区别 起因: 前几天在做一个图片无间隙滚动的效果,要利用到一个隐藏的层. 问题: 之间复制以前文字滚动的效果代码(文字滚动时无错误),结果发现页面被拉长了一倍,也就是隐藏的层. 解决: 查CSS手册后发现了隐藏内容原来是有区别的,一种是保留对象的物理空间,一种是不保留. ------------------------------- display:none CSS1 隐藏对象.与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间 visibility:h

css的em/ex/px/pt(css长度单位)使用介绍

  em:1em为当前字体font-size,一般浏览器默认为(16px); ex:以给定字体的小写字母x的高度为基准 px:像素,屏幕上的一个小方格 pt单位名称为点(Point),绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用

css中margin和padding用法区别介绍

用margin还是用padding这个问题是每个学习CSS进阶时的必经之路. CSS边距属性定义元素周围的空间,通过使用单独的属性,可以对上.右.下.左的外边距进行设置,也可以使用简写的外边距属性同时改变所有的外边距. 边界(margin):元素周围生成额外的空白区,"空白区"通常是指其他元素不能出现且父元素背景可见的区域. padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的"补白"(或者叫"留白"),因