单位 描述                                                                                                                                                原文                                                            
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 vw and vh.

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中的各种单位的更多相关文章

  1. css中的各种单位简述以及ios10下safari禁止缩放的问题

    px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...

  2. css中字体常用单位px、em、rem和%的区别及用法总结

    一.px.em.rem和%的定义 1.px(像素) px单位的名称为像素,它是一个固定大小的单元,像素的计算是针对(电脑/手机)屏幕的,一个像素(1px)就是(电脑/手机)屏幕上的一个点,即屏幕分辨率 ...

  3. CSS中的尺寸单位

    绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 cm: Centimeter 厘米 q: Qua ...

  4. [css 实践篇]CSS中的尺寸单位

    绝对单位 px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 cm: Centimeter 厘米 q: Qua ...

  5. CSS中的自适应单位vw、vh、vmin、vmax

    1.vw.vh.vmin.vmax各单位的意义 上面的自适应单位可以统称为视口单位. 可以先了解一下视口指的是什么? 在PC端,视口指的是在PC端,指的是浏览器的可视区域:而在移动端,它涉及3个视口: ...

  6. css中vw,vh单位对于UC的兼容性问题

    vw,vh单位在移动端浏览器不兼容,在网上找半天也没找到什么官方的解决方法:我就试了一下在使用到vh的单位之前添加一个用px定义的样式: 如: 当浏览器不是别100vw单位的时候 就会赋给px单位的样 ...

  7. css中font-size的单位总结:px、em、pt

    px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的.em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指 ...

  8. CSS 中的 em单位

    em的对应的像素值如何计算,一言以蔽之:em就是倍数当前元素font-size的倍数,其结果就是当前字体的像素值乘以em的值,至于font-size来自何处?有两个来源:继承自父元素和通过CSS直接设 ...

  9. 一起来看看css中的单位

    一起来看看css中的单位 由于一直以来对于css中的百分比单位究竟是相对于谁的比例,这个问题不是很了解,所以就专门找资料看了一下. <div class="container w500 ...

随机推荐

  1. 1、单链表的实现(java代码)

    1.创建链结构实体Node /** * 链表结构实体类 */ public class Node { Node next = null; //下一节点 int data; //节点数据 public ...

  2. hive学习笔记之-数据类型

    数据类型 Hive基本的数据类型: Hive集合数据类型: 另外还有一个复合数据类型,可以综合上面的数据类型组合到一起. ·          union: UNIONTYPE<data_typ ...

  3. Android 点九图机制讲解及在聊天气泡中的应用

    点九图简介 Android为了使用同一张图作为不同数量文字的背景,设计了一种可以指定区域拉伸的图片格式".9.png",这种图片格式就是点九图. 注意:这种图片格式只能被使用于An ...

  4. jqGrid 日期格式化,只显示日期,去掉小时分

    {name:'operateTime',index:'operateTime', formatter:"date", formatoptions: {newformat:'Y-m- ...

  5. 单线程Redis性能为何如此之高?

    文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 实际项目开发中现在无法逃避的一个问题就是缓存问题,而缓存问题也是面试必问知识点之一,如果面试官好一点可能会简单 ...

  6. vmware配置静态ip

    wmware安装后,默认是动态ip地址. 在测试环境搭建虚拟机后,都需要使用静态ip地址.但是配置固定静态ip地址后,虚拟机总是不能上网和访问网站域名. 原来问题出在配置固定ip后配置的的网关和域名解 ...

  7. 报错:ORA-25150:不允许对区参数执行ALERING

    alter table 表名 MOVE   storage   (     next 128   ) ; -- Add/modify columns alter table 表名 add 列名 var ...

  8. 基于MFCC的语音数据特征提取概述

    1. 概述 语音是人类之间沟通交流的最直接也是最快捷方便的一种手段,而实现人类与计算机之间畅通无阻的语音交流,一直是人类追求的一个梦想. 伴随着移动智能设备的普及,各家移动设备的厂家也开始在自家的设备 ...

  9. DeleteFolder

    import java.io.IOException; import java.net.URI; import java.net.URISyntaxException; /*** * @author ...

  10. 23种设计模式之原型模式(Prototype Pattern)

    原型模式 使用原型实例指定待创建对象的类型,并且通过复制这个原型来创建新的对象 分析: 孙悟空:根据自己的形状复制(克隆)出多个身外身 软件开发:通过复制一个原型对象得到多个与原型对象一模一样的新对象 ...