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 ...
随机推荐
- 前后端分类状态下SpringSecurity的玩法
前后端分离状态下,后端SpringSecurity该如何变动呢? 如何变动取决于前后端分离状态下,前后端交互的特点,纯json交互,闲言少叙,上干货 主配置类 @Configuration @Enab ...
- HTML+CSS+JavaScript实现2048小游戏
相信很多人都玩过2048小游戏,规则易懂.操作简单,我曾经也“痴迷”于它,不到2048不罢休,最高成绩合成了4096,现在正好拿它来练练手. 我对于2048的实现,除了使用了现有2048小游戏的配色, ...
- 计算2个GPS坐标的距离
本文转自 http://blog.csdn.net/ztp800201/article/details/44676867 Java 计算两个GPS坐标点之间的距离 1. Lat1 Lung1 表示A点 ...
- Nancy获取Request.Form的所有参数
Nancy是一个轻量级的webapi框架,在用Nancy框架的时候,我们经常要获取到接口的所有动态参数值, 但是Nancy的Request.Form不能够直接转成NameValueCollection ...
- Linux下Eclipse以及Java环境安装教程[小白化](2019-9)
Linux下安装Eclipse以及Java 一.前言 许久未用Eclipse, Ubuntu上也没装Eclipse, 今天安装发现, 好多东西都忘了. 不过经过一番查找(百度, csdn) 终于还是安 ...
- Jmeter 接口自动化-脚本数据分离实例
一. 背景: 为了让大家更加的了解Jmeter,并且使用起来游刃有余.这篇我们主要讲一下,如何优雅的使用Jmeter一步步的实现接口自动化,完成脚本与数据分离,把可能对Jmeter脚本的维护转移到c ...
- Hbase入门(一)——初识Hbase
本文将介绍大数据的知识和Hbase的基本概念,作为大数据体系中重要的一员,Hbase弥补了Hadoop只能离线批处理的不足,支持存储小文件,随机检索.而这种特性使得Hbase对于实时计算体系的事件存储 ...
- 容器时代的持续交付工具---Drone：Drone介绍与安装
Drone:Drone is a Container-Native, Continuous Delivery Platform. 官方给的定义,从上面的定义可以得出两个关键点: 1,Container ...
- Laravel 从入门到精通 创建并运行一个新的 Laravel 项目
创建一个新的 Laravel 项目 正如官方文档所言,有两种方式可以创建一个新的 Laravel 项目,这两种创建方式都是从命令行执行的:第一种是通过全局的 Laravel 安装器,另一种是通过 Co ...
- lvm创建逻辑卷技巧
公司使用的服务器都是虚拟机,是虚拟机管理员通过模板创建的. 创建的所有逻辑卷都是使用的sda盘. 而我们在部署应用时需要和系统所在盘分离.(提高磁盘读写速度,避免系统盘被占满) 以前都是先创建新的逻辑 ...