CSS单位【记录】

lushan 发布于2019-04-23 11:55 / 3493人阅读

摘要：长度角度时间分辨率颜色函数生成内容图像数字长度数字和单位之间没有空格，之后的长度单位是可选的相对长度单位相对于字体大小相对于小写字母的高度，对于很多字体，相对于数字的宽度相对于根元素字体大小相对于视口的宽度，视口宽度的相对于视口的高度，视

1、长度

2、角度

3、时间

4、分辨率

5、颜色

6、函数

7、生成内容

8、图像

9、数字

1、长度

：数字和单位之间没有空格，0之后的长度单位是可选的

相对长度单位

　　em：相对于字体大小

　　ex：相对于小写字母"x"的高度，对于很多字体，1ex ≈ 0.5em

　　ch：相对于数字"0"的宽度 /* IE9+ */

　　rem：相对于根元素字体大小 /* IE9+ */

　　vw：相对于视口的宽度，视口宽度的1/100 /* IE9+ */

　　vh：相对于视口的高度，视口高度的1/100 /* IE9+ */

　　vmin：视口高度和宽度之间的最小值的1/100 /* IE9+ */

　　vmax：视口高度和宽度之间的最大值的1/100 /* IE不支持 */

绝对长度单位

　　cm、mm、1/4毫米（q）、英寸（in）、点（pt）、派卡（pc）、px

　　1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

2、角度

：在、transform的某些方法等场景中有所应用 /* IE9+ */

度（degrees）：一个完整的圆是360deg

梯度（gradians）：一个完整的圆是400grad

弧度（radians）：一个完整的圆是2πrad

圈数（turns）：一个完整的圆是1turn

3、时间

：于animation、transition及相关属性中使用 /* IE9+ */

1s = 1000ms

0是无效的，并不代表0s或0ms

4、分辨率

：用于媒体查询，屏幕通常每英寸包含72或96个点，一般将2倍于此的屏幕称之为高分屏

dpi：每英寸包含点的数量（dots per inch） /* IE9+ */

dpcm：每厘米包含点的数量（dots per centimeter） /* IE9+ */

dppx：每像素包含点的数量（dots per pixel） /* IE9+、Safari不支持、手机不支持 */

1dppx = 96dpi

1dpcm = 2.54dpi

0是无效的，并不代表0dpi、0dpcm或0dppx

5、颜色

：rgb()、hsl()、关键字

hex：#f00，十六进制记法

rgb：rgb(255, 0, 0)

rgba：rgba(255, 0, 0, 1)，IE8可使用IE滤镜处理 /* IE9+ */

hsl：hsl(0, 100%, 50%)，色相-饱和度-明度 /* IE9+ */

hsla：hsl(0, 100%, 50%, 1) /* IE9+ */

关键字

　　色彩关键字

　　transparent：透明 /* IE6+ */

　　currentColor：当前颜色 /* IE9+ */

6、函数

calc()：calc(100% - 20px)， + 和 - 运算符的两边必须始终要有空白符 /* IE9+ */

7、生成内容

counter()：插入计数器 /* IE8+ */

counters()：重复插入计数器 /* IE8+ */

attr()：插入元素属性值 /* IE8+ */

8、图像

： | ，描述的是2D图形

：可使用IE滤镜处理 /* IE10+ */

　　linear-gradient()

　　radial-gradient()

　　repeating-linear-gradient()

　　repeating-radial-gradient()

9、数字

：整数或小数

：整数

：百分比值

GPU云服务器云服务器机柜单位单位域名字体单位单位邮箱

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1361.html

别再被各种单位迷惑：px/em/rem

摘要：引自手册是相对长度单位。所有未经调整的浏览器都符合。特点是新增的一个相对单位，根，这个单位引起了广泛关注。目前，除了及更早版本外，所有浏览器均已支持。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。在他处看到一篇好文章，想记录在自己的学习笔记中，原文作者看到我转载若是介意，联系我立马就删除，附上原文链接：http://www.huolg.net/html5/htm...

teren 2019-08-28 18:26 评论0 收藏0
一个页面从输入URL到加载显示完成，发生了什么？

摘要：询问权威的服务器域名服务器会继续检查请求的下一部分，并将查询指向负责此特定域名的服务器这些权威的服务器将负责了解关于特定域的所有信息，并将信息存储在记录。面试经典题——URL加载一、涉及基本知识点： 1. 计算机网络五层因特尔协议栈：应用层（dns、http）：DNS解析成IP并完成http请求发送；传输层（tcp、udp）：三次握手四次挥手模式建立tcp连接；网络层...

NervosNetwork 2019-08-22 17:15 评论0 收藏0
一个页面从输入URL到加载显示完成，发生了什么？

摘要：询问权威的服务器域名服务器会继续检查请求的下一部分，并将查询指向负责此特定域名的服务器这些权威的服务器将负责了解关于特定域的所有信息，并将信息存储在记录。面试经典题——URL加载一、涉及基本知识点： 1. 计算机网络五层因特尔协议栈：应用层（dns、http）：DNS解析成IP并完成http请求发送；传输层（tcp、udp）：三次握手四次挥手模式建立tcp连接；网络层...

nanchen2251 2019-08-29 15:22 评论0 收藏0
一个页面从输入URL到加载显示完成，发生了什么？

摘要：询问权威的服务器域名服务器会继续检查请求的下一部分，并将查询指向负责此特定域名的服务器这些权威的服务器将负责了解关于特定域的所有信息，并将信息存储在记录。面试经典题——URL加载一、涉及基本知识点： 1. 计算机网络五层因特尔协议栈：应用层（dns、http）：DNS解析成IP并完成http请求发送；传输层（tcp、udp）：三次握手四次挥手模式建立tcp连接；网络层...

LuDongWei 2019-08-02 10:25 评论0 收藏0