CSS - 度量单位

上一页
下一页

在 CSS 中，值和单位很重要，因为它们决定了网页上元素的大小、比例和位置。

单位，定义用于指定值的测量系统。CSS 提供了许多不同的单位来表示 长度和度量。CSS 单元用于指定页面元素或其内容的属性大小。

在 CSS 中，有许多方法可以指定和测量长度。它用于指定边距、填充、字体大小、宽度、高度、边框等。

例如 font-size： 50px，这里的数字 50 有一个后缀 px，即像素，它是一个 CSS 测量单位。

数字和单位之间不应有空格。当值为 0 时，可以省略该单位。

下表显示了我们主要在 CSS 样式中使用的不同类型的值和单位：

数据类型 描述 示例
<integer> 表示整数 55, -55, etc.
<number> 表示十进制数。它可能有也可能没有小数点。 1.5, 234, -1.5, etc.
<dimension> 表示一个<number>，并附加了一个单元。还包括值类型，例如<length>, <angle>, <time> and <resolution> 5px, 30deg, 2s, 2.5dpi
<percentage> 表示其他值的分数，即它始终相对于其他值。 80%, 25%, etc.

长度单位

长度单位可分为两种类型：

  • 绝对单位
  • 相对单位

绝对长度单位

这些单位被归类为固定长度单位，这意味着用绝对单位指定的长度在屏幕上保持精确、不变的大小。

当浏览器具有有关屏幕属性、正在使用的打印机或其他适当的用户代理的全面信息时，这些单元被证明非常有效。

下表包含所有类型的绝对单位：

单位 描述 等效值 示例
mm 指毫米，用于指定以毫米为单位的测量值。 1mm = 1/10th of 1cm font-size: 10mm;
cm 指厘米，用于指定以厘米为单位的测量值。 1cm = 37.8px = 25.2/64in font-size: 5cm;
Q 指四分之一毫米，用于指定以厘米为单位的测量值。. 1Q = 1/40th of 1cm font-size: 5Q;
in 指英寸，用于指定以英寸为单位的度量单位。 1in = 2.54cm = 96px font-size: 1in;
pt 指点，用于指定以磅为单位的度量值。. 1pt = 1/72 of 1in font-size: 20pt;
pc 指派卡，用于指定派卡的测量值。 1pc = 1/6th of 1in width: 6pc;
px 指像素，用于指定以像素为单位的度量值。. 1px = 1/96th of 1in font-size: 15px;

绝对单位 对于响应能力不是优先事项的项目来说很有价值。但是，它们对响应式网站不太有益，因为它们不会在屏幕尺寸发生变化时进行调整。

CSS 测量单位 - 使用 mm、cm、in、Q

以下是绝对单位（mm、cm、in、Q）的示例：


<html>
<head>
<style>
	 .unit-mm {
			font-size: 5mm;
	 }
	 .unit-cm {
			font-size: 1cm;
	 }
	 .unit-inch {
			font-size: 0.5in;
	 }
	 .unit-quarter {
			font-size: 40Q;
	 }
</style>
</head>
<body>
	 <h1 class="unit-mm">Font size 5mm</h1>
	 <h1 class="unit-cm">Font size 1cm</h1>
	 <h1 class="unit-inch">Font size 0.5inch</h1>
	 <h1 class="unit-quarter">Font size 40Q</h1>
</body>
</html>

CSS 测量单位 - 使用 px、pt、pc

以下是绝对单位（px、pt、pc）的示例：


<html>
<head>
<style>
	 .unit-px {
			font-size: 20px;
	 }
	 .unit-pt {
			font-size: 25pt;
	 }
	 .unit-pc {
			font-size: 3pc;
	 }
</style>
</head>
<body>
	 <h1 class="unit-px">Font size 20px</h1>
	 <h1 class="unit-pt">Font size 25pt</h1>
	 <h1 class="unit-pc">Font size 3pc</h1>
</body>
</html>

相对长度单位

相对长度单位之所以被称为相对长度单位，是因为它们是相对于其他元素来测量的。

相对单位非常适合设置响应式网站的样式，因为它们可以根据窗口大小或父元素按比例调整。这些单位定义了相对于其他长度属性的长度。

下表包含所有类型的相对单位：

