CSS单位【记录】
2019-01-08 08:22:38来源:博客园 阅读 ()
1、长度
2、角度
3、时间
4、分辨率
5、颜色
6、函数
7、生成内容
8、图像
9、数字
1、长度
<length>:数字和单位之间没有空格,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、角度
<angle>:在<gradient>、transform的某些方法等场景中有所应用 /* IE9+ */
度(degrees):一个完整的圆是360deg
梯度(gradians):一个完整的圆是400grad
弧度(radians):一个完整的圆是2πrad
圈数(turns):一个完整的圆是1turn
3、时间
<time>:于animation、transition及相关属性中使用 /* IE9+ */
1s = 1000ms
0是无效的,并不代表0s或0ms
4、分辨率
<resolution>:用于媒体查询,屏幕通常每英寸包含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、颜色
<color>: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、图像
<image>:<url> | <gradient>,描述的是2D图形
<gradient>:可使用IE滤镜处理 /* IE10+ */
linear-gradient()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
9、数字
<number>:整数或小数
<integer>:整数
<percentage>:百分比值
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:CSS概念【记录】
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash