快速学习单位知识

px

像素单位：是绝对单位，不可以继承

div{

px不可继承，继承的是font-size的属性

font-size: 10px;

}

%

百分比，可以继承，是针对于父元素的占比

.div{

width: 100px;

height: 100px;

border: 1px solid red;

}

p{

width: 50%;

height: 50%;

border: 1px solid black;

}

em

针对于父元素的大小，可以继承

.box{

与box的字体大小无关

font-size: 50px;

}

.div{

font-size: 30px;

}

p{

与div的字体大小有关 0.5em=30px * 0.5

font-size: 0.5em;

}

rem

针对于根元素，可继承（只与html设置的大小有关）

.html{

font-size: 10px;

}

.box{

font-size: 20px;

}

.div{

font-size: 6rem;

width: 15rem;

height: 15rem;

border: 1px solid red;

}

p{

font-size: 5rem;

}

<div class="box">盒子

<div class="div">文本

<p>段落</p>

</div>

</div>

vw vh

是百分比，针对的是可是窗口的宽度和高度的1%，1vw、1vh=1%可视窗口的宽和高

.box{

width: 10vw;

height: 10vh;

border: 1px solid red;

}

可视窗口的大小

盒子的大小

vmin vmax

针对可视窗口，vmin是可视窗口中得最小值 vmax 是可视窗口中得最大值

.box{

width: 10vmax;

height: 10vmin;

border: 1px solid red;

}

可视窗口大小