单位 描述 示例 
em 相对于元素的字体大小。 font-size: 4em;
ex 相对于当前字体的 x 高度。 font-size: 4ex;
ch 相对于“0”的宽度。 font-size: 4ch;
rem 相对于根元素的字体大小。 font-size: 2rem;
lh 相对于元素的行高。 font-size: 4lh;
rlh 相对于根元素的行高。 font-size: 4rlh;
vh 相对于视口的高度。1vh = 视口高度的 1% 或 1/100。 font-size: 4vh;
vw 相对于视口的宽度。1vW = 视口宽度的 1% 或 1/100。 width: 4vw;
vmin 相对于视口的较小尺寸。1vmin = 视口较小尺寸的 1% 或 1/100。 width: 4vmin;
vmax 相对于视口的较大尺寸。1vMax = 视口较大尺寸的 1% 或 1/100。 width: 4vmax;
vb 相对于初始包含块在根元素的块轴方向上的大小。1vb = 包含块大小（块轴）的 1%。 font-size: 4vb;
vi 它相对于初始包含块在根元素的内联轴方向上的大小。1vb = 包含块大小的 1%（内联轴）。 font-size: 4vi;
svw, svh 相对于较小视口的宽度和高度。1SVW = 较小视口宽度的 1% 或 1/100,1SVH = 较小视口高度的 1% 或 1/100。 width: 40svw; height: 40svh;
lvw, lvh 相对于较大视口的宽度和高度。1lvW = 较大视口宽度的 1% 或 1/100,1lvh = 较大视口高度的 1% 或 1/100。 width: 40lvw; height: 40lvh;
dvw, dvh 相对于动态视口的宽度和高度。1DVW = 动态视口宽度的 1% 或 1/100,1DVH = 动态视口高度的 1% 或 1/100。 width: 40dvw; height: 40dvh;

CSS 测量单位 - em Unit

此单位设置相对于元素的字体大小的大小：


<html>
<head>
<style>
	 div {
			font-size: 20px;
			border: 2em solid green;
	 }
</style>
</head>
<body>
	 <div>
			This div will have a border of 20 * 2 = 40 pixels.
	 </div>
</body>
</html>

CSS 测量单位 - ex Unit

此单位设置相对于当前字体的 x 高度的大小：


<html>
<head>
<style>
	 div {
			font-size: 20px;
			border: 2ex solid green;
	 }
</style>
</head>
<body>
	 <div>
			This div will have a border of 2 * x-height of the line.
	 </div>
</body>
</html>

CSS 度量单位 - ch Unit

此单位设置所选字体中“0”（零）字符相对于宽度的大小。它主要用于创建随字体大小缩放的响应式设计：

在下面的示例中，我们将输入宽度设置为 10ch（这意味着它将显示 10 个字符）。尝试更改 font-size 值，看看输入如何仍然显示 10 个字符或数字。


<html>
<head>
<style>
	 input {
			font-size: 2em;
			width:10ch;
	 }
</style>
</head>
<body>
	 <div>
			<input type="text" name="id" id="userID" placeholder="enter PIN">
	 </div>
</body>
</html>

CSS 测量单位 - rem 单位

此单元设置相对于根元素（通常是 HTML 元素本身）的字体大小的大小：


<html>
<head>
<style>
	 html {
			font-size: 10px;
	 }
	 div {
			font-size: 2rem;
			margin: 1em;
			border: 5px solid black;
			background-color: beige;
			padding: 0.25em;
	 }
	 p {
			font-size: 3rem;  
			border: 2px solid red;
	 }
	 .child-element {
			font-size: 1rem; 
			border: 2px solid green;
	 }
</style>   
</head>
<body>
	 <div>
			div with font-size 2rem i.e 2*root element (html) font size  
			<br>
			<span class="child-element">This span resizes its font w.r.t to root element(html) </span>
	 </div>
	 <p>p with font-size 3rem  i.e 2*root element (html) font size 	</p>
</body>
</html>

CSS 测量单位 - lh 和 rlh 单位

LH 单位设置相对于元素的行高度的大小。

RLH 单位设置相对于根元素的行高的大小。

以下示例演示了 lh 和 rlh 单位的用法（尝试将 font-size 更改为 10px、2em 或 300%;在正文> div：first-of-type）：


<html>
<head>
<style>
	 :root {
			font-size: 100%;
			/*
			Changing the value of line height also changes
			the used value for any declaration that uses
			line height units.
		  
			In this case, it affects the entire document
			because this ruleset matches the root element.
			*/
			line-height: 1;
	 }
	 body > div:first-of-type {
			/*
			Changing the font size here only affects the
			first two blocks of text. Those blocks of text
			use lh units.
		  
			The last block of text use rlh or root
			line height units. Its text size gets calculated
			relative to the font size of the :root element.
		  
			Try changing this to 10px, 2em, or 300%;
			*/
			font-size: 1lh;
			display: grid;
			grid-template-columns: auto auto auto auto;
			gap: 24px;
			margin-block-end: 2rem;
	 }
	 .lh {
			font-size: 1.5lh;
			background: #87cefa66;
	 }
	 .rlh {
			font-size: 1.5rlh;
			background: #da70d666;
	 }
	 body > p {
			font-family: sans-serif;
			font-size: 1.5rem;
	 }
	 [lang] {
			padding: 5px;
	 }
	 [lang="en"] {
			font-family: "Lora", serif;
			align-self: start;
	 }
	 p {
			margin-block: 0 1rem;
	 }
