1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

你可能不知道的7个CSS单位

作者:用户 来源:互联网 时间:2016-12-09 13:34:13

元素单位pxheightThefont-size

你可能不知道的7个CSS单位 - 摘要: 本文讲的是你可能不知道的7个CSS单位, 如果你是一名前端开发工程师,一般px和em使用频率比较高。但是今天本文的重点是介绍一些我们使用很少、甚至么有听说的单位。 一、重温em <style

如果你是一名前端开发工程师,一般px和em使用频率比较高。但是今天本文的重点是介绍一些我们使用很少、甚至么有听说的单位。

一、重温em

<style type="text/css">
    body {font-size: 12px;}
    div  {font-size: 1.5em;}
</style>
<body>
    <div>
        Test-01 (12px * 1.5 = 18px)
        <div>
            Test-02 (18px * 1.5 = 27px)
            <div>
                Test-03 (27px * 1.5 = 41px)
            </div>
        </div>
    </div>
</body>

因为font-size具有继承性,所以层数越深字体越大。

二、rem

虽然上面使用em的情况可能会在开发中用到,但是我们有时候想有一个基准来扩展。遇到这种需求时,我们可以使用rem单位,rem中的“r”代表“root”,这意味着设置当前元素的字体大小为根元素,大多数情况下,我们会设置在html元素上。

<style type="text/css">
    html {font-size: 12px;}
    div  {font-size: 1.5rem;}
</style>
<body>
    <div>
        Test-01 (12px * 1.5 = 18px)
        <div>
            Test-02 (12px * 1.5 = 18px)
            <div>
                Test-03 (12px * 1.5 = 18px)
            </div>
        </div>
    </div>
</body>

当然,rem单位不仅应用在字体上,还可以实现到CSS 网格系统中。

三、vh 和 vw

在进行响应式布局时,我们常常会使用百分比来布局,然而CSS的百分比不总是解决每个问题的最佳方案,CSS的宽度相对于离它最近的父元素的宽度。 如果你想使用视口的宽度、高度而不是父元素的宽高,可以使用vh和vw单位。 1vh = viewportHeight * 1/100; 1vw = viewportWidth * 1/100; 使用vh、vw就可以保证元素的宽高适应不同设备。

四、vmin 和 vmax

vw和vh对应于viewport的width和height,而vmin和vmax分别对应于width、height中的最小值和最大值,例如如果浏览器的宽/高被设置为1000px/600px,那么

1vmin = 600 * 1/100;

1vmax = 1000 * 1/100;

下面我们来看看几个实例:

4.1 一个正方形元件总是触摸至少两个屏的边缘

<style type="text/css">
.box {
    height: 100vmin;
    width : 100vmin;
}
</style>
<body>
    <div class="box" style="background-color: #f00">
        fdasjfdlas
    </div>
</body>

4.2 覆盖全屏

<style type="text/css">
    body {
        margin: 0;
        padding:0;
    }
    .box {
        /*宽屏显示器width > height*/
        height: 100vmin;
        width : 100vmax;
    }
</style>
 
<div class="box" style="background-color: #f00">
    fdasjfdlas
</div>

五、ex 和 ch

ex、ch单位与em、rem相似之处在于都依赖于font-size,但是ex、ch还依赖于font-family,基于font-specific来计算。 引用w3C规范:

ex unit Equal to the used x-height of the first available font. [CSS3-FONTS] The x-height is so called because it is often equal to the height of the lowercase "x". However, an ‘ex’ is defined even for fonts that do not contain an "x". The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristic is to look at how far the glyph for the lowercase "o" extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em must be assumed.
ch unit Equal to the used advance measure of the "0" (ZERO, U+0030) glyph found in the font used to render it.  

用一副图来解释这两种单位的含义:

你可能不知道的7个CSS单位-你不知道的css3

这两种单位,有许多用途,大部分是用于印刷时的微调整。例如,sup、sub元素分别显示上标和下标,但是我们可以使用position和bottom模拟:

<style type="text/css">
body {
    margin: 0;
    padding:0;
}
 
.sup {
    position: relative;
    bottom: 1ex;
}
.sub {
    position: relative;
    bottom: -1ex;
}
</style>
<div>
    AaB<span class="sup">b</span>CcXxD<span class="sub">d</span>EeFf
</div>



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索元素 , 单位 , px , height , The font-size 你不知道的css3、判了缓刑单位还不知道、经办人不知道单位票据、醉驾后单位不知道、iphone7不知道的功能,以便于您获取更多的相关知识。

扩展-css中的属性特别多,需要全部记好吗?

...方案 表示我CSS书看了2本了,想全部都熟悉完全是不可能的事,知道个大概,用的时候再详细研究。个人意见仅供参考 解决方案二: 感觉这就是一个由了解到熟悉的过程,常用的用的多了,就印在心里了,下意识就能...

容易忽略的七个CSS非常有用的单位

今天,我将要向你介绍一些你以前可能不知道的CSS工具。这些工具都是计量单位,就像像素或者相对单位,但是很可能你从来没听说过它们!让我们一探究竟吧。rem我们将从你已经熟悉的东西开始。em单位被定义为当前字体大小。...

CSS3的REM设置字体大小

...素的值,要么呢在任何子元素中都使用“1em”。这样一来可能又不是我们所需要的方法。 这里我只是简单的介绍了一个这两个单位的使用,具体一点的大家可以参阅:Best Practices的站长Kyle的《CSS Font-Size: em vs. px vs. pt vs. percent》 ...

LESS介绍,和与Sass的比较

...并且可以避免浏览器不能运行JavaScript带来的问题。虽然可能性很小,但总是有可能的。 更 新:上面的论述引起了热烈的讨论,甚至在Twitter上也有相关的争论。请大家同时也考虑Adam Stacoviak的回复“现实是Sass需要Ruby,但是,它...

em和px区别

...(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因 为有一部法律来约束他们—例如美国的Section 508,强制网站达到一定的易用性。       关键点:   1. IE无法调整那些使用px作为单位的字体大小;  2. 国外...

前三篇
后三篇