绝对单位与相对单位

绝对单位在网页中很少使用,一般多用在传统平面印刷中,但在特殊的场合使用绝对单位是很有必要的。绝对单位包括英寸、厘米、毫米、磅和 pica。

  • 英寸(in):是使用最广泛的长度单位。
  • 厘米(cm):生活中最常用的长度单位。
  • 毫米(mm):在研究领域使用广泛。
  • 磅(pt):在印刷领域使用广泛,也称点。CSS 也常用 pt 设置字体大小,12 磅的字体等于六分之一英寸大小。
  • pica(pc):在印刷领域使用,1 pica 等于 12 磅,所以也称 12 点活字。

相对单位

相对单位与绝对单位相比显示大小不是固定的,它所设置的对象受屏幕分辨率、可视区域、浏览器设置以及相关元素的大小等多种因素影响。

1) em

em 单位表示元素的字体高度,它能够根据字体的 font-size 属性值来确定单位的大小。

【示例1】在下面样式中定义段落文本行高为字体大小的 2 倍。

<pre class="css sh_css snippet-formatted sh_sourceCode" style="margin: 0px; display: block; padding: 0px; font-size: 14px; line-height: 1.6em; color: rgb(102, 102, 102); white-space: pre-wrap; word-wrap: break-word; background: none; border: none; border-radius: 0px;">

1.  p{  /*设置段落文本属性*/
2.  font-size: 12px;
3.  line-height: 2em;  /* 行高为24px */
4.  }

</pre>

从上面样式代码中可以看出:一个 em 等于 font-size 的属性值,如果设置font-size: 12pt,则line-height: 2em就会等于 24pt。如果设置 font-size 属性的单位为 em,则 em 的值将根据父元素的 font-size 属性值来确定。

例如有下面的 HTML 结构:

<pre class="html sh_html snippet-formatted sh_sourceCode" style="margin: 0px; display: block; padding: 0px; font-size: 14px; line-height: 1.6em; color: rgb(102, 102, 102); white-space: pre-wrap; word-wrap: break-word; background: none; border: none; border-radius: 0px;">

1.  <div id="main">
2.  <p>em 相对长度单位使用</p>
3.  </div>

</pre>

为它设置如下的 CSS 样式

<pre class="css sh_css snippet-formatted sh_sourceCode" style="margin: 0px; display: block; padding: 0px; font-size: 14px; line-height: 1.6em; color: rgb(102, 102, 102); white-space: pre-wrap; word-wrap: break-word; background: none; border: none; border-radius: 0px;">

1.  #main { font-size: 12px; }
2.  p { font-size: 2em; }

</pre>

则 p 元素里面的字体大小将为 24px。

同理,如果父对象的 font-size 属性的单位也为 em,则将依次向上级元素寻找参考的 font-size 属性值,如果都没有定义,则会根据浏览器默认字体进行换算,默认字体一般为 16px。

2) ex

ex 单位根据所使用的字体中小写字母 x 的高度作为参考。在实际使用中,浏览器将通过 em 的值除以 2 得到 ex 的值。为什么这样计算呢?

因为 x 高度计算比较困难,且小写 x 的高度值是大写 x 的一半;另一个影响 ex 单位取值的是字体,由于不同字体的形状差异,这也导致相同大小的两段文本,但由于字体设置不同,ex 单位的取值也会存在很大的差异。

3) px

px 单位是根据屏幕像素点来确定的。这样不同的显示分辨率就会使相同取值的 px 单位所显示出来的效果截然不同。

实际设计中,建议网页设计师多使用相对长度单位 em,且在某一类型的单位上使用统一的单位。如设置字体大小,根据个人使用习惯,在一个网站中,可以统一使用 px 或 em。

百分比

百分比也是一个相对单位值。百分比值总是通过另一个值来计算,一般参考父对象中相同属性的值。例如,如果父元素宽度为 500px,子元素的宽度为 50%,则子元素的实际宽度为 250px。

百分比可以取负值,但在使用中受到很多限制。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容