</style>   
</head>
<body>
<div>
	 <div lang="en" class="lh">
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

			<p>Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业的标准虚拟文本，当时一位未知的印刷商拿走了一本打字本，并将其打乱，制作出一本打字样本书。它不仅存活了五个世纪，而且跨越了电子排版，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表格的发布而普及，最近又随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行起来。</p>
	 </div>
	 <div lang="en" class="rlh">
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

			<p>Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业的标准虚拟文本，当时一位未知的印刷商拿走了一本打字本，并将其打乱，制作出一本打字样本书。它不仅存活了五个世纪，而且跨越了电子排版，基本保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表格的发布而普及，最近又随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行起来。</p>
	 </div>
</div>
</body>
</html>

CSS 测量单位 - vh 单位和 vw 单位

VH（视口高度）单位设置相对于视口高度的大小。1vh = 视口高度的 1% 或 1/100。

VW（视口宽度）单位设置相对于视口宽度的大小。1vW = 视口宽度的 1% 或 1/100。

例如，我们将宽度设置为 20vw，将高度设置为 20vh。假设视口的宽度和高度分别为 1200px 和 1000px。在这种情况下，20vw 的值为 240px，20vh 的值为 200px。


<html>
<head>
<style>
	 body {
			height:500vh;
	 }
	 .container {
			display:flex;
	 }
	 .box-1 {
			background-color: lightgreen;
			height:50vh;
			width:50vw;
	 }
</style>
</head>
<body>
	 <div class="box-1"></div>
	 <p>Resize the height of the browser window to see how the box-size (height and width) changes. 1vh = 1% of viewport height and width respectively.</p>
</body>
</html>

CSS 度量单位 - vmin（视口最小值）和 vmax（视口最大值）单位

VMIN（视口最小值）单位设置相对于视口的较小尺寸的大小。1vmin = 视口较小尺寸的 1% 或 1/100。例如，如果视口宽 1000 像素，高 800 像素。如果我们将元素的宽度设置为 30vmin，它将是高度的 30%。所以 800px 的 30% 是 240px。

Vmax （Viewport maximum） 单位设置相对于视口的较大尺寸的大小。1vMax = 视口较大尺寸的 1% 或 1/100。例如，如果视口宽 1000 像素，高 800 像素。如果我们将元素的宽度设置为 30vmax，它将是宽度的 30%，即 300px。


<html>
<head>
<style>
	 div {
			box-sizing: border-box;
			color: white;
			margin-bottom: 4px;
			padding: 4px;
			overflow: scroll;
	 }
	 .vwvh {
			background: lightcoral;
			width: 60vw;
			height: 70vh;
	 }
	 .vmin {
			color: black;
			background: lightblue;
			width: 80vmin;
			height: 20vmax;
	 }
