CSS的长度

2017-09-13 08:20:29来源:CSDN作者:RainMcCom人点击

分享

许多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)像素单位的问题

待续。。。。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台