揭秘CSS(第 1 版)
1.4.2 长度
阅读(

概述

CSS简介

CSS开发环境

CSS语法

CSS属性的值

数字

长度

长度必须包含数字和长度单位,并且它们之间不允许出现空格。数字可以是整数或小数,可以是正数或负数。如果数字为0,则可以带单位,也可以不带。因此,以下都是合法的长度值:1.5em,-20px,0。

CSS的长度单位分为绝对长度单位和相对长度单位。使用绝对长度单位时,其值是一个固定的值;使用相对长度单位时,其长度值不是固定的,它会随着参考值的变化而变化。

常用的绝对长度单位有pt(点)、mm(毫米)、cm(厘米)、in(英寸),pt是一个标准印刷度量单位,一英寸是72 点,即 1pt = 1/72inmm、cm、in 这几个长度单位,大家已经很熟悉,不再赘述。

共有 3 种相对长度单位:em、ex 、px,前两个分别代表 “m-height” 和 “x-height”,即字母 m 的高度和字母 x 的高度,是常见的印刷度量单位。

px代表“像素”,实际上就是计算机屏幕上的一个点。像素被定义为相对定位,是因为它取决于显示器的分辨率。一旦分辨率确定,设置为px的尺寸就成为固定尺寸,不会自动缩放。

em是一个相对长度单位,1em被定义为一种给定字体的 font-size 值。如果一个元素的font-size 为 14px,那么对于该元素,1em 就等于 14px。当 em 用于设置元素的 font-size 属性本身时,em 的值会相对于父元素的字体大小。显然,em的值会随元素的不同而发生变化,这给计算带来极大的困难。于是,就产生了rem这个相对单位,它是相对于根元素(即html元素)的字体大小。由于根元素的字体大小始终不变,计算起来就容易多了。

ex是一个相对长度单位,1ex被定义为一种给定字体的小写字母“x”的高度。因此,这个值会随字体的不同而变化。然而,很多浏览器都没有内置 ex 高度值,只是简单的取 em 的值,再取其一半作为 ex 的值。所以,一般不推荐使用 ex 这个长度单位。

随着响应式Web设计的流行,px已经无法跟上时代的脚步。%、em、rem这几个能够自适应的相对长度单位开始流行。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验