</style>
</head>
<body>
	 <div class="vwvh">
			width = 50vw (50% of the viewport's width)<br />
			height = 30vh (30% of the viewport's height)  
	 </div>
	 <div class="vmin">
			width = 80vmin (should be viewport's height)<br />
			height = 10vmax (should be viewport's width)
	 </div>
</body>
</html>

CSS 度量单位 - vb 单位

此单元在根元素的块轴方向上设置相对于初始包含块的大小的大小。1vb = 包含块大小（块轴）的 1%：


<html>
<head>
<style>
	 body {
			font-size:20px;
	 }
	 .container {
			height:80vb;
	 }
	 p {
			font-size:5vb;
	 }
</style>
</head>
<body>
	 <div class="container">
	 <p>Resize the height of the browser window to see how the font changes.</p>
</div>
</body>
</html>

CSS 测量单位 - vi Unit

此单元在根元素的内联轴方向上设置相对于初始包含块的大小的大小。1vi = 包含块大小的 1%（内联轴）：


<html>
<head>
<style>
	 body {
			font-size:20px;
	 }
	 .container {
			width:80vi;
	 }
	 p {
			font-size:5vi;
	 }
</style>
</head>
<body>
	 <div class="container">
	 <p>Resize the height of the browser window to see how the font changes. 1vh = 1% of viewport height and width respectively.</p>
</div>
</body>
</html>

以下示例演示如何使用 <resolution> 数据类型，其中图像分辨率设置为 500dpi：


<html>
<head>
<style>
	 img {
			width: 300px;
			height: 200px;
			margin-right: 0.5in;
	 }
</style>
</head>
<body>
	 <h2>Image Resolution dots per inch</h2>
	 <h3>500dpi</h3>
	 <img style="image-resolution: 500dpi;" src="images/pink-flower.jpg" alt="500dpi">
</body>
</html>

示例 - 百分比

百分比值始终与另一个值相关设置。例如，当百分比值作为元素的高度或宽度传递时，它将作为父元素的高度或宽度的百分比进行计算。

让我们看一个例子来更好地理解这一点。在这里，一个百分比值被传递给元素的高度：


<html>
<head>
<style>
	 .main {
			height: 400px;
			border: 5px solid rgb(19, 12, 218);
			display: inline-block;
	 }
	 .box {
			border: 2px solid black;
			padding: 5px;
			margin: 10px;
			display: inline-block;
	 }
	 .length-value {
			height: 100px;
	 }
	 .percent-value {
			height: 40%;
	 }
</style>
</head>
<body>
	 <div class="box length-value">Box height is 100px</div>
	 <div class="box percent-value">Box height is 40%</div>
	 <div class="main">
	 <div class="box length-value">Box inside the main box is 100px high</div>
	 <div class="box percent-value">Box height is 40% of main box</div>
</div>
</div>
</body>
</html>

让我们再看一个使用百分比的例子，其中列表的嵌套值是根据父元素 font-size 的值计算的：


<html>
<head>
<style>
	 .font-value {
			font-size: larger;
	 }
	 li {
			font-size: 60%;
	 }
</style>
</head>
<body>
	 <div>
			<h2>Beverages</h2>
			<ul>
				 <li class="font-value">Tea
						<ul>
						<li>Assam tea</li>
						<li>Darjeeling tea</li>
						</ul>
				 </li>
				 <li class="font-value">Coffee
						<ul>
						<li>Hot coffee</li>
						<li>Cold Coffee</li>
						</ul>
				 </li>
				 <li class="font-value">Juices
						<ul>
						<li>Orange</li>
						<li>Mango</li>
						<li>Sweet Lime</li>
						</ul>
				 </li>
			</ul>
	 </div>
</body>
</html>   

有些属性接受长度或百分比值，有些属性只接受长度。如果允许的值指示 <length-percentage>，则传递的值可以是 length 或 percentage;当允许的值指示 <length>时，传递的值应仅为 length，而不是百分比。

示例 - 数字

CSS 的一些属性接受值类型为数字，而不附加任何单元。属性，例如不透明度、行高等。

例如，不透明度的值范围为 0 到 1。

下面是一个不透明度示例：


<html>
<head>
<style>
	 .wrapper {
			display: flex;
	 }
	 #common-style {
			background-color: #d3360b;
			width: 150px;
			height: 100px;
			border: 3px solid black;
			margin: 5px;  
	 }
	 p {
			text-align: center;
	 }
	 .decimal-opacity {
			opacity: 0.4;
	 }
	 .opacity-0 {
			opacity: 0;
	 }
	 .opacity-1 {
			opacity: 1;
	 }
</style>
</head>
<body>
	 <div class="wrapper">
			<div class="decimal-opacity" id="common-style">
				 <p>CSS Opacity to 0.4</p>
			</div>
			<div style="border: 2px solid green">
				 <p>CSS Opacity to 0</p>
				 <div class="opacity-0" id="common-style"></div>
			</div>
			<div class="opacity-1" id="common-style">
				 <p>CSS Opacity to 1</p>
			</div>
	 </div>
</body>
</html>

以下是行高的示例：


<html>
<head>
<style>
	 div {
			border: 2px solid black;
			width: 700px;
	 }
	 div.lh-integer {
			line-height: 1;
	 }
	 div.lh-decimal {
			line-height: 2.6;
	 }
</style>
</head>
<body>
<h2>Line-height Property Values</h2>
	 <h3>line-height: 1:</h3>
			<div class="lh-integer">The paragraph is with a whole value for line-height.<br>
			The line height for the text is set to 1, which makes the lines look close.
			</div>

			<h2>line-height: 2.6:</h2>
			<div class="lh-decimal">The paragraph is with decimal value for line-height.<br>
			The line height for the text is set to 2.6. It is a unitless value, with just the number.<br>
			The line height here is relative to the font-size.
			</div>
</body>
</html>
打印本页
上一页
下一页