CSS单位简述

最新推荐文章于 2024-10-03 21:29:23 发布

二木成林

最新推荐文章于 2024-10-03 21:29:23 发布

阅读量256

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/cnds123321/article/details/86497482

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

单位	描述
%	百分比
in	英寸
cm	厘米
mm	毫米
em	1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
ex	一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 点活字 (1 pc 等于 12 点)
px	像素 (计算机屏幕上的一个点)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em单位。这个单位用得比较多，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

<!DOCTYPE html>
<html>
<head>
	<title>尺寸</title>
	<style type="text/css">
		div {
			background:#e8e8e8;
			font-size:20px;
			border:1px solid red;
		}
		.div1 {
			height:1em;/*元素高20px,相当于我自己设置的字体尺寸大小*/
			/*如果不使用设置的font-size:20px;那么使用的谷歌浏览器默认是16px，则在这里div1则是16px*/
		}
		.div2 {
			height:2em;/*元素高40px，相当于设置的字体尺寸的2倍*/
		}
		.div3 {
			height:3em;/*元素高60px，相当于设置的字体尺寸的3倍*/
		}
	</style>
</head>
<body>
	<div class="div1">div</div>
	<br /><br />
	<div class="div2">div</div>
	<br /><br />
	<div class="div3">div</div>
</body>
</html>

ex单位。一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)

<!DOCTYPE html>
<html>
<head>
	<title>尺寸</title>
	<style type="text/css">
		div {
			background:#e8e8e8;
			font-size:20px;
			border:1px solid red;
		}
		.div1 {
			height:1ex;/*div元素的高度为10.8px，接近与字体大小的一半*/
		}
		.div2 {
			height:2ex;/*div元素的高度为21.6px，比设置的字体大1.8px*/
		}
		.div3 {
			height:10ex;/*div元素的高度为108px*/
		}
	</style>
</head>
<body>
	<div class="div1">div</div>
	<br /><br />
	<div class="div2">div</div>
	<br /><br />
	<div class="div3">div</div>
</body>
</html>