Qt ------ CSS 长度单位
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 长度单位的更多相关文章
- CSS长度单位
罗列了CSS中常用的长度单位及比较 单位 含义 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 rem 相对于根元素字体大小 px 相对于屏幕分辨率而不是视窗大小: ...
- CSS长度单位及区别 em ex px pt in
1. css相对长度单位 Ø em 元素的字体高度 Ø ex 字体x的高度 Ø px ...
- CSS长度单位详解
序言 长度单位可以总体的分为绝对长度单位和相对长度单位.CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率.本篇 ...
- CSS长度单位:px和pt的区别
先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:而pt就是point,是印刷行业常用单位,等于1/72英寸. 这样很明白,px是一个点,它不是自然界的长度单位,谁能说出一个 ...
- css长度单位学习(em,rem,px,vw,vh)
绝对长度单位 绝对长度单位代表一个物理测量 [像素px(pixels)] 像素,为影像显示的基本单位,译自英文"pixel",pix是英语单词picture的常用简写,加上英语单词 ...
- css中pt、px、em、ex、in等这类长度单位详细说明
在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位.它们各是什么意思,有什么区别呢? 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt ...
- CSS的长度单位
对于css的长度单位真的有必要知道一下.那么css长度单位有哪些呢? 分成两大类: 1.绝对单位:不会因为其他元素的尺寸变化而变化.坚持自我. 2.相对单位:没有一个确定的值,而是由其他元素的尺寸影响 ...
- CSS选择器,属性前缀,长度单位,变形效果,过渡效果,动画效果
CSS3选择器 ·*通配选择器 ·E标签选择器 ·E#id ID选择器 ·E.class类选择器 ·E F包含选择器,后代选择器 ·E>F子包含选择器 ·E+F相邻兄弟选择器 ·E[foo]属性 ...
- Qt样式表之二:QSS语法及常用样式
一.简述 Qt样式表(以下统称QSS)的术语和语法规则几乎和CSS相同.如果你熟悉CSS,可以快速浏览以下内容.不熟悉的话可以先去W3School - CSS或者本人的CSS博客随笔简单了解一下. 在 ...
随机推荐
- python—2.x中如何使用中文
python2.x 默认使用ASCII编码格式 python3.x 默认使用UTF-8编码格式 在python2.x文件的第一行增加一下代码,解释器会以utf-8编码来处理python文件. # *_ ...
- 支持向量机SVM 初识
虽然已经学习了神经网络和深度学习并在几个项目之中加以运用了,但在斯坦福公开课上听吴恩达老师说他(在当时)更喜欢使用SVM,而很少使用神经网络来解决问题,因此来学习一下SVM的种种. 先解释一些概念吧: ...
- 算法笔记(c++)--c++中碰到的一些用法
算法笔记(c++)--c++中碰到的一些用法 toupper(xxx)可以变成大写; tolower(xx)小写 isalpha(xxx)判断是不是字母 isalnum(xx)判断是不是数字 abs( ...
- 1.hive介绍及安装配置
1.Hive介绍 数据库OLTP 在线事务处理 数据仓库OLAP 在线分析处理 延迟高 类sql方式(HQL) 使用sql方式,用来读写,管理位于分布式存储系统上的大型数据集的数据仓库技术 hive是 ...
- ElasticSearch之CURL操作(有空再去整理)
https://www.cnblogs.com/jing1617/p/8060421.html ElasticSearch之CURL操作 CURL的操作 curl是利用URL语法在命令行方式下工 ...
- Codeforces Beta Round #14 (Div. 2) D. Two Paths 树的直径
题目链接: http://codeforces.com/contest/14/problem/D D. Two Paths time limit per test2 secondsmemory lim ...
- 通过一台服务器ssh多台主机远程修改网卡ip
在多台服务器环境下,更改所有的ip地址,网关,一台一台的登录修改显得复杂繁琐. 知识点: 参考#https://www.cnblogs.com/youngerger/p/9104144.html ...
- 第七次java作业
interface Pet{public String getName();public String getColor();public int getAge();}class Cat imple ...
- Windows下基于http的git服务器搭建-gitstack
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Windows下基于http的git服务器搭建-gitstack 本文地址:http: ...
- 【week8】psp~~进度条
本周psp 项目 内容 开始时间 结束时间 中断时间 净时间 10月7日 星期一 论文 看生物信息方面的论文 10:00 12:00 5 115 写代码 注册信息从前台传入servlet 18:00 ...