HTML5常见的取值与单位
HTML5常见的取值与单位
长度单位包括
相对长度单位包括:em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位包括:cm, mm, q, in, pt, pc, px
ch:数字“0”的宽度
em:相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
ex:相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
rem:相对于根元素(即html元素)font-size计算值的倍数
vw:相对于视口的宽度。视口被均分为100单位的vw
vh:相对于视口的高度。视口被均分为100单位的vh
vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
cm:厘米 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
mm:毫米 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
q:1/4毫米 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
in:英寸 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
pt:点 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
pc:派卡 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
px:像素 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
| Pixels | EMs | Percent | Points |
|---|---|---|---|
| 6px | 0.375em | 37.5% | 5pt |
| 7px | 0.438em | 43.8% | 5pt |
| 8px | 0.5em | 50% | 6pt |
| 9px | 0.563em | 56.3% | 7pt |
| 10px | 0.625em | 62.5% | 8pt |
| 11px | 0.688em | 68.8% | 8pt |
| 12px | 0.75em | 75% | 9pt |
| 13px | 0.813em | 81.3% | 10pt |
| 14px | 0.875em | 87.5% | 11pt |
| 15px | 0.938em | 93.8% | 11pt |
| 16px | 1em | 100% | 12pt |
| 17px | 1.063em | 106.3% | 13pt |
| 18px | 1.125em | 112.5% | 14pt |
| 19px | 1.188em | 118.8% | 14pt |
| 20px | 1.25em | 125% | 15pt |
| 21px | 1.313em | 131.3% | 16pt |
| 22px | 1.375em | 137.5% | 17pt |
| 23px | 1.438em | 143.8% | 17pt |
| 24px | 1.5em | 150% | 18pt |
HTML5常见的取值与单位的更多相关文章
- 转载—“Cache-control”常见的取值有private、no-cache、max-age、must-revalidate等
转载自http://www.cnblogs.com/igin/archive/2008/05/04/1181056.html 网页的缓存是由HTTP消息头中的“Cache-control”来控制的,常 ...
- "Cache-control”常见的取值private、no-cache、max-age、must-revalidate及其用意
http://www.cnblogs.com/kaima/archive/2009/10/13/1582337.html 网页的缓存是由HTTP消息头中的"Cache-control&quo ...
- (网页的缓存控制)HTML配置no-cache(备忘) “Cache-control”常见的取值
HTML配置no-cache(备忘) No-cache配置 html表头如下 <meta http-equiv="Content-Type" content="te ...
- “Cache-control”常见的取值有private、no-cache、max-age、must-revalidate等
网页的缓存由HTTP消息头中的"Cache-Control" 来控制的,常见的取值有private.no-cache.max-age.must-revalidate等,默认为pri ...
- web(六)css的基本语法、取值与单位
css语法包含如下部分: 选择器:用于选择需要添加样式的元素. 属性(property):样式的属性名称,例如color代表颜色. 取值与单位:属性对应的值以及单位. 语法规则:css的某些固定语法. ...
- Java 中日期的几种常见操作 —— 取值、转换、加减、比较
Java 的开发过程中免不了与 Date 类型纠缠,准备总结一下项目经常使用的日期相关操作,JDK 版本 1.7,如果能够帮助大家节约那么几分钟起身活动一下,去泡杯咖啡,便是极好的,嘿嘿.当然,我只提 ...
- 聊聊 Java 中日期的几种常见操作 —— 取值、转换、加减、比较
Java 的开发过程中免不了与 Date 类型纠缠,准备总结一下项目经常使用的日期相关操作,JDK 版本 1.7,如果能够帮助大家节约那么几分钟起身活动一下,去泡杯咖啡,便是极好的,嘿嘿.当然,我只提 ...
- html5 自定义标签取值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 如何解决流程开发中SheetRadioButtonList页面取值问题
分享一个常见的取值问题. 应用场景: SheetRadioButtonList控件,点击其中一项执行事件操作.如果是页面加载的情况下,值就无法取到. 具体原因如下: 我给SheetRadioButto ...
随机推荐
- LeetCode 二叉树的锯齿形层次遍历
第103题 给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 例如: 给定二叉树 [3,9,20,null,null,15,7] ...
- 精通awk系列(11):awk的工作流程
回到: Linux系列文章 Shell系列文章 Awk系列文章 awk工作流程 参考自:man awk的"AWK PROGRAM EXECUTION"段. man --pager= ...
- Electron npm install 常见错误(Windows)
问题一:node_gyp使用版本不对 if not defined npm_config_node_gyp (node "C:\Users\Administrator\AppData\Roa ...
- arcgis api 4.x for js 结合 Echarts4 实现统计图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- Virtual Box复制虚拟机
用惯了VM换BOX还是有点不大一样的,比如复制 我用了2个网卡,所以看起来麻烦了一次 注释了UUID 应该有更好的办法来操作,下面的看起来有点啰嗦,先凑合着这样弄... 1.关机 2.复制 3.改名称 ...
- dbms_profiler
@?/rdbms/admin/profload.sql @?/rdbms/admin/proftab.sql CREATE or replace PUBLIC SYNONYM plsql_profil ...
- 如何使用coe_load_sql_profile.sql来固定sql profile
SQLT工具包含一个脚本,名字是 coe_load_sql_profile.sql,下面以用户SCOTT的EMP表为例,说明如何使用该脚本固定sql profile. 1. SQL> -- 对e ...
- 【cf961G】G. Partitions(组合意义+第二类斯特林数)
传送门 题意: 给出\(n\)个元素,每个元素有价值\(w_i\).现在要对这\(n\)个元素进行划分,共划分为\(k\)组.每一组的价值为\(|S|\sum_{i=0}^{|S|}w_i\). 最后 ...
- ccf-csp201809题解
目录 ccf-csp201809题解 1. 201809-1 卖菜 题目描述 解析 通过代码 2. 201809-2 买菜 题目描述 解析 通过代码 3.201809-3 元素选择器 题目描述 解析 ...
- [算法模板]FFT-快速傅里叶变换
[算法模板]FFT-快速傅里叶变换 感谢ZYW聚聚为我们讲解FFT~ 思路 我懒,思路和证明部分直接贴链接: rvalue LSJ-FFT与NTT基础 代码 主要思想是利用了单位根特殊的性质(n次单位 ...