CSS单位总结

最新推荐文章于 2024-08-22 12:33:24 发布

爱编程的兔子

最新推荐文章于 2024-08-22 12:33:24 发布

阅读量505

点赞数 1

分类专栏： css 文章标签： CSS单位

css 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

CSS中，单位分为两类

绝对单位：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的；
相对单位：没有固定的度量值，是由其他元素尺寸来决定的相对值。
注意：此处的相对指当前元素的字号（font-size）或者视口（viewport）尺寸。

绝对单位有：

单位	简介
px	像素 (计算机屏幕上的一个点)，1px = 1/96in
pt	磅 (Points) ，1 pt = 1/72 in
pc	12 点活字（Picas），1pc = 12pt = 1/6in
in	英寸（Inches），1in = 96px = 2.54cm
cm	厘米（Centimeters），1cm = 96/2.54px
mm	毫米（Millimeters），1mm = 1/10cm
q	Quarter-millimeters，1q = 1/4mm

注：绝对单位通常使用在打印方面。

相对单位有：

单位	简介
%	百分比，相对于父元素的宽度或者字体大小
em	相对于当前对象内文本字体的大小，1em = 当前字体的大小，2em = 2*当前字体的大小
rem	（root em）,相对于html标签的字体大小
ex	当前字体环境中x字母的高度，一个 ex 是一个字体的 x-height (x-height 通常是字体尺寸的一半。)
ch	当前字体环境中0数字的高度
vw	1%视口（浏览器可视区域）的宽度
vh	1% 视口（浏览器可视区域）的高度
vmin	1% 视口（浏览器可视区域）宽度和高度中较小的尺寸
vmax	1% 视口（浏览器可视区域）宽度和高度中较大的尺寸

浏览器兼容性

单位	chrome	IE	Firefox	Safari	opera
`em`,`ex`,`%`,`px`,`cm`,`mm`,`in`,`pt`,`pc`	1.0	3.0	1.0	1.0	3.5
`ch`	27.0	9.0	1.0	7.0	20.0
`rem`	4.0	9.0	1.0	7.0	20.0
`vh`，`vw`	20.0	9.0	19.0	6.0	20.0
`vmin`	20.0	9.0*	19.0	6.0	20.0
`vmax`	26.0	不支持	19.0	不支持	20.0

重要单位详解

1、`%`

相对于父元素相同属性的大小，%可以说是属性的值吧，但是可以看做长度单位来使用，因此列出。

%设置字体大小，则是相对于父元素的字体大小计算
大多数浏览器中<html> 和<body> 标签中的默认字体尺寸是100%
```
 html{ font-size: 100%; }
 body {font-size: 100%;}
 /* 100% = 1em = 16px = 12pt */
```
%设置非字体尺寸（如宽和高），基于具有相同属性的父元素的长度值
拓展：
确认父元素（relative、absolute、float、fixed、static）
1、static、relative、float元素，均符合HTML树形结构
2、absolute是离它最近的定位元素（relative、absolute、fixed）元素或者body（没找到定位元素）
3、fixed元素是视口

3、`em`

基于当前元素字体尺寸

html {
	font-size: 14px;
}
div {
	font-size: 1.2em;
	line-height: 1.5em;
}
<body>
	<div> font-size:16.8px;line-height:25.2px;
		<div> font-size:20.16px;line-height:30.24px;
			<div> font-size:24.192px;line-height:36.288px;</div> 
		</div>
	</div>
</body>

4、`rem`

基于html字体尺寸

html {
	font-size: 14px;
}
div {
	font-size: 1.2rem;
	line-height: 1.5rem;
}
<body>
	<div> font-size:16.8px;line-height:25.2px;
		<div>font-size:16.8px;line-height:25.2px;
			<div>font-size:16.8px;line-height:25.2px;</div> 
		</div>
	</div>
</body>

注意：3&4中示例在chrome浏览器上显示font-size:18px;line-height:27px;，但实际计算是根据16.8px来的，Firefox无此问题。

5、`ex` 和 `ch`

ex 和ch 单位，依赖于当前字体font-family 和字体大小 font-size。

ex 指当前字体环境中小写字母x 的高度；
ch 指当前字体环境中数字 0 的宽度。

7、`vw` 与 `vh`

如果项目中要使用视口（viewport）的宽度或者高度，而不是父元素的宽度或者高度，那么这时候就需要vw和vh出场了。

1vw = 1%的视口宽度
1vh = 1%的视口高度
//假设视口的宽度为750px，高度为1400px,那么：
1vw = 750px / 100 = 7.5px
1vh = 1400px / 100 = 14px

应用场景：
1、任意元素高度与屏幕高度一致：

// 以前做法
.test{ height: 100%}
html,body{height:100%}

// 现在做法：
.test{ height: 100vh}

2、子元素大小根据浏览器改变而不是父元素
3、响应字体大小
在这里插入图片描述

// 现在做法：
.test{ font-size: 100vh}

4、响应垂直居中

.test {
	width:60vw;
	height:60vh;
	margin: 20vh auto;
}

5、等列宽

.colum-1 {
	float: left;
	width: 50vw;
}
.colum-2 {
	float: left;
	width: 30vw;
}
.colum-3 {
	float: left;
	width: 20vw;
}

注：IE10＋和现代浏览器都支持这两个单位。

9、`vmin` 和 `vmax`

这两个单位是针对vw和vh：

vmin 是vw和vh中比较小的值;
vmax 是vw和vh中比较大的值。

注：

IE10+ 和现代浏览器都已经支持 vmin
除IE不支持 vmax，其他现代浏览器已经支持了

参考网站：

https://segmentfault.com/a/1190000004043937
https://www.w3cplus.com/css/simplify-your-stylesheets-with-the-magical-css-viewport-units.html
http://fittextjs.com/