CSS入门13-单位详解

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1. 简介

CSS中有很多属性会涉及到长度,比如 width, margin, padding, font-size, border-width等。这些长度由数字和单位组成,数字和单位之间是没有空格的。长度单位的类型有两种:绝对长度单位和相对长度单位。

2. 绝对长度单位

绝对长度单位的含义,就是客观上绝对存在的单位,放在任何地方都一样。

  1. 像素px 最常见的单位,很多其他单位都会最终映射成像素。这个单位我们会在后面详细解析。
  2. 英寸in 1in = 2.54cm = 96px
  3. 厘米cm 1cm = 10mm = 96px/2.54 = 37.8px
  4. 毫米mm 1mm = 0.1cm = 3.78px
  5. 1/4毫米q 1q = 1/4mm = 0.945px
  6. 点pt 1pt = 1/72in = =0.0139in = 1/722.54cm = 1/7296px = 1.33px 7.派卡pc 1pc = 12pt = 1/6in = 1/6*96px = 16px

3. 相对长度单位

3.1 相对字体大小的长度单位

3.1.1 em

em相对于应用在当前元素的字体尺寸。如果用于font-size属性本身,相对于父元素的font-size计算;若用于其他属性,相对于元素本身的font-size计算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1</title>
    <style>
        .outer {
            font-size: 20px;
        }
        .div1 {
            /*相对于父元素,大小为40px*/
            font-size: 2em;
            /*相对元素本身,高度为5*40=200px*/
            height: 5em;
            background-color: green;
        }
        .div2 {
            /*相对于父元素,高度为5*20=100px*/
            height: 5em;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1">div1</div>
    <div class="div2">div1</div>
</div>
</body>
</html>

3.1-1

3.1-2

3.1.2 rem

rem相对于根元素的字体尺寸。IE8不兼容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1.2-1</title>
    <style>
        html {
            /*浏览器默认字体大小16px,所以根元素字体大小2*16=32px*/
            font-size: 2rem;
        }
        .outer {
            /*字体大小3*32=96px*/
            font-size: 3rem;
        }
        .div1 {
            /*字体大小32px*/
            font-size: 1rem;
            /*高度5*32=160px*/
            height: 5rem;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1">div1</div>
</div>
</body>
</html>

3.1.2-1

但是根部元素设置成rem或者使用默认大小不方便计算,所以一般将根部元素字体大小设置为100px。为什么不是10px呢,因为chrome下字体大小最小为12px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1.2-2</title>
    <style>
        html {
            /*根元素字体大小100px*/
            font-size: 100px;
        }
        .outer {
            /*字体大小0.2*100=20px*/
            font-size: 0.2rem;
        }
        .div1 {
            /*字体大小0.2*100=20px*/
            font-size: 0.2rem;
            /*高度0.5*100=50px*/
            height: 0.5rem;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1">div1</div>
</div>
</body>
</html>

3.1.2-2

3.1.3 ex

ex是指所用字体中小写x的高度,不同字体x的高度可能不同。实际上,很多浏览器取em值一半作为ex值。

ex在实际中常用于微调。

3.1.4 ch

ch与ex类似,被定义为数字0的宽度。当无法确定数字0宽度时,取em值的一半作为ch值。

IE8-不支持。

ch在实际中主要用于盲文排版。

3.2 相对视窗宽高的长度单位

视窗相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时,它们都会相应地缩放。然而,当根元素的overflow值为auto时,任何滚动条会假定不存在。

关于视窗相关的单位有vh、vw、vmin、vmax4个单位。

兼容性上,IE8-不支持,IOS7.1-不支持,android4.3-不支持。(对于vmax,所有IE浏览器都不支持)

另外,黑莓错误的将其相对于视觉视窗来计算。而safari奇怪地相对于html元素来计算,如果html中增加了内容,这两个单位也会发生变化。

3.2.1 vh

布局视窗高度的1/100 设置height:100vh;可以达到与屏幕等高的效果。

3.2.2 vw

布局视窗宽度的1/100 设置width:100vw;可以达到与屏幕等宽的效果。

3.2.3 vmin

布局视窗高度和宽度之间的最小值的 1/100 设置height: 100vmin;width: 100vmin;可以达到类似于contain的效果。

3.2.4 vmax

布局视窗高度和宽度之间的最大值的 1/100 设置height: 100vmax;width: 100vmax;可以达到类似于cover的效果。

参考

runoob.com css单位 深入理解CSS中的长度单位

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏jojo的技术小屋

原 荐 CSS3 transform 引起z

作者:汪娇娇 时间:2017年9月5日 单纯的z-index,可以通过设置数值的大小来决定层级的高低,但一涉及transform,z-index就失效了,为什么...

3238
来自专栏专注数据中心高性能网络技术研发

[Python]Matplotlib绘图基础

1.简介 Matplotlib 是一个 Python 的 2D绘图库,它以各种硬拷贝格式和跨平台的交互式环境生成出版质量级别的图形。 ---- 2.绘图基础 2...

4057
来自专栏前端黑板报

纯CSS实现宽高相等(或者其他比例)

动态实现宽高相等以及其它比例,一般使用的是JS。这次介绍一种使用纯CSS实现的方法。 基础结构与样式: 1 2<div class="box"> </div> ...

2967
来自专栏Python小屋

Python实现批量图片添加数字水印

之前写过一个类似的代码,是把水印信息打散以后随机添加到原图中,并提供了水印信息的提取功能,请参考:Python实现图像空域随机水印加入与提取。本文代码功能:为指...

3873
来自专栏Create Sun

highcharts 系统梳理笔记

前言    highcharts最早接触它是在4年前,后来项目中很少用到图表这些东西,就算有也是用echart。他们思路都一样自己去官网上看api即可,构造数据...

4556
来自专栏大数据挖掘DT机器学习

信息图制作教程案例

当大家看到很多好看的信息图的时候最喜欢问的两个问题是:用什么软件做的?怎么做的? 在工具选择上,使用Adobe Illustrator,制作过程大家...

3817
来自专栏腾讯IVWEB团队的专栏

SVG 动画精髓(下)

线条动画 SVG 中的线条动画常常用作过渡屏(splash screen)中。例如:一些比较炫酷的 LOGO 和 炫酷的效果,大家有没有动心想学一学,看看自己到...

5340
来自专栏黒之染开发日记

【easeljs】显示对象基础 DisplayObject 类

DisplayObject is an abstract class that should not be constructed directly. Inst...

933
来自专栏jojo的技术小屋

原 荐 CSS3 transform 引起z

1804
来自专栏WindCoder

20种常用的 Ps技术

一种简单的数码照片后期润饰 1 打开图片,执行色像/饱和度(-40)降低饱和度。 2 新建一图层,将图层模式改为柔光,用画笔工具将需要润饰的部分画几下,这里...

1461

扫码关注云+社区