文档章节

7个CSS单位

i
 imdoom
发布于 2015/03/31 23:30
字数 1324
阅读 8
收藏 0
点赞 0
评论 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;
}


© 著作权归作者所有

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

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

林文安 ⋅ 2012/05/17 ⋅ 0

css 单位

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

w-rain ⋅ 2016/08/19 ⋅ 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 ⋅ 0

7个你可能不认识的CSS单位

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

WolfX ⋅ 2016/02/17 ⋅ 0

CSS字体单位

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

卢林 ⋅ 2016/09/25 ⋅ 0

7个你可能不认识的CSS单位

原文出处:Jonathan Cutrell 译文出处:Emma 众所周知CSS技术我们虽然很熟悉,在使用的过程却很容易被困住,这让我们在新问题出现的时候变得很不利。 随着web继续不断地发展,对于新技术新解...

Jonathan Cutrell ⋅ 2014/11/18 ⋅ 0

web前端初学者必看css技巧规范(转)

1、善用css缩写可以减少页面文件大小,提高下载速度,同时使代码简洁可读。 如: 1. border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px soli #cccccc; borde...

乐派电影 ⋅ 2014/01/11 ⋅ 2

CSS垂直居中

44年前我们把人送上月球,但在CSS中我们仍然不能很好实现垂直居中——@James Anderson 让一个元素水平居中对于CSS来说非常简单:如果是一个内联元素,我们可以在他的父元素上设置text-align:...

WolfX ⋅ 2016/04/25 ⋅ 0

从 CSS Lint 出发,谈样式优化

原文出处:http://ued.sina.com/?p=593 CSS Lint,lint是线头的意思,大概意思就是说要找出我们写的css代码里的一些线头,help you code better! CSS Lint的检测规则包括错误的和警告,当选择...

小编辑 ⋅ 2011/09/28 ⋅ 2

CSS学习笔记

1.属性名称必须小写 2.属性值必须使用双引号括起来 3.不允许使用属性简写 4.使用id代替name 5.必须使用结束标签 6.类型选择符同样属性后赋值生效,例如 <style> p { text-align: center; co...

岭南六少 ⋅ 2011/08/03 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

懒惰根本就不存在

简评:芝加哥大学心理学教授,懒惰根本就不存在。(本文表面讲行为心理学实则讲教育) 金句:以好奇而不是判断来回应一个人的无效行为,是非常有帮助的。 本文「我」代表原作者 E Price。 自...

极光推送 ⋅ 31分钟前 ⋅ 0

Excel提取单元格中最后一个“.”后面的数据

java.lang.String ----- String =TRIM((MID(SUBSTITUTE(B2,".",REPT(" ",99)),(LEN(B2)-LEN(SUBSTITUTE(B2,".","")))*99,99)))...

klog ⋅ 33分钟前 ⋅ 0

mac远程桌面

下载安装remote-desktop-mac Mac beta 客户端 mac通过远程桌面访问windows服务器。

亚林瓜子 ⋅ 37分钟前 ⋅ 0

firrtl

动手---sbt(2)之后,再回头看 chisel第一个实验,根据 https://github.com/freechipsproject/firrtl 发现firrtl没有执行sbt assembly命令,重新执行这个命令,结果成功。如下图: joe@joe-As...

whoisliang ⋅ 41分钟前 ⋅ 0

NIO

一、通道(Channel):用于源节点与目标节点的连接。在 Java NIO 中负责缓冲区中数据的传输。Channel 本身不存储数据,因此需要配合缓冲区进行传输。 二、通道的主要实现类 java.nio.channel...

stars永恒 ⋅ 42分钟前 ⋅ 0

Android悬浮窗的实现

0. 前言   现在很多应用都使用到悬浮窗,例如微信在视频的时候,点击Home键,视频小窗口仍然会在屏幕上显示。这个功能在很多情况下都非常有用。那么今天我们就来实现一下Android悬浮窗,以...

猴亮屏 ⋅ 42分钟前 ⋅ 0

日志采集中的关键技术分析

概述 日志从最初面向人类演变到现在的面向机器发生了巨大的变化。最初的日志主要的消费者是软件工程师,他们通过读取日志来排查问题,如今,大量机器日夜处理日志数据以生成可读性的报告以此...

tqyin ⋅ 43分钟前 ⋅ 0

使用Navicat将数据导出为text文本 然后再导入

将数据导出为text文本效率很高 1. 准备工作 1.1 准备表结构 1.2 目标库 执行生成表结构sql 2.将表数据导出为text文本 生成的text文本 3. 目标库 导入text 4.效果...

Lucky_Me ⋅ 49分钟前 ⋅ 0

IntelliJ IDEA 乱码解决方案 (项目代码、控制台等)

文章介绍了idea下,项目乱码、控制台乱码及运行tomcat控制台乱码的解决方案,文章链接:https://www.cnblogs.com/vhua/p/idea_1.html

Funcy1122 ⋅ 52分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 57分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部