1.         css相对长度单位

Ø         em          元素的字体高度

Ø         ex           字体x的高度

Ø         px           像素Pixels

Ø         %           百分比Percentage

2.         css绝对长度单位

Ø         in            英寸Inches(1英寸=2.54厘米)

Ø         cm          厘米Centimeters

Ø         mm         毫米millimetre

Ø         pt           点Points(1点=1/72英寸)

Ø         pc           皮卡Picas(1皮卡=12点)

3.         单位em的说明

em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:1em=16px。那么12px=0.75em。但是em并不是固定的,它会继承父级元素的字体大小。你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。

4.         单位pt的说明

在印刷排版中,point是一个绝对值,它等于1/72英寸,可以用尺子丈量的,物理的英寸。但是在css中pt含义却并非如此。因为我们的显示器被分割为了一个个的像素,单个像素只能有一种颜色 (为了简化,这里暂不讨论次像素反锯齿技术),要在屏幕上显示,必须先把以 pt 为单位的长度转换为以像素为单位的长度,这个转换的媒介,就是 DPI (事实上,这里的所谓的 DPI,是操作系统和浏览器中使用的术语,即为 PPI, pixels per inch,和扫描仪、打印机、数码相机中的 DPI 是不同的概念)。

例如,无论在哪个操作系统中,Firefox 浏览器默认的 DPI 都是 96,那么实际上 9pt = 9 * 1/72 * 96 = 12px。

所以,虽然“DPI”中的“I”和“1pt 等于 1/72 inch”中的“inch”,都不代表物理上的英寸,但这两个单位互相之间是相等的,也就在相乘中约掉了。

那么,真实的物理长度怎么计算呢?请拿出一把尺子,丈量你的显示器的可见宽度 (我这里是 11.2992 英寸),除以横向分辨率 (我这里是 1024 像素),得到的就是每个像素的物理长度。

现在我们可以回答这样一个问题,网页上 9pt 的字体究竟占用了多宽的空间?答案是:  9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英寸 = 0.3363 厘米。

5.         pt和px

虽然pt是绝对单位,但是那只是针对输出设备而言的,在文字排版工具(word,abobe)中是非常有用的字体单位。不管显示器的分辨率是多少,打印在纸面上的结果是一样的。

但是网页主要为了屏幕显示,而不是为了打印等其他需要的。而px能够精确地表示元素在屏幕中的位置和大小。

当然。在dpi是96的情况下,9pt=12px。

Qt ------ CSS 长度单位的更多相关文章

  1. CSS长度单位

    罗列了CSS中常用的长度单位及比较 单位 含义 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 rem 相对于根元素字体大小 px 相对于屏幕分辨率而不是视窗大小: ...

  2. CSS长度单位及区别 em ex px pt in

    1.         css相对长度单位 Ø         em          元素的字体高度 Ø         ex           字体x的高度 Ø         px        ...

  3. CSS长度单位详解

    序言 长度单位可以总体的分为绝对长度单位和相对长度单位.CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率.本篇 ...

  4. CSS长度单位:px和pt的区别

    先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:而pt就是point,是印刷行业常用单位,等于1/72英寸. 这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个 ...

  5. css长度单位学习(em,rem,px,vw,vh)

    绝对长度单位 绝对长度单位代表一个物理测量 [像素px(pixels)] 像素,为影像显示的基本单位,译自英文"pixel",pix是英语单词picture的常用简写,加上英语单词 ...

  6. css中pt、px、em、ex、in等这类长度单位详细说明

    在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位.它们各是什么意思,有什么区别呢? 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt ...

  7. CSS的长度单位

    对于css的长度单位真的有必要知道一下.那么css长度单位有哪些呢? 分成两大类: 1.绝对单位:不会因为其他元素的尺寸变化而变化.坚持自我. 2.相对单位:没有一个确定的值,而是由其他元素的尺寸影响 ...

  8. CSS选择器,属性前缀,长度单位,变形效果,过渡效果,动画效果

    CSS3选择器 ·*通配选择器 ·E标签选择器 ·E#id ID选择器 ·E.class类选择器 ·E F包含选择器,后代选择器 ·E>F子包含选择器 ·E+F相邻兄弟选择器 ·E[foo]属性 ...

  9. Qt样式表之二:QSS语法及常用样式

    一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...

随机推荐

  1. MATLAB 笔记

    MATLAB的学习 Matlab 主要有5大部分构成,分别是MATLAB语言,桌面工具与开发环境,数学函数库 ,图形系统和应用程序接口.以及众多的专业工具.

  2. java读取excel或者csv时日期格式数据处理

    背景:最近写一个通过excel批量导入数据的功能,里面含有时间,但是java读取之后把时间转为了距离1990年1月1号的天数,比如excel中时间为2018/9/16 18:30,java读取之后变成 ...

  3. Cross origin requests are only supported for protocol schemes: http, data, chrome,chrome-extension的问题

    Cross origin requests are only supported for protocol schemes: http, data, chrome,chrome-extension的问 ...

  4. GitHub 的简单使用

    GitHub 的简单使用 2016-01-28 16:32:481909浏览1评论 一.Git 版本控制器 commit:做一个版本:commit new file:添加到版本中,下边填的是项目的描述 ...

  5. underscore.js源码解析(二)

    前几天我对underscore.js的整体结构做了分析,今天我将针对underscore封装的方法进行具体的分析,代码的一些解释都写在了注释里,那么废话不多说进入今天的正文. 没看过上一篇的可以猛戳这 ...

  6. ncnblogs.com的用户体验

    你是什么样的用户, 有什么样的心理, 对cnblogs 的期望值是什么? 我是一名普通的学生,上cnblogs的期望是发表博客完成老师布置的任务. 当你第一次使用cnblogs 的功能的时候, 碰到了 ...

  7. 整理sql server数据类型

    我们在平常开发过程中,在设计数据的时候,经常碰到数据类型选择的问题,为了更快,更合适地选择正确的数据类型,所以在这里做个总结. 分类 sql server 数据类型 c# 数据类型 描述 应用场景 字 ...

  8. 1014 我的C语言文法定义与C程序推导过程

    程序> -> <外部声明> | <程序> <外部声明> <外部声明> -> <函数定义> | <声明> < ...

  9. HDU 2164 Rock, Paper, or Scissors?

    http://acm.hdu.edu.cn/showproblem.php?pid=2164 Problem Description Rock, Paper, Scissors is a two pl ...

  10. 有一个集合,判断集合里有没有“world”这个元素,如果有,添加“javaee”

    // 有一个集合,判断集合里有没有“world”这个元素,如果有,添加“javaee” List list = new ArrayList(); list.add("world") ...