文档章节

7个CSS单位

i
 imdoom
发布于 2015/03/31 23:30
字数 1324
阅读 8
收藏 0

rem

em 被定义为相对于当前对象内文本的字体大小。如果你给body设置了font-size字体大小,那么body的任何子元素的1em就是等于body设置的font-size。

<body>
    <div class="test">Test</div>
</body>
body{
    font-size: 14px;
    }
div{
    font-size: 1.2em; /* calculated at 14px * 1.2, or 16.8px */
}

这里div的字体大小是1.2em。解释来说,就是他从body那里继承的字体大小(这里是14px)的1.2倍,结果就是16.8px。

但是,如果你用em一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢?在下面这一小段代码里我们应用了和上面一样一样的CSS,每一个div都从它上一级父元素继承了字体大小,并且逐渐得增加。

<body>
    <div> Test <!-- 14 * 1.2 = 16.8px --> 
        <div>Test <!-- 16.8 * 1.2 = 20.16px --> 
            <div> Test <!-- 20.16 * 1.2 = 24.192px --> </div>
        </div> 
    </div>
</body>

实例
虽然在某些地方这正是我们想要的,但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候我们就可以使用 rem 了。 ‘r’是“root”的缩写,意思就是1rem等于根元素的字体大小;大部分情况下,根元素就是<html>元素了。

html{
    font-size: 14px;
}
div{
    font-size: 1.2rem;
}

这样在上面的那三个嵌套的div的字体大小都是 1.2*14px = 16.8px 了。

适用于网格布局

Rems 不仅仅只是在设置字体大小上很方便。你可以用基于html根元素字体大小的rem作为整个网格布局或者UI库的大小单位,然后在其他特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性,

.container{
    width: 70rem; /* 70 * 14px = 980px */
}

