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 ...
随机推荐
- spring boot整合kafka
最近项目需求用到了kafka信息中间件,在此做一次简单的记录,方便以后其它项目用到. 引入依赖 <dependency> <groupId>org.springframewor ...
- php装上sqlserver驱动后仍然显示Call to undefined function sqlsrv_connect()问题
今天老师要求本来的php+mysql改为php+sqlserver,在网上搜索了相应的教程,说是“需要下载安装Microsoft Drivers for PHP for SQL Server驱动”,下 ...
- ckeditor中 config.js等通过ckeditor.js引入文件手动修改方法
因为除了ckeditor.js之外的引用文件是通过ckeditor.js自动添加<script>或<link>标签实现文件的引入,引入的根目录是展示页面的地址.有时需要手动修改 ...
- spring使用ehcache实现页面缓存
ehcache缓存最后一篇,介绍页面缓存: 如果将应用的结构分为"page-filter-action-service-dao-db",那page层就是最接近用户的一层,一些特定的 ...
- 初学Spring的感觉
1.使用接口 不同的类实现同一接口后都会变成同一类型的类. spring作业1的思路 lab1: 建立一个有一个输出方法的接口类|并建一个英语类和一个数学类实现该接口. 这两个实现类都重写了那 ...
- 为elastic的索引做快照并恢复快照到新集群
1. 为指定的所有做快照 curl -XPUT "192.168.1.1:9200/_snapshot/my_backup/testindex_20170803?wait_for_compl ...
- 第九周java动手动脑
1.使用Files. walkFileTree()找出指定文件夹下所有扩展名为.txt和.java的文件. import java.io.IOException; import java.nio.fi ...
- Centos7搭建Scrapy爬虫环境
写在前面 因为之前的爬虫环境一直是部署在我自己本地的电脑上的,最近,写了一个监控别人空间的爬虫,需要一直线上24小时运行,所有就打算云服务器上部署环境,也捣鼓了好一会才弄好,还是有一些坑,这里先记录一 ...
- WPS删除多余空白页
WPS删除多余空白页 在实际工作中,我们在操作WPS文字的时候常常会遇到一种问题,就是当在文字占满整页的时候,文档常常会多出一页空白页的现象.如图1 图 1 对于WPS文字怎么删除空白页这个问题, ...
- 深入理解什么是Java泛型？泛型怎么使用？【纯转】
本篇文章给大家带来的内容是介绍深入理解什么是Java泛型?泛型怎么使用?有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助. 一.什么是泛型 “泛型” 意味着编写的代码可以被不同类型的对象所 ...