文档章节

你不知道的CSS单位

o
 osc_f1goeecw
发布于 2018/04/07 22:27
字数 747
阅读 11
收藏 0

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

CSS中大部分属性值都有对应的量词单位,常见的如描述盒模型尺寸的 width, height, margin, padding, border,又比如CSS3中的transform属性的一些值。下面的导图中基本上包括了所有的单位,下面将详细介绍它们的定义及使用方式。
CSS单位

一、长度单位

1、相对字体长度单位

单位 描述
em 相对于当前元素的字体大小(注意当前元素字体大小可能是继承父元素的)
rem 相对于根元素字体大小(一般根元素就是html元素)
ch 相对于当前使用字体中字符0的宽度,改变font-family其大小会改变
ex 相对于当前字体中字符x的高度,改变font-family其大小会改变

2、相对视口百分比长度单位

单位 描述
vw 1vw等于初始包含块(视口)宽度的1%
vh 1vw等于初始包含块(视口)高度的1%
vmin 1vmin等于vw和vh中较小者的1%
vmax 1vmax等于vw和vh中较大者的1%

补充说明:% ,百分号比较特殊,本质上它不能算CSS长度单位,其值是相对于父元素的相同属性的百分比。

3、绝对长度单位

单位 描述 cm mm in pc pt px
cm centimeter 1cm 10mm
mm millimeter 1/10cm 1mm
q quarter-millimeters 1/40cm 1/4mm
in inch 2.54cm 25.4mm 1in 6pc 72pt 96px
pc pica 1/6in 1pc 12pt 16px
pt point 1/72in 1/12pc 1pt 4/3px
px pixel 1/96in 1/16pc 3/4pt 1px

长度单位的使用场合最广泛,这里就不多介绍了。

长度单位使用场合建议:

媒体类型 推荐 偶尔使用 极少使用 不推荐
Screen em, rem, % px ch, ex, vw, vh, vmin, vmax cm, mm,q,in, pt, pc
Print em, rem, % cm, mm,q,in, pt, pc ch, ex px, vw, vh, vmin, vmax

二、其他单位

1、角度单位

单位 描述
deg degrees(度数),一圈360deg
grad gradians ,一圈400grad
rad Radians(弧度制),一圈2π
turn turn ,一圈为1turn,90°为0.25turn

使用场合

div{
    width: 300px;
    height: 200px;
    background: linear-gradient(180deg, red, blue); /* 标准的语法 */
    transform: rotate(30deg) skew(30deg,20deg);
}

2、时间单位

单位 描述
s Seconds
ms Milliseconds
div
{
    transition: width 2s, height 2s, transform 2s;
    /* transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s; */
}

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

3、频率单位

单位 描述
Hz 每秒发生的次数
kHz 1000Hz

使用场合
频率值使用在听(或说)属性中,有两个单位值,及赫兹和千赫,大部分浏览器并不支持这类属性

strong {
    voice-pitch: 1kHz;
}

4、分辨率单位

单位 描述
dpi 每英寸包含设备像素点个数
dpcm 每厘米包含设备像素点个数
dppx 每逻辑像素点(CSS像素点)包含设备像素点个数,实际上就是设备像素比

使用场合
根据设备像素比设置不同的样式

@media (min-resolution: 2dppx) { 
    ...
}

参考资料
W3C官方文档
The Lengths of CSS
Css units best practices

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
记一次失败的Perl + Nginx + FastCGI 配置过程

这两天心血来潮,不知道为什么和 Perl + Nginx + FastCGI 配置 耗上了。但是失败了,记录如下: 1)安装Nginx 1.4.3 ,我的是WINDOWS 7 系统,修改配置文件如下: location ~ .(pl|cgi|perl)?...

通吃岛-低手哥
2013/10/27
1.6K
7
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

没有更多内容

加载失败,请刷新页面

加载更多

什么是移动语义? - What is move semantics?

问题: I just finished listening to the Software Engineering radio podcast interview with Scott Meyers regarding C++0x . 我刚刚结束了对Scott Meyers进行的有关C ++ 0x的Software En......

技术盛宴
59分钟前
24
0
算法与数据结构体系课

算法与数据结构体系课【超清原画】 下载地址:百度云盘 从0到工作5年,面试、进大厂、搭建知识体系、拓展技术上限 你不再需要其它算法与数据结构课程了 为什么学算法已经是一个不应该问的问题...

1930133570
今天
21
0
如何停止跟踪并忽略对Git中文件的更改? - How to stop tracking and ignore changes to a file in Git?

问题: I have cloned a project that includes some .csproj files. 我已经克隆了一个包含一些.csproj文件的项目。 I don't need/like my local csproj files being tracked by Git (or bei......

富含淀粉
今天
25
0
Redis阻塞

可能存在问题 内在原因:API或数据结构使用不合理、CPU饱和、持久化阻塞等 外在原因:CPU竞争、内存交换、网络问题等 问题处理: API或数据结构使用不合理,可能存在慢查询或者大对象: 发现...

游泳鸟
今天
17
0
OSChina 周五乱弹 —— 来人,上幼儿园老师跳舞的图!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑:《奇跡の海》- 坂本真綾 《奇跡の海》- 坂本真綾 手机党少年们想听歌,请使劲儿戳(这里) 巴蜀(@巴拉迪维)最近有点闹心了, @巴...

小小编辑
今天
64
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部