文档章节

css 单位

w-rain
 w-rain
发布于 2016/08/19 13:04
字数 1297
阅读 114
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

css 尺寸单位

绝对长度

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)。

px(pixel)像素,绝对单位,px是相对显示器屏幕分辨率而言的,(1px = 1/96th of 1in)。

pt(point)磅,是印刷行业常用单位,(1pt = 1/72in) 等于1/72英寸,它是自然界标准的长度单位,也称为“绝对长度”。

pc(pica),派卡,大约6pt,1/6寸,(1pc = 12 pt)。

in, 英寸,(1in = 96px = 2.54cm)。

cm,厘米。

mm,毫米。

相对长度

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

em是相对单位,它不是一个具体的数值,是基准点为父节点字体的大小,即%,在css中,1em = 100%,它是一个比率,结合css继承关系使用。如果自身定义了font-size按自身来算,默认浏览器字体为16px,整个页面的1em都不一样,因为它会继承父级的字体大小(移动端布局使用比较合适)。在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。

rem,css3中新增的一个相对单位,相对于根元素(html)字体大小来计算,可谓 root em(浏览器IE9+)。这个单位集绝对单位和相对单位的优点于一身,通过它可以只设置根元素就成比例地调整所有字体大小,又可避免字体大小逐层复合的连锁反应。如果要兼容(IE6-8),同时使用px设置字体就行。

vw(viewpoint width)视窗宽度,1vw等于视窗宽度的1%。

vh(viewpoint height)视窗高度,1vh等于视窗高度1%。

vmin,vw和vh中较小的那个。

vmax,vw和vh较大的那个。

ex,取当前作用效果的字体x的高度(x-height),在不确定x高度的情况下以0.5em计算(IE11及以下不支持),x-height通常是字体尺寸的一半。

ch,通常是数字“0”的宽度,找不到时为0.5em(IE10+)。

%,百分比。

注意!!!

chrome不支持中文字体小于12px,所以会导致当计算小于12px的时候,会默认取12px去计算,导致中文版chrome的rem计算不准确。

使用em时,所有未经调整的的浏览器都符合:1em = 16px, 12px = 0.75em, 10px = 0.625em,为了简化font-size的计算,需要在css中body元素中声明 font-size=62.5%,这就使 em的值为16*0.625 = 10px,这样将你的原来的px数值除以10,然后换上em作为单位,重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

 

css 颜色单位

直接写颜色名,如红色(color:red)。

rgb(x,x,x), RGB 值 (比如 rgb(255,0,0))。rgb(%,%,%), RGB 百分比值 (比如 rgb(100%,0%,0%))。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。

rgba(ed, green, blue, alpha), alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

hsl(hue, saturation, lightness),hsl指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值;0% 是黑色,100% 是白色。

hsla(hue, saturation, lightness, alpha), hsla颜色值是 hsl 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

#rrggbb, 十六进制数 (比如 #ff0000)。

预定义/跨浏览器颜色名, HTML 和 CSS 颜色规范中定义了 147 中颜色名(17 种标准颜色加 130 种其他颜色),查看标准颜色列表

 

css 时间单位

m(秒)。

ms(毫秒)。

 

css 其他单位

PPI(Pixels Per Inch)像素密度,所表示的是每英寸所拥有的像素数量,图像分辨率单位,因此PPI数值越高,即代表显示屏能够以越高的密度显示图像。当然,显示的密度越高,拟真度就越高。

角度单位

rad(Radians)弧度,一个圆有2π弧度。

grad(Gradians)梯度,一个圆有400梯度。

turn(Turns)轮、圈,一个圆共一圈。

deg(Degress)度,一个圆360度。  

注意!!!: 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad。

 

参考资料:

@Jonathan Cutrell  《7 CSS Units You Might Not Know About

W3CHTML CSS单位

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

 

版权申明: 本文为原创文章, 转载时请注明:来自w-rain的个人博客

 

w-rain
粉丝 26
博文 56
码字总数 50694
作品 0
成都
程序员
私信 提问
加载中
请先登录后再评论。
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.8K
1
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2
网页抓取工具 --pyrailgun

这是一个非常简单易用的抓取工具 怎么使用? 首先你需要创建一个对应站点的规则文件 比如test.json { } 然后在代码里面把它作为一个任务加入到railgun from railgun import RailGun railgun =...

baizhongwei
2013/02/28
7.8K
0
Chrome页面自动刷新插件--smartF5

smartF5是一款chrome插件,用以实现监控页面资源,并自动刷新。 特别适合双屏情况下的DEMO开发,大大提高页面开发效率。 让你键盘上的F5键退休吧! 为什么选择smartF5 本插件具有以下特色: ...

YanisWang
2013/04/04
1.2W
0
jQuery仿亚马逊风格图片滚动插件--amazon_scroller.js

亚马逊是美国甚至是全世界最大的网络电子商务公司,它的网站也相对简单,不花哨。这款图片滚动效果正是模仿自亚马逊网站,自定义参数比较多,可以设置图片滚动间隔、是否显示标题、图片大小、...

dowebok
2013/04/04
2.2K
1

没有更多内容

加载失败,请刷新页面

加载更多

数据获取的小技巧

在大数据如此火的时代,我们要获取更多数据,就要进行数据采集,过滤,然后再进行使用。比如当我们在进行一个项目并且需要大量真实数据时,就需要通过爬虫去获得,有些爬取额数据还不能直接使用,...

xiaotaomi7
48分钟前
21
0
docker cp 容器和虚拟机间的数据拷贝

容器复制到主机 docker cp {container_name}:{source_path} {target_path}#例子: docker cp php:www/php.ini /home/alex/php.ini 主机复制到容器 docker cp {source_path} {container_nam......

关元
57分钟前
25
0
spring boot整合kafaka批量消费

spring boot整合kafaka批量消费: 配置文件: kafka: producer: bootstrap-servers: 127.0.0.1:9092 batch-size: 16785 #一次最多发送数据量 retries: 1 #发送失败后的重复发送次数 buffer-m...

漫步行者
今天
7
0
最新苹果多屏电脑控制技术---ios群控/苹果群控/一键实时同步操作/入门安装步骤以及功能讲解

创联苹果群控是一款通过无线发送命令来操作主控手机来带动全部被控手机,主控手机怎么操作被控手机全部同步进行相同操作,支持一键每台手机输入不一样的文字!无需连接USB数据线、无需XP框架...

osc_bodzcw38
今天
10
0
NOIP模拟赛 编码

题目描述 一个字符串str的p型编码a的定义如下:把str表示成b1个c1,b2个c2…bn个cn,然后将b1,c1,b2,c2,…,bn,cn收尾拼接成的字符串中最短的字符串设为a。例如:字符串122344111可被描述为"1个...

osc_wcs4pa6z
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部