一、px
整个屏幕的一个像素点。
二、em单位
- 1em:16px浏览器的默认值
- 1em = 基准值(16px)* number(1)= 16px
- 2em = 基准值(16px)* number(2)= 32px
当默认值改了,基准值也会跟着改,尺寸是基于父元素的设置的值改变的:
div {
font-size: 10px;
}
.box-ul li {
font-size: 2em;
}
<div>
<!--原始设置的大小10px-->
<ul>
<li>1</li>
</ul>
<div class="box-ul">
<!--设置大小为父布局的2em,即10px*2=20px-->
<ul>
<li>1</li>
<li>
<ul>
<!--设置大小为父布局的2em,即20px*2=40px-->
<li>1</li>
</ul>
</li>
</ul>
</div>
</div>
会导致内层的字体越来越大,实用性不强。
三、rem单位
- rem:相对值,基于根标签(html标签)
- 1rem = 基准值(16px)* number(1)= 16px
html {
font-size: 62.5%;
}
div {
font-size: 30px;
}
.box-ul li {
font-size: 2rem;
}
<div>
<!--原始设置的大小30px-->
<ul>
<li>1</li>
</ul>
<div class="box-ul">
<!--设置大小为html的2em,即10px*2=20px-->
<ul>
<li>1</li>
<li>
<ul>
<!--设置大小为html的2em,即10px*2=20px-->
<li>1</li>
</ul>
</li>
</ul>
</div>
</div>
四、vh/vw
- vh - height - 屏幕的百分比高
- vw - width - 屏幕的百分比宽
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.home {
height: 100vh;
width: 50vw;
background: greenyellow;
}
.about {
height: 43vh;
width: 54vw;
background: green;
}
<div class="home"></div>
<div class="about"></div>
五、calc
动态计算大小,例如下面动态填满一屏。
* {
margin: 0;
padding: 0;
}
.nav{
background: blue ;
height: 6rem;
color: white;
font-size: 3rem;
}
.banner {
background: red;
height: calc(100vh - 6rem);
}
<ul class="nav">
<li>哈哈哈</li>
</ul>
<div class="banner"></div>
height: calc(100vh - 6rem);表示banner的高度为上面整屏高度减去nav的高度。
注意:运算符前后需要有空格,calc(100vh-6rem)这样写错误。