本文主要介绍几种长度单位
px
px指像素,是相对于显示器的屏幕分辨率而言,较为固定,即
p{font-size=20px}
em
em也称倍数,是相对单位,是相对于父级的字号来设置的,浏览器默认1em=16px;或者当父级有设置font-size时,继承父级的font-size再对em的单位相乘。
<div style="font-size:15px;">
<span style="font-size:2em"> </span>
</div>
如上,即span的font-size为2em=30px。
rem
rem=root em即根元素的font-size,也就是对整个html文档来说相对于<html>为元素设定字体大小,仍然是相对单位,只不过仅相对于<html>元素,而不会受到父级的影响。
<html>默认设置最小字体为12px,当<12px时,浏览器默认为12px
max-width
max-width设置元素的最大宽度
max-height
max-height设置元素的最大高度
min-width
min-width设置元素的最小宽度
min-height
min-height设置元素的最小宽度
vw
vw主要是指视窗宽度,1vw=1/100视窗宽度
vh
vh主要是指视窗高度,1vh=1/100视窗高度
%
%即指百分比,以百分比为单位的长度值是继承其父级元素的长度值。
body{
width:1000px;
}
其子元素
p{
width:50%;
}
即子元素p的font-size=1000*50%=500px
max-width,max-height,min-width,min-height,%,vh,vw主要用来做html文件对浏览器窗口的自适应