CSS单位pxemremvhvwvminvmax

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS单位pxemremvhvwvminvmax相关的知识,希望对你有一定的参考价值。

1、px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

2、em:相对长度单位.(1em=16px)相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 
看下面例子:

<body>body

<div class="div1">div1

<div class="div2">div2

<div class="div3">div3</div>

 </div>

   </div>

</body> 

计算关系是这样的:

body的font-size是继承自跟元素html,html的尺寸是浏览器默认尺寸14px;

div1的font-size=1.5*14px = 21px;

div2的font-size=1.5*21px = 31.5px;

div3的font-size=1.5*31.5px = 47.25px;

如果手动设置div2的font-size为40px,div3的font-size应该为1.5*40px = 60px。

3、rem:相对长度单位。r’是“root”的缩写,相对于根元素<html>的字体大小。

4、vh and vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。

1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度。

5、vmin and vmax:关于视口高度和宽度两者的最小值或者最大值。

以上是关于CSS单位pxemremvhvwvminvmax的主要内容,如果未能解决你的问题,请参考以下文章

CSS单位

[翻译]解读CSS中的长度单位

CSS中的长度单位

CSS长度单位

视区相关单位vw, vh ,vm,CSS/CSS3长度时间频率角度单位大全

CSS 长度单位的详解『你还是只会使用PX吗?(╬▔皿▔)╯』