CSS的长度、角度、时间

最新推荐文章于 2021-08-04 06:23:29 发布

RainMcCom

最新推荐文章于 2021-08-04 06:23:29 发布

阅读量492

点赞数

分类专栏： Html5学习文章标签： css

本文链接：https://blog.csdn.net/RainMcCom/article/details/77949657

版权

Html5学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

许多CSS属性都需要设置长度值，比如我们之前用过的width和font-size属性，下面是一个简单的Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
      p{
          background-color: red;
          color: white;
          font-size: 20pt;
          width: 10cm;
      }
    </style>
</head>
<body>
<p>不能说的秘密</p>
<p>不是<span>真正</span>的快乐</p>



</body>
</html>

效果如下：
这里写图片描述

上述的两个长度单位都是绝对长度。CSS中的长度分为相对长度和绝对长度。

1.绝对长度

绝对长度是现实世界的度量单位。CSS支持五种绝对单位：
这里写图片描述

如果事先知道内容的样式，使用绝对长度可能比较方便。但在大部分情况下，还是使用相对长度比较好。

2.相对长度

相对长度在实现上远比绝对长度复杂，需要严密、精确的语义去定义它们，不仅如此，它们还依托于其他单位。目前一些相对长度单位还没有得到浏览器的支持，下面看一些主流浏览器支持的相对长度单位：
这里写图片描述

下面具体看一下这些单位具体的使用。

（1）字号挂钩的相对单位
使用相对单位的设置值实际上是另一种度量值的倍数。将上面的例子进行修改：

 <style type="text/css">
      p{
          background-color: red;
          color: white;
          font-size: 20pt;
          width: 10cm;
          height: 2em;
      }
    </style>

效果如下：
这里写图片描述
这个例子中将height属性设置为2em，意思就是p元素显示的高度为字号的2倍。

相对单位还可以用来表示另一个相对单位的倍数。下面看一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       html{
           font-size: 0.2in;
       }
      p{
          background-color: red;
          color: white;
          font-size: 2rem;
          width:20cm;
          height: 2em;
      }
    </style>
</head>
<body>
你不是真正的快乐<br>
<p>不能说的秘密</p>
<p>不是<span>真正</span>的快乐</p>
</body>
</html>

看一下效果：
这里写图片描述

rem单位是根据html元素（根元素）的字号定的。本例中，html元素的字号大小为0.2in，则p元素的font-size属性值为0.4in，height属性值则是再翻一番，为0.8in。

第三个与字体相关的相对单位是ex。这个单位指的是当前字体的x高度，也就是字体基线到中线之间的距离，一般与字母x的高度相当，通常1ex大致等于05em。把上面的例子中2em改成2ex，看一下效果：
这里写图片描述
可以看到2ex大致等于1em。

（2）像素单位的问题

像素这个术语一般是指显示设备上可寻址的最小单位—-图像的基本元素。可 CSS却是这样定义的：参考像素是距读者一臂之遥的像素密度为96dpi的设备上一个像素的视角。可是主流浏览器只是将1像素视为1英寸的1/96，所以原本被定义为相对度量单位的像素，其实上是一个绝对度量单位。下面是一个使用像素单位的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>度量单位px的使用</title>
    <style type="text/css">
        p{
            background: red;
            color: white;
            font-size: 20px;
            width:200px;
        }
    </style>
</head>
<body>
<p>狼夜月，伊人憔悴</p>

</body>
</html>

效果：
这里写图片描述

对font-size和width属性使用了px像素单位。

（3）百分比单位

百分比单位的用途就是可以把一个度量单位表示为其他属性值的百分比。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百分比单位的使用</title>
    <style type="text/css">

        p{
            font-size: 200%;
            width: 80%;
            background: #ff0000;
            color: white;

        }
    </style>
</head>
<body>
这是一行正常的字体
<p>能不能给我一首歌的时间</p>

</body>
</html>

效果如下：
这里写图片描述
使用百分比单位有两个需要注意的地方。第一，不是每一个属性都能用百分比单位；第二，能使用百分比单位的属性，其百分比挂钩的与其他属性是不同的。目前常用的font-size和widht而言：font-size属性，挂钩的是继承得到的font-size属性值；width属性，挂钩的则是包含块的的宽度。

（4）没有获得广泛支持的CSS属性

这里写图片描述

vw、vh、vm这三个属性使用前景广泛，但目前只是在IE浏览器中得到了实现。

（5）用算式作值
CSS的属性值设置用算式是CSS3吸引人的一个特性，在控制和准确方面，给样式设计提供了帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百分比单位的使用</title>
    <style type="text/css">

        p{
            font-size: calc(200% - 50%);
            width: calc(80% - 50%);
            background: #ff0000;
            color: white;

        }
    </style>
</head>
<body>
这是一行正常的字体
<p>能不能给我一首歌的时间</p>

</body>
</html>

看一下效果：
这里写图片描述

可以清楚地看到，算式放在calc()括号里面，在里面可以使用各种单位进行简单的四则混合运算。我们下面在看一下使用不同的单位进行四则运算的情形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百分比单位的使用</title>
    <style type="text/css">

        p{
            font-size: calc(200% - 15px);
            width: calc(80% - 700px);
            background: #ff0000;
            color: white;

        }
    </style>
</head>
<body>
这是一行正常的字体
<p>能不能给我一首歌的时间</p>

</body>
</html>

效果如下：
这里写图片描述
早起的时候，只有IE浏览器支持，从测试的结果来看，谷歌浏览器目前也支持了。（→_→）

CSS中的单位很多，但目前只有一小部分得到了广泛应用，除了长度以外，就属角度和时间用的多一点：
这里写图片描述

这里写图片描述

RainMcCom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的长度、角度、时间

许多CSS属性都需要设置长度值，比如我们之前用过的width和font-size属性，下面是一个简单的Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p{ backgr
复制链接

扫一扫

专栏目录