css长度单位讲解 (超详细) (易忘的建议收藏)

最新推荐文章于 2024-06-03 20:51:13 发布

置顶 qq_2268846315

最新推荐文章于 2024-06-03 20:51:13 发布

阅读量286

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_42005992/article/details/111476909

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述
提示: 特殊值0可以省略单位。例如：margin:0px可以写成margin:0

一相对长度单位

1. em

相对长度单位。相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（大部分浏览器默认字体大小为16px）。

如果当前默认字体尺寸是14px，n em即为14px字体尺寸的n倍。例如2em就为28px。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rem</title>
  <style>
	body{font-size:14px;}
	.size1 p{font-size:1em;}
	.size2 p{font-size:2em;}
	.size3 p{font-size:3em;}
  </style>
</head>
<body>
  <ul>
	<li class="size1">
		<strong>1em</strong>:
		<p>1em大小的文字</p>
	</li>
	<li class="size2">
		<strong>2em</strong>:
		<p>2em大小的文字</p>
	</li>
	<li class="size3">
		<strong>3em</strong>:
		<p>3em大小的文字</p>
	</li>
  </ul>
</body>
</html>

2. rem

相对于根元素的font-size来计算值的倍数。假如body根元素的font-size为16px，body内的所有元素2rem的大小都为32px。

同em的区别就是，rem相对于根元素，em相对于当前元素的上一级元素的font-size大小。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rem</title>
  <style>
    body{font-size: 16px;}
    div,p,span{font-size: 2rem;}
  </style>
</head>
<body>
  <div>
    div
    <span>span</span>
    <p>p</p>
  </div>
</body>
</html>

3. ex

相对长度单位
相对于字符“x”的高度，通常为字体高度的一半。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rem</title>
  <style>
    body{font-size: 16px;}
    span{font-size: 1ex;}
  </style>
</head>
<body>
  <div>
    <span>x嗯</span>
    <p>x嗯</p>
  </div>
</body>
</html>

4. ch

相对长度单位
1ch就是一个0的宽度
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rem</title>
  <style>
    div{width: 1ch;overflow: hidden;}
  </style>
</head>
<body>
  <div>0000000000</div>
</body>
</html>

5. vw

相对长度单位
相对于视口的宽度。视口被均分为100单位的vw
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rem</title>
  <style>
    div{
      width: 50vw;
      height: 500px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

6. vh

相对长度单位
相对于视口的高度。视口被均分为100单位的vh
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rem</title>
  <style>
    div{
      height: 50vh;
      background-color: green;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

7. vmax

相对长度单位
相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rem</title>
  <style>
    div{
      width: 50vmax;
      /* height: 500px; */
      background-color: green;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

8. vmin

相对长度单位
相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rem</title>
  <style>
    div{
      height: 50vmin;
      background-color: green;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

9. px

相对长度单位,同时也是使用最多的单位
pixel（像素）的缩写，相对于屏幕分辨率。

二绝对长度单位

绝对长度就是可以用尺子量出来的长度

绝对长度包括(cm, mm, q, in, pt, pc, px)

转换公式为(浏览器已经不在支持q): 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

qq_2268846315

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css长度单位讲解 (超详细) (易忘的建议收藏)

提示: 特殊值0可以省略单位。例如：margin:0px可以写成margin:0一相对长度单位1. em相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（大部分浏览器默认字体大小为16px）。如果当前默认字体尺寸是14px，n em即为14px字体尺寸的n倍。例如2em就为28px。<!DOCTYPE html><html lang="en"><head> <meta cha.
复制链接

扫一扫