.container { width: 70rem; // 70 * 14px = 980px}

概念上来说,这个方法的思想就是让你的界面根据你的内容进行缩放。但是,这样做并不是对所有的情况都有意义。

vh and vw

响应式web设计离不开百分比。但是,CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该肿么办? 这就是 vh 和 vw 单位为我们提供的。

1vh 等于1/100的视口高度。栗子:浏览器高度900px, 1 vh = 900px/100 = 9 px。同理,如果视口宽度未750, 1vw = 750px/100 = 7.5 px。

可以想象到的,他们有很多很多的用途。比如,我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。

.slide{
    height: 100vh;
}

假设你要来一个和屏幕同宽的标题,你只要设置这个标题的font-size的单位为vm,那标题的字体大小就会自动根据浏览器的宽度进行缩放,以达到字体和viewport大小同步的效果!

vmin and vmax

vh和 vm 依据于视口的高度和宽度,相对的,vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如,浏览器的宽度设置为1100px,高度设置为700px, 1vmin = 1px, 1vmax = 11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。
那么问题来了,我们应该在什么场景下使用这两个单位呢?
假设有一个元素,你需要让它始终在屏幕上可见。只要对其高度和宽度使用vmin单位,并赋予其低于100的值就可以做到了。再来个栗子,可以这样定义一个至少有两个边触摸到屏幕的方形:

.box{
    height: 100vmin;
    width: 100vmin;
}

如果你要让这个方形框框始终铺满整个视口的可见区域(四边始终触摸到屏幕的四边)

.box{
    height: 100vmax;
    width: 100vmax;
}

结合使用这些单位可以为我们提供一个新颖有意思的方式来灵活地利用我们视口的大小。

ex and ch

ex 和 ch 单位,类似于 em 和 rem, 依赖于当前的字体和字体大小。 但是,不同的是,这两货是基于字体的度量单位,依赖于设定的字体。

ch 单位通常被定义为数字0的宽度。例如将一个等宽字体的字母N的宽度设置为40ch,那么在另一种类型的字体里它却可以包含40个字母。这个单位的传统用途主要是盲文的排版,但是除此之外,肯定还有可以应用他的地方。

ex 定义为当前字体的小写x字母的高度或者 1/2 的 1em。 很多时候,它是字体的中间标志。

这些单位有很多用途,大部分用于版式的微调。比方说,sup 元素(上角文字标),可以通过position:relative;bottom: 1ex; 实现 。类似的方法,你可以实现一个下角文字标。浏览器默认的方式是利用
上标和下标特定垂直对齐规则,但是如果你想更细粒度更精确得控制,你可以像下面这样做:

sup{
    position: relative;
    bottom: 1ex;
}
sub{
    position: relative;
    bottom: -1ex;
}


本文转载自:http://j.news.163.com/docs/99/2014111814/ABBB78BG00964KGG.html

共有 人打赏支持
i
粉丝 0
博文 1
码字总数 0
作品 0
郑州
(转)8款在线CSS优化工具/组织和压缩CSS

CSS的优化通常包括两方面: 格式化CSS和精简CSS。 精简CSS的办法是把具有相同属性的元素合并在一起,但这会降低代码的可读性,使代码的后期维护很麻烦,稍不注意就出错。 格式化CSS一般就是多...

林文安
2012/05/17
0
0
css 单位

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

w-rain
2016/08/19
63
0
textarea自适应高度插件--textareaAutoHeight

使用方法: 0. 检查CSS文件中所有textarea的line-height值, 若是纯数字, 给它加上单位em, 如: 1.5em. 否则IE(6|7|8)下插件失效. 1. 加载jQuery库(1.4+) 2. 加载textareaAutoHeight.js 3. 使用...

JE
2011/11/15
2.5K
0
7个你可能不认识的CSS单位

众所周知CSS技术我们虽然很熟悉,在使用的过程却很容易被困住,这让我们在新问题出现的时候变得很不利。 随着web继续不断地发展,对于新技术新解决方案的要求也会不断增长。因此,作为网页设...

WolfX
2016/02/17
8
0
CSS字体单位

一、前言 在CSS样式中,当文本缩放的时候使用font-size属性是最难以理解的方面之一。在CSS中,你有4种不同的选择,能够让你设置文本在浏览器中的展示。那么这4种单位哪一种更适合呢?这个问题...

卢林
2016/09/25
4
0

没有更多内容

加载失败,请刷新页面

加载更多

ajax 提交返回map集合 获取不到值

后台java代码 @RequestMapping("/cameraList") @ResponseBody public Map<String, Object> cameraListForPage(@RequestParam(defaultValue = "1", value = "page") Integer page......

S三少S
21分钟前
43
3
TypeScrip最污的技术课-技术胖TypeScript图文视频教程

近日Node.js之父瑞安达尔(Ryan Dahl)发布新的开源项目 deno,从官方介绍来看,可以认为它是下一代 Node,使用 rust 语言代替 C++ 重新编写跨平台底层内核驱动,上层仍然使用 V8 引擎,最终...

JamesView
23分钟前
7
0
Es学习笔记

1.过滤排重聚合查询 筛选出某一个聚合值的个数统计。相当于mysql的distinct. 关键字:cardinality "aggs": { "2":{ "cardinality": { "field": "field" } ...

Gmupload
25分钟前
1
0
h5语义化标签

语义化HTML:用最恰当的HTML元素标签做恰当的事情。 优点: 提升可访问性; SEO; 结构清晰,利于维护; 通用容器:div——块级通用容器;span——短语内容无语义容器。 <title></title>:简...

莫西摩西
31分钟前
1
0
修改11g rac中 asm diskstring的发现路径

问题 : 如果我 们asm_disking以前是/dev/oracleasm/disks/* ,并且现在已经有磁盘组再用这个磁盘串了,那么,我们无法直接修改这个发现串为 ORCL:*,修改会报错,提示存在的磁盘无法使用新的...

tututu_jiang
34分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部