CSS像素单位

Posted 2022-11-16 一杯清泉

一、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)这样写错误。