CSS中的各种单位
| 单位 | 描述 | 原文 |
|---|---|---|
| em | 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； | Represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element. |
| ex | 依赖于英文子母小 x 的高度 | Represents the x-height of the element's font. On fonts with the "x" letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts. |
| cap | 表示元素字体的“顶高”（大写字母的大写字母）。 | Represents the "cap height" (nominal height of capital letters) of the element’s font. |
| ic | 等于使用预先测量的“水”(CJK水表意文字,U + 6 c34)字形字体用于呈现它 | Equal to the used advance measure of the "水" (CJK water ideograph, U+6C34) glyph found in the font used to render it. |
| lh | 等于所使用元素的行高属性的计算值，转换为绝对长度。 | Equal to the computed value of the line-height property of the element on which it is used, converted to an absolute length. |
| rlh | 等于根元素(通常)上的行高属性的计算值，转换为绝对长度。当用于根元素的字体大小或行高属性时，它指的是属性的初始值 | Equal to the computed value of the line-height property on the root element (typically <html>), converted to an absolute length. When used on the font-size or line-height properties of the root element, it refers to the properties' initial value. |
| ch | 数字 0 的宽度 | Represents the width, or more precisely the advance measure, of the glyph "0" (zero, the Unicode character U+0030) in the element's font. |
| rem | 根元素（html）的 font-size | Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this). |
| vw | viewpoint width，视窗宽度，1vw=视窗宽度的1% | Equal to 1% of the width of the viewport's initial containing block. |
| vh | viewpoint height，视窗高度，1vh=视窗高度的1% | Represents the "cap height" (nominal height of capital letters) of the element’s font |
| vmin | vw和vh中较小的那个。 |
Equal to the smaller of |
| vmax | vw和vh中较大的那个。 | Equal to the larger of vw and vh. |
| vi | 在根元素的内嵌轴的方向上，等于初始包含块大小的1%。 | Equal to 1% of the size of the initial containing block, in the direction of the root element’s inline axis. |
| vb | 在根元素的块轴的方向上，等于初始包含块大小的1%。 | Equal to 1% of the size of the initial containing block, in the direction of the root element’s block axis. |
| % | 数据类型由一个数字组成，后面跟着百分比符号（%）。可选地，它可能在前面有一个+或-符号，尽管负的值对所有属性都无效。和所有CSS维度一样，在这两者之间没有空格 | The <percentage> data type consists of a <number> followed by the percentage sign (%). Optionally, it may be preceded by a single + or - sign, although negative values are not valid for all properties. As with all CSS dimensions, there is no space between the symbol and the number. |
| cm | 厘米 | One centimeter. 1cm = 96px/2.54. |
| mm | 毫米 | One millimeter. 1mm = 1/10th of 1cm. |
| in | 英寸 (1in = 96px = 2.54cm) | One inch. 1in = 2.54cm = 96px. |
| px | 像素 (1px = 1/96th of 1in) | One pixel. For screen displays, it traditionally represents one device pixel (dot). However, for printers and high-resolution screens, one CSS pixel implies multiple device pixels. 1px = 1/96th of 1in. |
| pt | 像素 (1px = 1/96th of 1in) | One point. 1pt = 1/72nd of 1in. |
| pc | pica，大约6pt，1/6英寸； (1pc = 12 pt) | One pica. 1pc = 12pt = 1/6th of 1in. |
| deg | 表示角度的角度。一个完整的圆是360度。 | Represents an angle in degrees. One full circle is 360deg. Examples: 0deg, 90deg, 14.23deg. |
| grad | 表示倾斜角度的角度。一个完整的圆圈是400。 | Represents an angle in gradians. One full circle is 400grad. Examples: 0grad, 100grad, 38.8grad. |
| rad | 表示弧度的角度。一个完整的圆是2弧度，近似于6。 | Represents an angle in radians. One full circle is 2π radians which approximates to 6.2832rad. 1rad is 180/π degrees. Examples: 0rad, 1.0708rad, 6.2832rad. |
| turn | 在许多回合中代表一个角度。一个完整的圆是1圈。 | Represents an angle in a number of turns. One full circle is 1turn. Examples: 0turn, 0.25turn, 1.2turn. |
| HZ | 代表赫兹的频率 | Represents a frequency in hertz. Examples: 0Hz, 1500Hz, 10000Hz. |
| KHZ | 千赫兹 | Represents a frequency in kilohertz. Examples: 0kHz, 1.5kHz, 10kHz. |
| s | 秒 | Represents a time in seconds. Examples: 0s, 1.5s, -60s. |
| ms | 毫秒 | Represents a time in milliseconds. Examples: 0ms, 150.25ms, -60000ms. |
| fr | 数据类型被指定为一个数字，后面是单元fr。fr单元表示网格容器中剩余空间的一小部分。与所有CSS维度一样，单元与数字之间没有空格。 | The <flex> data type is specified as a <number> followed by the unit fr. The fr unit represents a fraction of the leftover space in the grid container. As with all CSS dimensions, there is no space between the unit and the number. |
CSS中的各种单位的更多相关文章
- css中的各种单位简述以及ios10下safari禁止缩放的问题
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
- css中字体常用单位px、em、rem和%的区别及用法总结
一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...
- CSS中的尺寸单位
绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 cm: Centimeter 厘米 q: Qua ...
- [css 实践篇]CSS中的尺寸单位
绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 cm: Centimeter 厘米 q: Qua ...
- CSS中的自适应单位vw、vh、vmin、vmax
1.vw.vh.vmin.vmax各单位的意义 上面的自适应单位可以统称为视口单位. 可以先了解一下视口指的是什么? 在PC端,视口指的是在PC端,指的是浏览器的可视区域:而在移动端,它涉及3个视口: ...
- css中vw,vh单位对于UC的兼容性问题
vw,vh单位在移动端浏览器不兼容,在网上找半天也没找到什么官方的解决方法:我就试了一下在使用到vh的单位之前添加一个用px定义的样式: 如: 当浏览器不是别100vw单位的时候 就会赋给px单位的样 ...
- css中font-size的单位总结：px、em、pt
px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的.em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指 ...
- CSS 中的 em单位
em的对应的像素值如何计算,一言以蔽之:em就是倍数当前元素font-size的倍数,其结果就是当前字体的像素值乘以em的值,至于font-size来自何处?有两个来源:继承自父元素和通过CSS直接设 ...
- 一起来看看css中的单位
一起来看看css中的单位 由于一直以来对于css中的百分比单位究竟是相对于谁的比例,这个问题不是很了解,所以就专门找资料看了一下. <div class="container w500 ...
随机推荐
- Unity3D_05_理解Unity的新GUI系统（UGUI）
理解Unity的新GUI系统(UGUI) Unity GUI 链接:UnityEngine.UI系统基础类架构图 Unity GUI 链接:UnityEngine Event & Event ...
- Unity3D_01_各种寻找GameObject方法
1.GameObject.Find(): 寻找Hierarchy面板中的activie 不为false的游戏对象: 路径如官方事例写法: public class ExampleClass : Mon ...
- IntelliJ IDEA远程连接tomcat，实现单步调试
web项目部署到tomcat上之后,有时需要打断点单步调试,如果用的是Intellij idea,可以通过如下方法实现: 开启debug端口,启动tomcat 以tomcat7.0.75为例,打开bi ...
- selenium WebDriver 截取网站的验证码
在做爬虫项目的时候,有时候会遇到验证码的问题,由于某些网站的验证码是动态生成的,即使是同一个链接,在不同的时间访问可能产生不同的验证码, 一 刚开始的思路就是打开这个验证码的链接,然后通过java代码 ...
- stm32 新建工程
先新建六个文件夹. Consis:启动文件等 Fwlib:inc.src文件夹 Hardware:存放驱动 Mdk:工程文件 User:main函数等
- AD 域服务简介（二）- Java 获取 AD 域用户
博客地址:http://www.moonxy.com 关于AD 域服务器搭建及其使用,请参阅:AD 域服务简介(一) - 基于 LDAP 的 AD 域服务器搭建及其使用 一.前言 先简单简单回顾上一篇 ...
- cent OS 7 忘记 root 密码
1. 在如下图, 选择系统的界面 按 e 2. 移动光标到文件底部, 修改如下两个地方(初始化 shell文件 并设置可读写), Ctrl x 退出并启动 shell 3. 如下界面 输入命令 mou ...
- nginx如何配置负载均衡
自己学习用 面试回答如下: 在nginx里面配置一个upstream,然后把相关的服务器ip都配置进去.然后采用轮询的方案,然后在nginx里面的配置项里,proxy-pass指向这个upstream ...
- spring项目与logstash和Elasticsearch整合
原创/朱季谦 最近在做一个将项目日志通过logstash传到Elasticsearch的功能模块,经过一番捣鼓,终于把这个过程给走通了,根据自己的经验,做了这篇总结文章,希望可以给各位玩logst ...
- 品Spring：bean定义上梁山
认真阅读,收获满满,向智慧又迈进一步... 技术不枯燥,先来点闲聊 先说点好事高兴一下.前段时间看新闻说,我国正式的空间站建设已在进行当中.下半年,长征五号B运载火箭将在海南文昌航天发射场择机将空间站 ...